How The Web Works - The Big Picture

how does the web work now maybe you're now thinking what's this question of course I know how the web works well maybe you do but maybe you're all leaving out some important parts in this video and then the article which you find below the video in the video description also I will have a look at how to web works which different pieces are involved and how that influences what you if you want to become a web developer or if you were simply interested into the topic should learn and should be aware of now as always if you're liking this I'd love to welcome you as a subscriber please share the video and the usual stuff with that let's lose no time and dive right in with that let's start with the basic the most common scenario your wizarding a web page like our web page academy.com so you fire up your browser you enter HTTP www.calculated.com/support the website is stored on some server so the website you are seeing is either generated dynamically there or the code for it was actually stored there already and is returned back because your browser in the end is just an interpreter you could say that gets back certain source code to which I will come back in a second and it can display that on the screen and that source code could ever be stored on the server already or it's generated by the server but one important question at this point of time already is how does the server know that we do mean it the server by entering academy.com is this the address of the server just like your street and house number is your address actually not the official address of each server is an IP IP stands for Internet Protocol address and an IP address looks something like this or in a more modern version like this this is of course not something you would want to enter into your browser but you could do it actually you could enter such a address if you knew it into the browser and visit a website with just said address but of course the domain as this other thing here is called it's much more human readable and therefore the actual thirst thing that happens when you enter this is that your browser contacts a DNS domain name system server which is basically like a huge dictionary where each domain name is mapped to an IP you could say and then they offered this DNS server translates your academy.com domain into an IP address this IP address is then given to the browser and with that the browser can actually make that request to the server which has the IP address the there Azzam as I mentioned we have where we generate the source code for the website and then this is sent back to the browser where this website is now displayed that is how this works in a nutshell now the part where you enter the URL so academy.com and you send this off to the internet that is called a request the browser makes a request for this page and a request is like a package of theta where this URL is one part but another part would be the type of request because it turns out there are different types which you for example use for getting a website or for storing some data in the web so if you submit a forum you send a different type of request for example a request could then also include that data you want to send or it includes no data if you're only requesting something or only want to get something it can also contain some metadata so called headers you can always have a look at a request if you go into a browser open the developer tools in there which every browser has and then in the network tab you inspect the request that is being sent and there you will see all the the metadata is on that was attached to the requests always interesting to see that now what you're getting back is a response that is all the data package in the end and you can also inspect that and this all again contains some metadata maybe and most importantly for a traditional website the HTML code that should be rendered HTML code is something we haven't heard before but that's essentially that source code that is displayed or that is turned into what you see on the screen why the browser and that takes us to the involved technologies already what you see in the browser is the result of a combination of HTML CSS and JavaScript these are the free languages or technologies involved in getting onto the screen what you see now HTML stands for hypertext markup language and that gives a website its structure it doesn't say anything about the styling it just says what should be a heading what should be a paragraph what should be an input what should be a button that is what you say with EML and the browser is able to read that because it's a standardized format now of course the website should also look good and that is done with CSS which stands for cascading style sheets CSS is responsible for turning a text read giving a Batna certain look and you as a developer can write that CSS code just as you write the HTML code to get the result you want by the way I also mentioned that a server might generate that dynamically with that I meant that it might generate the HTML code dynamically and that with that it actually gives you a different code back for different requests that is something an online shop needs for example where you might want to display the card content this is part of the response and that is only possible if that response that HTML code is generated dynamically on the server now we're not diving into how this works here but you as a developer if you were building that website you simply define rules and on how the code should be generated how it should look like and when which code should be generated this is all we need to know right now the third language that is involved is JavaScript and JavaScript is responsible for all the logic all the dynamics things that happen in the browser if you have a drop-down if you have tabs if you have like that overlay that opens sometimes or a sliding in navigation that all is powered by JavaScript it's basically responsible for everything that changes in the browser after the page has been loaded now all that data transfer as I said is also standardized it is for example standardized how a request and response should look like that is all defined by the technology used which is HTTP which stands for hypertext Transfer Protocol there are also HTTPS which is the same just in an encrypted form and all modern web sites including academy.com use HTTP actually so that all data is encrypted hence the request that you're sending and the response you're sending is end-to-end encrypted so the browser and the server know how to decrypt it but in between it's encrypted and if someone were to sniff your connection which is technically Paul then these people will only see some unreadable content so they can't read which data you were sending or which data you are getting back this is what HTTPS is it's a standard that defines how a request should look like and in the case of HTTPS that it has to be encrypted and the encryption is then done by the browser and by the server so these are the core technologies involved there also are more technologies because for example if on the server side we're generating this page dynamically then this of course means that on the server side there needs to be some code that runs and that is done with languages like nodejs PHP Python and there also are frameworks that could be used there frameworks are basically packages of utility functions that also give you some rules on how to use them that make writing code simply easier because you don't have to reinvent the wheel for all the nitty-gritty details you can focus on your business logic and things like parsing incoming requests and so on is done by such a framework so that you don't have to manually go through all the lines of an incoming request you instead just get the finished parse data and you didn't write the logic but do with that data instead of writing the parsing logic which would always be the same such frameworks by the way all exist for the front end where you might have applications where a lot of stuff is happening with the help of JavaScript to provide a nicer user experience where you don't always need to fetch new pages for every click the user does but where you want to show an overlay where you want to change content on the page while the user is on the page and that is then also made easier with such frameworks for the same reason as on the server that you don't have to write the logic on how the change happens on the page but instead you just write a logic for what should change when and the framework takes over and dusty heavy-lifting so frameworks all's an important part of web development but of course a part that is typically hidden away from you if you're just visiting pages just as the other technologies I guess now that is how the web works in a nutshell but the web is more than just traditional websites it's more than just HTML code getting sent back and displayed on the page with that I mean that for example if you're having a mobile app twitter facebook Instagram doesn't matter you also of course have content that's not stored on your device but somewhere in the Internet let's say pictures posted Barbara users there you don't actually get back HTML pages that contain these pictures but instead only data is exchanged and it is important to understand that with the web we don't just mean websites but we basically mean any interaction where you have some computer called a server which sits somewhere out there in the internet not in your room and you are communicating with that server not actively but in actively so indirectly your your app communicates with that your website a website might send the request get back a response with HTML now that request response pattern is always the same but actually a mobile app for example sends a request but doesn't want HTML as a response and it clearly says that in the request instead it wants something which typically is called JSON data that's a specific data format and we don't need to dive into the details there right now but there the server responds with a data package which is not parsable by the browser so it's not something that would be converted into a visual website by a browser but by the app the app which people wrote like Instagram the source code behind the app knows how to parse that incoming response and how to handle that if that for example are five new posts by people you're following well then that is converted into something you can see on the screen with the hub of the source code written by the developers of the app so that is also where we have the internet same request response pattern but the data which is exchanged is different it's not a HTML page it's a ver form of data so the data format is flexible the core idea that we have code running on a server and code running on our device no matter if it's a mobile phone or if it's a browser that core idea is always the same now there also are more advanced technologies for example for real-time communication where you don't have request response but where the server can actively push a new message to the client so the client never sent a request but gets new data anyways through an established connection with the technology named WebSockets but that's even more advanced it exists though I hope that nonetheless with this you might have learned something which you already knew well doesn't hurt them I hope I didn't steal too much of your time but you also might have learned something which you only Whaley knew before which now is a bit clearer hopefully hopefully see you in other videos too bye

Channel: Academind

Views: 209,109

Keywords: web, web development, how does the web work, internet, how does the internet work, request, response, server, client, html

Id: hJHvdBlSxug

Length: 12min 25sec (745 seconds)

Published: Mon Apr 15 2019