1 00:00:00,360 --> 00:00:01,320 Welcome back. 2 00:00:01,680 --> 00:00:05,790 So this video represents a pretty big milestone in this class. 3 00:00:05,790 --> 00:00:11,580 We're moving from purely front end technologies to our first taste of back and web development. 4 00:00:11,580 --> 00:00:13,940 So we're going to continue using everything that we've learned. 5 00:00:13,950 --> 00:00:19,230 It's G-mail CSSA javascript but we're going to learn some new technologies that help us make full web 6 00:00:19,230 --> 00:00:20,880 applications. 7 00:00:20,880 --> 00:00:25,300 Of course before we start writing some code we have a few other things we need to take care of. 8 00:00:25,410 --> 00:00:27,840 We'll start by reviewing how the Internet works. 9 00:00:27,840 --> 00:00:32,310 Then we're going to talk about static vs. dynamic sites and where front end fits and where back and 10 00:00:32,310 --> 00:00:37,650 fits in and mostly We'll talk more in depth about the specific back and technologies that we're going 11 00:00:37,650 --> 00:00:38,580 to work with. 12 00:00:39,030 --> 00:00:43,660 OK so let's start with the 60 second version of how the Internet works. 13 00:00:43,980 --> 00:00:49,890 When we go to a Euro here to me dot com slash courses there's a few things that happen behind the scenes 14 00:00:49,890 --> 00:00:50,790 . 15 00:00:50,790 --> 00:00:56,130 The first thing is that our computer needs to figure out what IP address to send a request to. 16 00:00:56,490 --> 00:01:03,180 So it takes us you R-OH you to read out come in it gets the correct IP address which is the unique locator 17 00:01:03,180 --> 00:01:04,840 for you and me server. 18 00:01:05,130 --> 00:01:10,050 Then once we have that IP address and New Age TTP request is sent. 19 00:01:10,290 --> 00:01:14,910 So a request is sent to that IP address and it's not just a blank request. 20 00:01:14,910 --> 00:01:16,800 It has a bunch of information. 21 00:01:16,800 --> 00:01:20,830 We'll talk more about the specific details that are in that request in the next video. 22 00:01:21,090 --> 00:01:26,220 But the short version is that it has things like your own IP Address the time that you're sending it 23 00:01:26,220 --> 00:01:27,910 at that type of request. 24 00:01:27,990 --> 00:01:31,920 And most importantly the specific page that you're asking for. 25 00:01:31,950 --> 00:01:34,710 So in this case we're asking for the course's page. 26 00:01:34,830 --> 00:01:42,510 So that is encoded in the request that is sent next to me gets that request and it figures out what 27 00:01:42,510 --> 00:01:43,010 to do. 28 00:01:43,140 --> 00:01:44,810 And then it responds with something. 29 00:01:45,030 --> 00:01:51,250 So if we're asking for Slash courses the Tomy server will figure out what needs to go on the course 30 00:01:51,300 --> 00:01:52,230 page. 31 00:01:52,230 --> 00:01:58,380 So I would assume that it goes into a database and grabs a bunch of courses and images compiles them 32 00:01:58,380 --> 00:02:05,310 into this one long HTL file with some success and some javascript and then it's finally sent back to 33 00:02:05,310 --> 00:02:13,580 me to my computer has HTP response and then it gets to a browser whose job is to render the page. 34 00:02:13,860 --> 00:02:18,870 So this is what the actual content looks like before our browser takes care of it and renders it for 35 00:02:18,870 --> 00:02:19,880 us as humans. 36 00:02:20,010 --> 00:02:24,880 This is what the computer sees just HMO success in javascript. 37 00:02:25,050 --> 00:02:31,320 To summarize all of that when I go to a URL and I hit enter first thing that happens is we need to find 38 00:02:31,320 --> 00:02:39,330 the IP address for that domain and then we send an HTP request asking for a particular page to that 39 00:02:39,330 --> 00:02:42,600 IP address and then the server receives that request. 40 00:02:42,750 --> 00:02:45,310 It figures out what to do what to respond with. 41 00:02:45,570 --> 00:02:51,300 And then it responds back with H.M. SS in javascript. 42 00:02:51,300 --> 00:02:56,510 The next thing I want to discuss is the difference between static and dynamic web pages. 43 00:02:56,610 --> 00:03:00,960 We talked about this also in one of the early videos about how the Internet works. 44 00:03:00,960 --> 00:03:05,100 I want to do a quick recap because it's important to the back end discussion that we're about to have 45 00:03:05,110 --> 00:03:05,730 . 46 00:03:06,330 --> 00:03:13,560 So there are two different types of Web sites static pages and dynamic pages dynamic web pages are sites 47 00:03:13,710 --> 00:03:19,860 that are compiled on the server side where the server is pulling together or constructing a web page 48 00:03:19,890 --> 00:03:22,530 before it's sent back as a response. 49 00:03:22,530 --> 00:03:25,610 Everything we've written so far has been static. 50 00:03:25,650 --> 00:03:31,330 So even something like this that it doesn't seem like it's static because there's dynamic content. 51 00:03:31,350 --> 00:03:35,000 We get random colors every time and it's a game. 52 00:03:35,010 --> 00:03:42,030 It doesn't seem as static as the restaurant Web page example that I used on the earlier video on this 53 00:03:42,030 --> 00:03:48,030 topic but it still is static because it's the same HMO C Ss in javascript. 54 00:03:48,060 --> 00:03:49,160 Every single time. 55 00:03:49,440 --> 00:03:54,630 Yes it looks different because we have some random colors but it's the same fundamental pieces every 56 00:03:54,630 --> 00:03:58,530 time that we're opening in the browser on a dynamic web site. 57 00:03:58,560 --> 00:04:03,900 We could have different javascript or different C Ss different each team that's being sent back every 58 00:04:03,900 --> 00:04:04,620 time. 59 00:04:04,980 --> 00:04:11,100 So when we go to something like Reddit for instance and I refresh the page I can get different content 60 00:04:11,100 --> 00:04:11,580 here. 61 00:04:11,820 --> 00:04:17,790 And in fact I do every single time you're fresh the page you get new content and so there's a database 62 00:04:17,790 --> 00:04:19,330 that's compiling things. 63 00:04:19,380 --> 00:04:24,960 There's some codes checking if you're logged in and if you are logged in then it won't show you a form 64 00:04:24,960 --> 00:04:28,020 over here but it will show you a log out button. 65 00:04:28,320 --> 00:04:34,360 And if you're not logged in it shows you a form and it shows you log in or sign up buttons. 66 00:04:35,370 --> 00:04:42,210 So this web page is not the exact same H G M L C Ss in javascript that sent back to me every time the 67 00:04:42,210 --> 00:04:44,430 server is actually deciding what to send back. 68 00:04:44,430 --> 00:04:51,990 In constructing a web page before it sends it to me versus this site it's the same exact content every 69 00:04:51,990 --> 00:04:53,540 single time. 70 00:04:56,320 --> 00:04:59,260 OK so let's focus a little bit more on the back end now. 71 00:04:59,350 --> 00:05:06,940 So this diagram is of a generic stack and stack is a term that's used to refer to all of the technologies 72 00:05:07,210 --> 00:05:09,800 that a particular web application uses. 73 00:05:09,820 --> 00:05:16,840 So H.T. Melchior says in javascript are always are almost always part of a stack nowadays on big fancy 74 00:05:16,840 --> 00:05:17,770 web apps. 75 00:05:17,770 --> 00:05:21,310 Technically we could have a Web site that doesn't have any success. 76 00:05:21,340 --> 00:05:22,690 It would just be hideous. 77 00:05:22,780 --> 00:05:27,430 We could have a Web site that doesn't have any client side javascript as well and it just wouldn't be 78 00:05:27,430 --> 00:05:28,420 very interactive. 79 00:05:28,540 --> 00:05:34,150 But we can still make a perfectly good Web site like we did with the original photography portfolio 80 00:05:34,150 --> 00:05:41,110 site just each team Eliseus us but most web apps as I mentioned all have HDMI elsea says and Javascript 81 00:05:41,350 --> 00:05:46,050 that's being sent back on the backend is where we see a lot more variants. 82 00:05:46,270 --> 00:05:51,910 So there are different languages that we can write server side code and we can write or back and using 83 00:05:51,910 --> 00:05:57,720 Ruby or Python or Skala or Java or javascript or THP. 84 00:05:57,820 --> 00:05:59,500 There are so many choices there. 85 00:05:59,530 --> 00:06:01,930 There are all sorts of different databases out there. 86 00:06:01,930 --> 00:06:07,760 Post post-crisis and sequel it in my as well and Mongo and there's so many choices. 87 00:06:07,810 --> 00:06:14,590 So the term stack refers to what particular choices the developers made and what exact technologies 88 00:06:14,590 --> 00:06:16,110 that they use. 89 00:06:16,180 --> 00:06:19,200 It's a very common question for developers to ask one another. 90 00:06:19,450 --> 00:06:25,010 What's your stack at that company or what stack are you using on this specific project. 91 00:06:25,030 --> 00:06:28,290 So here's a real life example of Reddit stack. 92 00:06:28,510 --> 00:06:32,830 So these are some of the technologies that Reddit uses on its website. 93 00:06:33,160 --> 00:06:37,010 So the site is written in Python using a framework called flask. 94 00:06:37,410 --> 00:06:42,610 It's built on an engine X server and it uses postscripts as its database. 95 00:06:42,610 --> 00:06:48,250 There's actually a Web site devoted to sharing different companies stacks called Stack share. 96 00:06:48,460 --> 00:06:54,760 So I have it open here and this is the Reddit page on texture and we can see all the different technologies 97 00:06:54,760 --> 00:06:55,470 they use. 98 00:06:55,660 --> 00:06:59,270 And genetics Python post gresse Amazon S3. 99 00:06:59,410 --> 00:07:02,590 And it tells you below a little bit about what they're used for. 100 00:07:02,590 --> 00:07:04,980 Don't be overwhelmed by how many icons there are. 101 00:07:05,110 --> 00:07:09,530 How many names and all these different categories and all these different terms. 102 00:07:09,790 --> 00:07:11,100 That's not the focus here. 103 00:07:11,340 --> 00:07:15,910 All I want to show you is that different Web sites use different technologies. 104 00:07:15,910 --> 00:07:20,190 So let's click on stacks and we can take a look at some other company stacks. 105 00:07:20,290 --> 00:07:31,570 For instance air B and B can see that FBN B uses rails and Ruby that use my Esky well lot to javascript 106 00:07:32,230 --> 00:07:33,130 Java. 107 00:07:33,520 --> 00:07:35,720 They use a whole bunch of different technologies. 108 00:07:35,770 --> 00:07:38,500 So let's go back to our slides here. 109 00:07:38,500 --> 00:07:44,110 Another thing I want to bring up is that this blue line right here denotes the boundary between back 110 00:07:44,110 --> 00:07:45,650 end and front end. 111 00:07:46,000 --> 00:07:51,490 So we discussed how a dynamic site is constructed by a server on the backend. 112 00:07:51,490 --> 00:07:57,050 So this right here this part of the diagram is where the dynamic part of the site comes in. 113 00:07:57,250 --> 00:08:02,810 So this is all the logic written in Python in red it's case that figures out if a user is logged in 114 00:08:03,280 --> 00:08:10,120 if we need to show a form what add to add into the page what images to put in if we need to have a sign 115 00:08:10,120 --> 00:08:13,130 up and lock in button or a sign out button. 116 00:08:13,240 --> 00:08:20,290 All of that is done in the back and in this part of the diagram and then it sends back h tim L C S S 117 00:08:20,410 --> 00:08:23,600 and Javascript. 118 00:08:23,680 --> 00:08:26,170 So here's the stack that we're going to be learning. 119 00:08:26,380 --> 00:08:27,800 We're going to use node j. 120 00:08:27,870 --> 00:08:28,440 Yes. 121 00:08:28,450 --> 00:08:33,120 So we'll still be writing javascript but we're going to be writing it on the backend. 122 00:08:33,280 --> 00:08:39,610 We're going to use a framework called Express and we're also going to use Mangu DBI as our database 123 00:08:39,610 --> 00:08:40,090 . 124 00:08:40,370 --> 00:08:45,610 And then of course we'll also have h t m l c s s and Javascript just like we've been using in the last 125 00:08:45,610 --> 00:08:46,490 few units. 126 00:08:46,720 --> 00:08:52,510 So right now at this point in the course you can consider yourself a front end developer or a front 127 00:08:52,510 --> 00:08:57,490 end developer in training where we've covered everything you need to know to start making the front 128 00:08:57,490 --> 00:08:58,950 end of web sites. 129 00:08:58,960 --> 00:09:03,160 Now we're going to start talking about back in web development and once we bring those two together 130 00:09:03,160 --> 00:09:09,790 towards the end of the course wherever writing server side code with Express A.J. as Mongo D-B we have 131 00:09:09,790 --> 00:09:14,510 user log in but we're also writing client side or front end javascript. 132 00:09:14,510 --> 00:09:16,170 H Tim L and C Ss. 133 00:09:16,390 --> 00:09:19,090 That's what we would call full stack web development. 134 00:09:19,270 --> 00:09:25,450 The term full stack web development refers to writing code on all parts of the stack the back end and 135 00:09:25,450 --> 00:09:26,380 the front end. 136 00:09:26,710 --> 00:09:30,990 Here's a diagram of some of the functionality that we can implement on the basket. 137 00:09:31,210 --> 00:09:37,240 And this is using Reddit as an example again you can see we have features like check if the user is 138 00:09:37,240 --> 00:09:44,140 logged in sign up a user add a new post to the database create a new comment remove a post from the 139 00:09:44,140 --> 00:09:50,290 database sort and rank the posts create a new sub Reddit add a subscriber to the newsletter and save 140 00:09:50,290 --> 00:09:51,420 that in the database. 141 00:09:51,760 --> 00:09:57,640 And the most important one of course is figure out what each team will see assess in javascript to send 142 00:09:57,640 --> 00:10:00,270 back to the user which is then sent back. 143 00:10:00,460 --> 00:10:06,880 Crossing this blue line where we're now going to the front end that H.M.S. assassins and Javascript 144 00:10:06,910 --> 00:10:10,730 is sent back to me and then I see this in my browser. 145 00:10:11,020 --> 00:10:16,360 I have one more diagram here that also talks about front end versus back end but it's formatted slightly 146 00:10:16,360 --> 00:10:17,260 differently. 147 00:10:17,560 --> 00:10:23,770 This diagram the sequence of events between front end and back and over the course of a few page loads 148 00:10:23,780 --> 00:10:24,070 . 149 00:10:24,370 --> 00:10:29,410 So on the front end if I go to read it dot com and refresh. 150 00:10:29,680 --> 00:10:34,790 I'm sending a request for the Reddit homepage and then that goes to read it. 151 00:10:34,960 --> 00:10:39,340 That request makes it to their server and the server sees that I'm asking for the home page. 152 00:10:39,370 --> 00:10:45,650 So there's some server side logic that grabs the top post from the database and makes all the time LNC 153 00:10:45,730 --> 00:10:52,040 SS and javascript that I see here and then sends that back to me which I then view in my browser. 154 00:10:52,780 --> 00:11:00,400 The next step is that I could type something into a search box like dogs which I'll do right now type 155 00:11:00,460 --> 00:11:02,370 dogs here and hit enter. 156 00:11:02,710 --> 00:11:09,340 And when I hit enter a new request is sent back to Reddit server this time saying that I'm searching 157 00:11:09,340 --> 00:11:10,320 for dogs. 158 00:11:10,570 --> 00:11:16,630 So the server has some logic that takes my search term dogs and it finds all the posts that match that 159 00:11:16,630 --> 00:11:23,080 term in the database and then it makes me some new age male assess in javascript for the dog's results 160 00:11:23,080 --> 00:11:25,930 page and then it sends that back to me. 161 00:11:26,620 --> 00:11:32,700 And then my browser renders it and I see this that's a very very simplified version obviously. 162 00:11:32,810 --> 00:11:37,300 There's a lot more happening behind the scenes and Reddit will actually be creating our own version 163 00:11:37,330 --> 00:11:39,660 of an application very similar to read it. 164 00:11:39,820 --> 00:11:46,540 Once we learn more about Express and know J.S. and Mongo DB And we'll be making a full stack application 165 00:11:46,550 --> 00:11:46,630 .