WEBVTT 0 00:00.220 --> 00:00.580 All right. 1 00:00.630 --> 00:06.810 So now that we've looked at a lot of the technologies that are used in front end web development, and we've 2 00:06.810 --> 00:14.640 designed and developed web sites using HTML, CSS, Javascript, Bootstrap, jQuery, in order to become a 3 00:14.640 --> 00:18.880 full stack web developer, we now have to learn about the back end. 4 00:19.260 --> 00:21.560 Now what exactly is a full stack developer? 5 00:21.570 --> 00:27.890 Because this is a term that's brandished about a lot and especially in the context of development jobs. 6 00:28.080 --> 00:35.790 So, according to Linked In, these are the hottest jobs for 2018, and squarely on that list is a full stack 7 00:35.790 --> 00:36.710 developer. 8 00:36.900 --> 00:39.820 So what exactly is a full stack developer? 9 00:40.170 --> 00:45.920 Well, a full stack basically is just front end development plus back end development. 10 00:45.960 --> 00:51.690 And once you're familiar with both, then it's this flexibility of working with the front and back end 11 00:52.110 --> 00:55.510 that makes you so much more desirable as a developer. 12 00:55.560 --> 01:01.830 Up till now we've only been interacting with front end technologies. We’ve learnt about HTML, CSS 13 01:01.950 --> 01:08.610 and Javascript, as well as jQuery and Bootstrap, which all enable us to design our web site and also 14 01:08.640 --> 01:13.040 allow for user interaction on the client side, in the browser for example. 15 01:13.230 --> 01:18.930 But now we're going to look at the back end. We’re going to learn about Node.js and other technologies 16 01:19.230 --> 01:25.940 that enable us to interact with databases or have business logic on a server and a whole lot more. 17 01:26.400 --> 01:33.090 Now what exactly is the back end anyways? For some of you out there who are a bit more immature like myself, 18 01:33.090 --> 01:35.730 don’t worry, it's not something that's rude. 19 01:35.730 --> 01:42.270 Instead it consists of things such as a server which will serve up your files your HTML, your 20 01:42.270 --> 01:49.440 CSS and your Javascript, a database which can store your user data such as their log ins and passwords, 21 01:50.130 --> 01:51.830 as well as your applications. 22 01:51.870 --> 01:54.310 So this is where you create your business logic, 23 01:54.330 --> 01:57.290 you determine how your web applications work, 24 01:57.300 --> 02:03.830 for example things such as calculating flight prices, or making payments, that sort of stuff. 25 02:03.870 --> 02:07.710 So let's look at a real life example. Let’s take a look at the Eventbrite 26 02:07.710 --> 02:09.900 web application. 27 02:10.150 --> 02:14.770 And it's a web application because it doesn't just display information, 28 02:14.790 --> 02:22.200 it also has functionality on the back end that enables it to do something concrete, such as find events 29 02:22.260 --> 02:24.290 or allow you to book events. 30 02:24.480 --> 02:29.760 So let's say we've gone to Eventbrite and we look at all the events that are happening today, and I 31 02:29.760 --> 02:32.910 find something that is the Hogarth beer and music festival. 32 02:32.940 --> 02:35.010 Well, that sounds right up my alley. 33 02:35.010 --> 02:39.290 So let's go ahead and register and book a ticket. 34 02:39.300 --> 02:42.520 So here I enter my name and I buy a ticket. 35 02:43.140 --> 02:49.770 Well now, that information that consists of my name, how many tickets I bought, and my registration details 36 02:49.770 --> 02:54.270 such as my e-mail, gets saved on the web site's databases. 37 02:54.540 --> 03:00.510 And for simplicity's sake you can just imagine these databases as these giant Excel spreadsheets living 38 03:00.510 --> 03:06.880 somewhere. And all of my data that I enter gets saved onto these spreadsheets. 39 03:06.930 --> 03:13.190 And that means that when I come back at a later date, I'm able to log back on to Eventbrite, and it 40 03:13.190 --> 03:15.990 will be able to retrieve from its database 41 03:15.990 --> 03:18.910 all of the data that is associated with my account. 42 03:19.140 --> 03:25.710 So, for example, it could retrieve my ticket to the Hogarth beer and music festival. Now a really great 43 03:25.710 --> 03:30.660 analogy for a full stack web application, it's kind of like a restaurant. 44 03:30.660 --> 03:32.060 So there is a front of house. 45 03:32.070 --> 03:36.450 This is the main restaurant where your clients will sit down and have dinner. 46 03:36.750 --> 03:41.280 But then there's also the kitchen, right, which is where the cooking is mostly happening. 47 03:41.400 --> 03:46.530 And finally there's also the larder, which is where you store all of your ingredients and everything 48 03:46.530 --> 03:49.050 you need to make the food. 49 03:49.260 --> 03:54.320 In this analogy our front of house restaurant is basically the client side. 50 03:54.330 --> 03:56.750 This is what the user sees in the browser. 51 03:57.000 --> 04:02.310 They're able to interact with the web site using Javascript and they're able to see the information 52 04:02.310 --> 04:05.620 that's being displayed using HTML and CSS. 53 04:05.790 --> 04:13.320 Now, a little bit further back on the back end, we've got the kitchen, and this is analogous to our server. 54 04:13.350 --> 04:18.150 This is basically the place where all of our dishes get served from. 55 04:18.150 --> 04:25.110 So, when a restaurant goer ask for a Philly steak, then that order gets sent to the server, and the server 56 04:25.140 --> 04:29.910 should send back what it is that the client wanted, which is the actual steak. 57 04:30.240 --> 04:34.820 And finally the larder where all the ingredients are stored is of course the database. 58 04:34.830 --> 04:39.410 This is where all of our user data, our event data, our ticket data, 59 04:39.540 --> 04:43.440 all of the data that makes our web site work is stored. 60 04:43.470 --> 04:48.720 So this is where the divide between the front end and the back end happens. It’s between the front of 61 04:48.720 --> 04:52.320 the house and the restaurant, and the kitchens and larder. 62 04:52.380 --> 04:57.360 Now, just as with restaurants, you don't actually have to create everything in the kitchens, 63 04:57.390 --> 04:57.910 right? 64 04:57.930 --> 05:03.450 You could have a restaurant where you make all of the dishes in front of the client, and you just do 65 05:03.450 --> 05:08.850 it on their table. You bring all of the ingredients there and you make it right there for them. 66 05:08.850 --> 05:15.540 Now the downsides in this case is that, firstly, your secret recipe that's been passed down over generations 67 05:15.600 --> 05:18.790 from your great grandma to your grandma to your mother to your self, 68 05:18.930 --> 05:21.580 well that's kind of exposed, right? 69 05:21.600 --> 05:24.430 Anybody would be able to see what it is that you're doing, 70 05:24.540 --> 05:26.140 and they would be able to replicate it. 71 05:26.310 --> 05:29.350 And this is the same for the business logic of your web site. 72 05:29.520 --> 05:35.910 If you had something that you wanted to keep secret such as your API keys or how you implement your 73 05:35.910 --> 05:41.590 particular application, then you don't want that to be visible every time somebody loads up a web site, right? 74 05:41.670 --> 05:48.660 And the other problem is that it can be really really time consuming to make the dish in front 75 05:48.720 --> 05:53.280 of the client in the restaurant, because you would have to bring all of the ingredients, 76 05:53.300 --> 06:00.660 you would have to make it one by one in small batches, and in web sites that translates to a long loading 77 06:00.660 --> 06:01.380 time. 78 06:01.380 --> 06:08.250 So if you are transporting a lot of code over to the browser where it has to be executed on the browser, 79 06:08.450 --> 06:12.520 that usually takes a lot longer than if it was done on the back end. 80 06:12.570 --> 06:19.140 So the alternative is we take our ingredients from our database, so our server interacts with the database, 81 06:19.560 --> 06:25.040 then we execute some code on our server and we create the application or the dish, 82 06:25.050 --> 06:28.820 in this case, which then gets served to the client side. 83 06:28.860 --> 06:31.950 So that means we don't have to transport any of the ingredients, 84 06:31.950 --> 06:37.740 we don't have to transport a lot of code, which will vastly speed up your web site, and also keep your 85 06:37.740 --> 06:40.390 business logic hidden. On the back 86 06:40.390 --> 06:46.980 end there's a lot of technologies that are commonly used for this purpose, and these include PHP, Ruby, 87 06:46.980 --> 06:51.040 Java, Node.js, amongst many many others. 88 06:51.110 --> 06:57.840 Now, in addition, there are frameworks, such as CakePHP or Ruby on Rails or Spring, Express, and these are 89 06:57.840 --> 07:03.060 things that will speed up development using the particular back end technology you chose. 90 07:03.060 --> 07:08.610 So a common one you would have heard is maybe Ruby and Ruby on Rails, and the main job of these frameworks 91 07:08.700 --> 07:13.450 is to simply reduce the amount of repetitive stuff that a developer has to do, 92 07:13.680 --> 07:18.930 and just like how you don't want to write the email boilerplate code out every single time you create 93 07:18.960 --> 07:20.380 an additional page, 94 07:20.380 --> 07:26.280 then in the same way a lot of these frameworks such as Ruby on Rails or Express, they make a developer's 95 07:26.280 --> 07:32.430 life much much easier by cutting down some of the grunt work and saving you a lot of time. In the coming 96 07:32.430 --> 07:36.490 lessons we’re going to be delving deep into a lot of this kind of stuff, 97 07:36.600 --> 07:41.220 and we're going to be learning about Node.js as well as the most common framework that's used with it, 98 07:41.250 --> 07:46.930 which is Express. And the best part of all is that we don't have to learn a brand new programming language 99 07:46.930 --> 07:50.540 to do it, because Node.js runs on Javascript. 100 07:50.760 --> 07:56.310 And this is why Node.js is one of the most popular back end languages currently, because it runs on 101 07:56.310 --> 07:57.500 Javascript. 102 07:57.930 --> 08:02.100 So for all of that and more on Node.js, I'll see you on the next lesson.