Coding

How The Web Works – The Big Picture

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