How a web application works

all right so let's talk about how web application works and to understand this we have to go a little bit in depth and

explain what's called an HTTP request and response but in that process we'll understand how all the different

technologies work together so here I put together some list of technologies that you may have heard of and if you are

trying to learn how to code for the first time it could be very overwhelming to know what are the different things that I should study when there are

hundreds of things that kind of begs your attention so the purpose of this video is to help you understand how all of these different technologies work

together without having a framework in mind it's hard to know how all of this fits in this video could also be really good for entrepreneurs or recruiters or

hiring managers developers to see how all the different pieces work together alright so if you look a little bit more

into these technologies you may have heard of PHP Python Ruby nodejs c-sharp

and then HTML CSS and the list goes on restful api cloud services docker containerization jenkins what does that

all mean cucumber TDD right again there are just so many technologies out there that without having a framework in place it could be very very overwhelming so

what I'm going to do is I'm going to use an analogy and this analogy is called the IKEA store analogy and this analogy

has helped me to teach this content to a lot of my former students when I was running coding dojo so I hope this analogy is helpful it will help you see

a bigger picture of how everything works and using this foundation of the IKEA store analogy you can also figure out how to tackle any scalability issue

that your web applications may be having so I'll introduce those concepts later on but for now let's go and get into the

IKEA store analogy all right so I have my iPad over here and just a very simple

drawing app that we can use to to illustrate how this works so before we talk about web applications or web

servers let's use this analogy for so let me introduce this IKEA store is not a real IKEA store but I think when I say IKEA you can kind of picture how the

IKEA store looks like it's a furniture store so let's say that our IKEA store looks as follows and as you guys may

know I love just a blank white screen and a whiteboard because this is how I was taught and I just love the simplicity I don't like PowerPoint

slides so I'd like to just draw things all right so let's say that at this IKEA store the way that it works right now is let's say there are three lines of

customers so these are customers and they're waiting in front of my store so this is my IKEA store now let me just

erase some of these Don's now at this store the way that it works is I have three receptionists sorry about my back

pad riding just listen to my words and see if you can follow along so these three receptionists handle the three lines of customers there is a

receptionist per line and then what happens behind the scene is so first of all customers walk in a they fill out an

order form saying okay IKEA store these are the furnitures that I would like to buy they hand that order form to the receptionist the receptionist takes that order form and gives it to the workers

so let's say at this particular IKEA store we got workers who speak let's say Mandarin okay and they speak Mandarin to each other they take the

order form and using Mandarin they communicate with each other how they're going to fulfill the order of the customer and they do that using Mandarin as a way of speaking to each other

communicating assembling furnitures together they do that using Tiny's okay so using Bandra so we'll say that you know there are speaking banter right now

and then there is a warehouse and this warehouse has a lot of cabinet drawers so just imagine that there are a lot of different cabinet drawers over here and

these different cabinet drawers are used to or to store different parts for example maybe some of the IKEA chair legs the silver legs black legs white

legs the table tops different lands all the different parts that are used to assemble the furnitures are all stored in these cabinets and there's lots and

lots of cabinets and drawers where you can store inventories alright so again customers wait in line they fulfill the order they talk to the receptionist the receptionist gives that order form

to the workers who speak a specific programming language well when a little bit early but they speak a specific language and then they go to the warehouse and there is a warehouse

manager who speaks a different language they speak the warehouse language and then the parser stored the warehouse manager goes and retrieves the part

gives the parse back to the workers and the workers speaking that language assembles the furnitures together hands it off to the receptionist and the receptionist hands it off to the

customer okay so this is how my IKEA store works okay pretty simple is there is a system in place all right so what

does this mean for web application and why did I introduce this I gave a little bit of hint but you know these workers speak a language and the analogy of that language is a programming language but

how does this relate before we tie in some of this analogy together let's get back and look at a higher picture alright so all of us are used to opening

up a browser this is my browser this is where you type in so you can type in for example let's say you typed in hacker hero comm which is the education

platform that I'm using to teach people so you type in a URL into the browser and what happens what's happening

actually behind the scene behind the browser well what's happening is this sends a request this is called the HTTP

request and it needs to go and find the the place to the computer that has this hacker here or calm or cnn.com or

whatever site that you're looking for right how does it find it well the way that it works is there is this server called DNS server and we're not really

going to go too much into how this server is built but the DNS server the way you can look at it is like a phonebook what it has it has this

imagined list of all the domains in the world like cnn.com espn.com hacker hero

comm and so forth and it contains it Maps the IP address ok or the address of the computer that hosts that information

well what is an IP address is really easy to think about this just like how every single house or office in the world has a specific residential address

so that if you want to write it later you write it later and say - and then you write the residential or the commercial address and the mailman knows where to deliver that mail - just like

that every computer that's computer all these rectangles in the internet or in the cloud all right because cloud or Internet is basically just bunch of

computers connected as a network that you can kind of think of the Internet is that way trying to simplify so all the

computers in the cloud have a specific address just like every single house has a residential address and that's called the IP address and the IP address is usually composed of numbers

separated by a dot so this cnn.com could be for example twenty five point one three five point nine two point seven a and if you type in cnn.com into the

browser then the DNS server says okay you need to go and talk to this computer okay and that is kind of you know how web application works all of this is a

server okay so now how does the analogy come in okay this is basically the IKEA store that we talked about so when you put in a request to the inlet in the

browser it looks up the DNS server and it finds that computer with that IP address what's happening so people you're not the only one who is sending

the HTTP requests right so a lot of people are sending request and the server basically says so I'll say this is the server basically says wait in

line so imagine that there are three lines people who are waiting to get information from the server and they

filled out the order form the order form is basically the URL or if you're looking at hacker hero dot-com slash game slash learn to code then that's the

order form I want information from this URL right so a bunch of people are waiting having filled out their form and this is again called the HTTP request is

basically the order form that the customers fill down and then there is a program called web server okay web server this is confusing

because this reception is is also called a web server sometimes this whole store or the server is also called a web server it's a little confusing I know but just bear bear bear with us and it

will make more sense okay so the server takes off the we takes the request sends it to the workers and just like in the IKEA store you could hire Mandarin

workers English workers Spanish workers Italian Korean workers the server in the computer can have people the workers who

speak for example PHP Ruby Python c-sharp Java no J yes and there are just bunch of different programming languages

that you can use now let's step back at a high level think back to the IKEA store if you are the customer at the IKEA store does it matter that the

workers are assembling furnitures speaking Mandarin English Korean Spanish it doesn't matter what language they use

to assemble that furniture as long as the furnitures come back good it doesn't matter all right same thing over here for the web servers does it matter

does the customer care whether espn.com or cnn.com was built using PHP as a language Ruby Python c-sharp Java no js'

it really doesn't matter all right because all of that is happening behind the scene and in fact if you take some of my other courses you will see that

all of these programming languages boil down to what I consider fight or building blocks of software and everything can be built using those five building blocks anyway so I'll introduce

someone other analogies to explain but let's go back to this analogy so the workers can assemble the furnitures together they can also go to the database

database is where all the different informations are stored for example all the popular news of the day are archived in this or products that your website is

selling or you know some of the other information the messages that your users are sharing with one another is all

stored in this cabinet drawers okay so now let's now zoom into the database and think about this in the database just let's go back to the IKEA store example

imagine that I had this IKEA store set up for the first time and a hire you to be my database manager and I say hey look you know I have a lot of different

parts and I want you to organize these inventories the way that you think it should be organized you say okay you know Michael I'll go ahead and do that

imagine that not only I told you to do that but I hire 10 other database managers to go in and do the same thing with the same instruction do the best

use what you know to organize these inventories the way that you think should be organized now we'll all ten of you or a little eleven of you all come

out with the exact same way of storing those inventories will you all organize your cabinets and put some of the parts on the left side and then you know on the right side and we'll all be

organizing at the exact same way no you won't right because all of you will have different opinions about how things should be organized

okay that's why again when it comes to the database there are so many different databases out there just because a lot of people have different opinions about how things should be organized okay so

when you hear a lot of different databases out there don't get overwhelmed just think all it's just a way that someone thought the information

should be organized now some some people said okay I'm gonna optimize so that when we have lots and lots of data I'm gonna optimize my database to be

efficient for that so they created some databases optimized for that some people have optimized for different things again so coming back to this knowledge that this is why there are so many

different databases out there because there are a lot of different opinions about how data should be worked in eyes just like how there would be a lot of different opinions of how how the IKEA

store furniture should be should be organized and there are also different objectives or different goals that the database was built some for small

amounts of data large data big data really big data right um so Hadoop is an example of a large data oracle is an

example of a large data tool is in and so forth okay all right so the database they store the parts they give it back to the workers the workers assemble

things together they give it to the web server and the web server gives it back the web server here for example if you

have heard of Apache Tomcat web brick nginx those are all examples of web servers some of the web servers are built to

work with specific workers so for example with Java you will see that some of the web servers are built to work with Java so Tomcat bemoaning the example unicorn web brick or web servers

built for Ruby you know frameworks and some of these can work with multiple work you know languages such as Apache HTTP and so

forth in Jeanette but there are multiple web servers that work with the work with these workers all right now in

this example what does the furniture mean right in the in the web world the

furnitures the assemble furnitures are basically HTML CSS and JavaScript okay

I'll write JavaScript on the top regardless of any web application regardless of what language the workers are speaking regardless of where the

information was stored regardless of what web server types were handling the HTTP requests at the end all of these

web applications produce HTML CSS and JavaScript now I'm kind of simplifying there is another format such as XML and JSON that these web servers would

produce but that's kind of what you see behind you don't see that as much 99% of what you will see will be HTML CSS and JavaScript what are these if you go to the browser

the text that you see the easy answer is the text that you see is the HTML now

certain text appear big red has an image is you know beautiful all of that is CSS anything with the appearance is CSS now

sometimes you know when you click on something or you hover over or there are some interactions it'll pop up all those things this javascript javascript

handles the interaction HTML is the text the CSS is the apparent okay so now let's go back to this example a little

bit more and let's go a little bit more in-depth okay let's look at the let's look at the workers first again I want

to emphasize this a lot that sometimes people put way too much emphasis on the programming language but you shouldn't you really really shouldn't because

after all does it really make a huge difference whether you hire English workers versus Mandarin versus Korea after all all

these languages have similarities and you know if I said hey you should fire all your Korean workers I'm Korean by the way you should fire all your Korean

workers and hire English because they're 20% faster okay come on I'm in Busan you know maybe maybe but even if that is true later when you learn about some of

the other scalability issues you will find that even if they are a lot faster it usually doesn't make that much meaningful difference in the web application okay but overall kind of

simplifying things there is not really that much difference now the difference sometimes comes in the tools that these

workers come with all right so imagine that for example if you're using PHP

people other developers build tools that come with PHP so they build that tools using PHP so using the core filt

building blocks of software that's available in PHP they created these tools and frameworks so and sometimes

they spend years refining that toolboxes okay so imagine if you hire PHP workers they will come with their own sets of toolboxes and if you hire Ruby workers that will come with their own toolset

toolboxes c-sharp they will come with their own tool sets of toolboxes and these toolboxes are unique and people spend years refining these toolboxes so

sometimes you will find a PHP and certain framework and it will have some of these awesome awesome tool boxes that make some of the assembling of furniture

is easier right now that you sleep with a kid I would say back in web 1.0 maybe even in the early days of what would two point oh but now as people as developer

from one language have moved on from that language to another language the best practices for how to build web application have really spread a lot more than it did years ago or five to

ten years ago and this continued to converge so now the differences between the toolboxes of PHP versus Ruby versus Python versus TVR versus Java are not

really that different because again now developers had more time to learn of different toolboxes and they're becoming very similar which is why the best

developers are programming language agnostic because again all of these toolboxes after all could be created

using the core building blocks of software in fact when I was teaching at coding dojo as one of the assignment for people who have been coding for about

five weeks only five weeks one of the assignment is to create a framework from scratch and then they do it in a single day so in fact all these toolboxes for

example for PHP there is Zen framework there is a K PHP there is laravel there is key framework there is coding Neider

and then not only are there bunch of framework and again the one of the way that you can think of frameworks is just collections of tools available for these workers some are called MVC frameworks

because the way that you organize the workers is to say do you know what let's divide our group into three teams one team that handles models which is basically anything that has to do that

with the database you're going to be in the empty okay anyone that puts together the furniture together in HTML CSS and JavaScript you're gonna be in the views

team because that's what the customers will view and then we're gonna have controller team who controls information in between the models in the view it's

called an MVC framework so again just some framework some opinions about how the worker should be should be organized and this MVC framework kind of became the standard for creating web

application but it's just a way of organizing the worker now I can say do you know I don't like the MVC framework I don't think workers should be organized into three groups I think they should be organized into five someone

else may say seven someone else may sit to say just have them all just do everything just different opinions and I can go and create a new framework at the basic foundation probably in a day

or two and then if I spend more time then I can also give it a name and then add another technology on top of what is available for for the world to use all right

rails for example some of the frame ruby is rails Sinatra for python is flask

pylon and then django being one of the most popular framework for python see

char net asp.net net core and so forth in and so forth okay so let's do this actually let's go back to this to see

how all of this kind of works together okay well let me just do one more thing before we look at the list of diagrams that we saw okay let's look at this

bucket there and analyze this more in depth okay remember that I talked that all web applications in the world at the end regardless of what programming language they use which regardless of

what database they use this is what it just produces the furnitures which is HTML CSS and JavaScript right now you would have noticed that web applications

have really become a lot more complex over the years and there's a lot more interactions within the web application which means a lot more JavaScript right

because JavaScript handles interaction so imagine if you got a lot of developers and they're all working on JavaScript you get overwhelming and you kind of need to organize these just like

imagine that you got I give you 1 million photos and you have to organize that I mean or you have to browse through and I say oh look for that file

and you open up that folder and then there are 1 million photos you would be overwhelmed wouldn't you so you want a way to organize some of those codes or

those photos into neat buckets right so imagine JavaScript application is really complex is 1 million lines of code which is analogous to 1 million photos you want a better way to organize that

otherwise a one's gonna get confused so now there are toolboxes or ways of organizing your JavaScript code to make it neater and

this is for example where angular comes in react ember backbone PJs and all of

these libraries are basically just ways of organizing your JavaScript code okay now I have to emphasize some of these principle over and over again

maybe it's the teaching side of me again think back to that example imagine that I gave you 1 million photos and told you to organize it in imagine I got 10 other

people and said you also organized these 1 million photos the way that you think it should be organized are you all gonna organize my 1 million photos the same way probably not some of you may organize it

by the years in the muck some of you may organize by the area that the photo was taken some of you may organize it by the name of the person that appears in the photo which one is

the right way well they all could be the right way right that's why in JavaScript or in PHP Ruby Python any language all

these frameworks are mere opinions of some of the people and again not only is it opinion it's very easy to create a new framework and give it a name

which is why there are so many frameworks ok I'll come back to that analogy but let's come back to the JavaScript so again there are a lot of

different ways you can organize the JavaScript so angular has one philosophy about how your JavaScript should be organized react has another philosophy about how things should be organized

amber backbone view and who knows someone can just go and tomorrow create a new framework and say I don't agree with all

of them or any of them and I'm gonna create my own new framework and add one additional list of technology in an early what seems to be a confusing place

right ok so now let's go back to this one ok so now when you look at this I hope it will

be a little bit a little bit better so for example the PHP if you look at the top left pocket PHP to Cobalt those are

the different programming languages okay some of the languages such as Fortran and COBOL are not used for web application but I just put it there to indicate these are just the different

programming languages you can see HTML CSS and JavaScript though that's the final furniture right there are ways to better organize your CSS which is where

less sass comes in there are ways to write your JavaScript code a little bit more concise which is typescript

CoffeeScript there are okay there's a type own but there are tools available existing CSS libraries you can use that's where bootstrap and foundation

comes in react angular ember backbone view jsr just JavaScript frameworks to organize your JavaScript code a little bit better Jasmine r-spec capybara cucumber

protractor PI tests are tools that come with each specific language for example Jasmine is for nodejs r-spec is for Ruby capybara cucumber can be used with some

other things protractor is usually for JavaScript and also with angular in that PI test is for Python so every single programming language can have sets of

tools where you can test if your code is working okay just additional tool boxes in each of the toolbox with each programming language comes with a new name laravel coding matters NK PHP

symphony e those are frameworks available for PHP pylons Django Kyoto and you can go and list there will be

dozens and dozens more for PHP again someone good can create a new framework in two days or less those are frameworks for Python we all Sinatra are frameworks

for Ruby Express framework for nodejs asp.net MVC core those are frameworks for c-sharp spring struts hibernate play those are

frameworks and tools available for Java okay ajax RESTful API or mtbd someone see these are obviously just tools for

these workers to use and later when we talk about how you have multiple web services or micro services we'll talk about how some of these technologies

would come into play there are the front-end best again HTML CSS and JavaScript that's running because that's what people see outside the store outside the ikea store back-end is what happens inside the

inside the server or inside the ikea store so the programming languages the web servers and the database all of those are passing HTML CSS and JavaScript and tools related to that is

called Frannie ok sequel Lite Postgres my sequel Marga to be Oracle Hadoop MongoDB Cassandra asses Redis they're all different databases

available they're very similar to each other once you know one you can kind of learn the other pretty quickly although there are some differences between what's called a relational database and

non-relational database but we won't really get into that some of these database are stored on hard drives discs some of these are stored in memory so

Redis for example is a memory based so even you don't care if the server you lose the data even if the server has to restart because you're sharing some

real-time information and you don't need to store it permanently then reddish or memcache or good examples because storing things in memory is a lot faster than storing on disk right so those are

some examples of why there are different databases out there Amazon AWS Rackspace or 0 Google Cloud or places that you can

rent these computers and they have different services available darker kubernetes amazon RDS hive ececec s far

de these are once you buy just kind of imagine this once you buy a lot of computers right because imagine that you got a single computer which I

demonstrated in this IKEA store but now a single computer is just not powerful enough to handle all of your website traffic then you want to get multiple

computers and you want to orchestrate how these multiple servers work together to provide a harmonious experience to your customers right so that

orchestration because some what's called kind of a service layer on top - just orchestrate and manage all the different IKEA store so that they all work in

harmony with each other so some of these tools just kind of think of that as services offered by these big giant cloud services where for example all you

know let me manage your database for you so that's Amazon relational database system and and so forth but just know that there are a lot of different services out there to help you manage if

you if you're and you know one store is not enough and you need to have multiple stores to handle your large traffic you lack the Beanstalk those are kind of service is available when you have a lot

of different computers and you need to manage to that and get and github is just a tool that the developers use to organize their code and collaborate with other people so again you know kind of

with this may have seemed a little bit overwhelming but if you go back and think back into the IKEA store analogy and it's a little bit complex with all my writing but I'll also put a link so

that you can read the article that has kind of more neat drawing than what I did on this you will understand ok how all of this fits in it's really not that

hard if you think back to the IKEA store analogy everything will fit in to either

either the receptionist here where we'll handle you will do things with the workers and the tools that they come up with and then it will also do things

with the database and there are technologies over here so again this is the front end and all of these are at the back end so we did cover a lot of

concepts didn't we can't be covered about what an MVC framework is we covered how web applications were we talked about IP address we talked about DNS server we talked about different

programming languages frameworks tools databases web servers and all this but again if you use a good analogy and

relate back to this analogy I hope this will this would have helped you to at least see how everything fits together ok all right so I'll have some other videos you can watch where you can learn

about ok what do I do when my web application has a lot of traffic how do i scale ok so that will be the next

extension of this ok thank you