1 00:00:01,160 --> 00:00:02,570 ‫In the previous lecture, 2 00:00:02,570 --> 00:00:05,280 ‫while talking about the front-end and the back-end, 3 00:00:05,280 --> 00:00:08,710 ‫I mentioned simple and static and dynamic websites, 4 00:00:08,710 --> 00:00:11,370 ‫or applications, a couple of times 5 00:00:11,370 --> 00:00:14,600 ‫but without really defining what they are. 6 00:00:14,600 --> 00:00:17,870 ‫So, in this video, I wanted to clarify these things 7 00:00:17,870 --> 00:00:20,620 ‫and also talk about APIs in order to bring 8 00:00:20,620 --> 00:00:23,620 ‫all these concepts into the bigger picture 9 00:00:23,620 --> 00:00:26,013 ‫of back-end web development in general. 10 00:00:27,460 --> 00:00:30,120 ‫So, let's start by talking about static 11 00:00:30,120 --> 00:00:32,410 ‫versus dynamic websites. 12 00:00:32,410 --> 00:00:34,920 ‫So, a static website, or a simple website 13 00:00:34,920 --> 00:00:36,630 ‫as I called it in the last video, 14 00:00:36,630 --> 00:00:39,070 ‫is when a developer uploads the final 15 00:00:39,070 --> 00:00:43,640 ‫ready to be served files of a website onto the web server. 16 00:00:43,640 --> 00:00:46,580 ‫These files usually contain HTML, CSS, 17 00:00:46,580 --> 00:00:50,320 ‫JavaScript, images, and more, and as I said, 18 00:00:50,320 --> 00:00:53,970 ‫these are the exact files that the server will later send 19 00:00:53,970 --> 00:00:57,090 ‫to the browser when the website is requested. 20 00:00:57,090 --> 00:00:59,040 ‫The browser will then take these files 21 00:00:59,040 --> 00:01:01,320 ‫and render them as they are. 22 00:01:01,320 --> 00:01:04,320 ‫This means that there is no work done on the server, 23 00:01:04,320 --> 00:01:07,510 ‫there is no back-end code, and there's also no application 24 00:01:07,510 --> 00:01:08,730 ‫whatsoever running. 25 00:01:08,730 --> 00:01:09,563 ‫Okay? 26 00:01:09,563 --> 00:01:12,900 ‫So, it's just a static web server serving static files, 27 00:01:12,900 --> 00:01:15,670 ‫exactly like I mentioned in the last video. 28 00:01:15,670 --> 00:01:17,460 ‫Now, you might think, wait, 29 00:01:17,460 --> 00:01:19,233 ‫when there is JavaScript on the page, 30 00:01:19,233 --> 00:01:21,290 ‫then there are usually dynamic effects, 31 00:01:21,290 --> 00:01:23,610 ‫like animations and stuff, right? 32 00:01:23,610 --> 00:01:26,480 ‫Well, that dynamic that you mean there 33 00:01:26,480 --> 00:01:28,050 ‫is a different dynamic. 34 00:01:28,050 --> 00:01:31,580 ‫It's just in the context of front-end development. 35 00:01:31,580 --> 00:01:34,370 ‫In the browser context, dynamic has nothing to do 36 00:01:34,370 --> 00:01:37,200 ‫with effects on a page or things moving around 37 00:01:37,200 --> 00:01:40,570 ‫but with the way websites are generated on servers. 38 00:01:40,570 --> 00:01:41,870 ‫Okay? 39 00:01:41,870 --> 00:01:45,210 ‫So, dynamic websites are different from static websites 40 00:01:45,210 --> 00:01:47,440 ‫because they are usually built on the server 41 00:01:47,440 --> 00:01:50,090 ‫each time a new request comes in. 42 00:01:50,090 --> 00:01:51,740 ‫So, like we saw in the last video, 43 00:01:51,740 --> 00:01:55,040 ‫dynamic websites usually contain a database, 44 00:01:55,040 --> 00:01:57,410 ‫then there's also an application running, 45 00:01:57,410 --> 00:02:01,400 ‫like a Node.js app, which fetches data from the database, 46 00:02:01,400 --> 00:02:04,340 ‫and then, together with a predefined template, 47 00:02:04,340 --> 00:02:07,730 ‫builds each page that the user requests dynamically 48 00:02:07,730 --> 00:02:10,670 ‫based on data coming from the database. 49 00:02:10,670 --> 00:02:13,360 ‫So, each time a browser requests a page, 50 00:02:13,360 --> 00:02:18,360 ‫that page is then built as HTML, CSS, and JavaScript files, 51 00:02:18,560 --> 00:02:21,640 ‫which will then be sent back to the browser. 52 00:02:21,640 --> 00:02:23,790 ‫This whole process is sometimes called 53 00:02:23,790 --> 00:02:25,860 ‫server-side rendering. 54 00:02:25,860 --> 00:02:28,540 ‫So, again, that's why it's called dynamic, 55 00:02:28,540 --> 00:02:31,560 ‫because the website can change all the time according 56 00:02:31,560 --> 00:02:33,700 ‫to the content that's in the database 57 00:02:33,700 --> 00:02:36,520 ‫or user's actions on the site. 58 00:02:36,520 --> 00:02:38,870 ‫For example, if you logged into Twitter, 59 00:02:38,870 --> 00:02:41,140 ‫it will show you a completely different page 60 00:02:41,140 --> 00:02:43,510 ‫than when you logged out, right? 61 00:02:43,510 --> 00:02:45,920 ‫And it will also show you a different page tomorrow 62 00:02:45,920 --> 00:02:48,600 ‫than it did today because there are new tweets, 63 00:02:48,600 --> 00:02:50,938 ‫so new data in the database. 64 00:02:50,938 --> 00:02:54,330 ‫And that is what dynamic websites are all about. 65 00:02:54,330 --> 00:02:56,860 ‫Now, if you, for example, go to Jonas.io, 66 00:02:56,860 --> 00:02:58,223 ‫and you should, by the way, 67 00:02:59,150 --> 00:03:01,130 ‫then you will always see the same content, 68 00:03:01,130 --> 00:03:03,680 ‫the same website, no matter when you visit 69 00:03:03,680 --> 00:03:05,060 ‫or what you do there. 70 00:03:05,060 --> 00:03:08,870 ‫And so, that means that it's a static page, all right? 71 00:03:08,870 --> 00:03:10,950 ‫Does this difference make sense? 72 00:03:10,950 --> 00:03:14,200 ‫Now, sometimes we use the term dynamic websites 73 00:03:14,200 --> 00:03:16,450 ‫and sometimes the term web application, 74 00:03:16,450 --> 00:03:18,790 ‫but they are kind of the same thing. 75 00:03:18,790 --> 00:03:21,320 ‫Usually when people refer to web applications, 76 00:03:21,320 --> 00:03:24,450 ‫they mean a dynamic website with some functionality 77 00:03:24,450 --> 00:03:27,180 ‫like logging in, creating user profiles, 78 00:03:27,180 --> 00:03:30,540 ‫searching for stuff, and things like that in general. 79 00:03:30,540 --> 00:03:34,220 ‫Websites are, for example, something like a WordPress blog. 80 00:03:34,220 --> 00:03:36,380 ‫They are still generated dynamically, 81 00:03:36,380 --> 00:03:39,793 ‫but we can't really do anything but reading them, right? 82 00:03:40,790 --> 00:03:44,510 ‫And traditionally, static and dynamic websites were the only 83 00:03:44,510 --> 00:03:47,300 ‫two types of websites, but in recent years, 84 00:03:47,300 --> 00:03:49,840 ‫thanks to how powerful browsers have become 85 00:03:49,840 --> 00:03:53,070 ‫on the client side, we see more and more websites 86 00:03:53,070 --> 00:03:55,930 ‫that are, basically, based on APIs. 87 00:03:55,930 --> 00:03:57,580 ‫So, let's learn how these work 88 00:03:57,580 --> 00:04:00,193 ‫and how we can use Node.js to power them. 89 00:04:02,060 --> 00:04:04,430 ‫Let's just keep the dynamic websites here in the slide 90 00:04:04,430 --> 00:04:07,380 ‫so that we can better compare the two. 91 00:04:07,380 --> 00:04:10,610 ‫So, just like with the dynamic websites, 92 00:04:10,610 --> 00:04:13,880 ‫we have a database here and we have an app 93 00:04:13,880 --> 00:04:16,020 ‫that fetches data from the database 94 00:04:16,020 --> 00:04:20,090 ‫each time a client makes a request, so in that sense, 95 00:04:20,090 --> 00:04:23,210 ‫an API-powered website is actually quite similar 96 00:04:23,210 --> 00:04:25,150 ‫to a dynamic website. 97 00:04:25,150 --> 00:04:27,820 ‫So, both work dynamically. 98 00:04:27,820 --> 00:04:31,130 ‫Now, the big difference here is that with an API, 99 00:04:31,130 --> 00:04:33,890 ‫we only send the data to the browser, 100 00:04:33,890 --> 00:04:36,340 ‫usually in the JSON data format, 101 00:04:36,340 --> 00:04:38,990 ‫and not the entire website. 102 00:04:38,990 --> 00:04:42,090 ‫So, again, just the data is sent to the client 103 00:04:42,090 --> 00:04:44,670 ‫and not the ready to be displayed website. 104 00:04:44,670 --> 00:04:49,670 ‫So, no HTML, no CSS, only the JSON data, all right? 105 00:04:49,860 --> 00:04:52,370 ‫So, when building API-powered websites, 106 00:04:52,370 --> 00:04:54,670 ‫there is always these two steps, 107 00:04:54,670 --> 00:04:58,100 ‫building an API and then consuming the API 108 00:04:58,100 --> 00:05:01,110 ‫on the client side, and by the way, 109 00:05:01,110 --> 00:05:04,850 ‫API stands for application programming interface, 110 00:05:04,850 --> 00:05:07,800 ‫and on a very high level, it's basically a piece 111 00:05:07,800 --> 00:05:11,260 ‫of software that can be used by another piece of software 112 00:05:11,260 --> 00:05:15,340 ‫to, basically, allow applications to talk to each other. 113 00:05:15,340 --> 00:05:17,220 ‫And we will talk a bit more deeply about 114 00:05:17,220 --> 00:05:21,160 ‫what an API actually is once we start building one. 115 00:05:21,160 --> 00:05:24,750 ‫Anyway, now about the client side I just mentioned. 116 00:05:24,750 --> 00:05:28,300 ‫So, this is where the website is then actually assembled 117 00:05:28,300 --> 00:05:31,470 ‫by plugging the data that we receive into some sort 118 00:05:31,470 --> 00:05:35,500 ‫of templates, usually using some fancy front-end framework 119 00:05:35,500 --> 00:05:38,600 ‫like React, Angular, or Vue. 120 00:05:38,600 --> 00:05:40,540 ‫I'm not gonna go into specifics here 121 00:05:40,540 --> 00:05:43,170 ‫because that would be for a front-end course, 122 00:05:43,170 --> 00:05:46,080 ‫but in very general terms, this is how it works. 123 00:05:46,080 --> 00:05:49,200 ‫So, you see that when builidng an API-powered website, 124 00:05:49,200 --> 00:05:52,080 ‫the building phase of the website kind of moved 125 00:05:52,080 --> 00:05:54,970 ‫from the back end to the front end, right? 126 00:05:54,970 --> 00:05:59,410 ‫Or we can also say it moved from the server to the client. 127 00:05:59,410 --> 00:06:01,120 ‫That's why many times you will see 128 00:06:01,120 --> 00:06:04,560 ‫dynamic websites being called server-side rendered 129 00:06:04,560 --> 00:06:07,730 ‫because they're actually built on the server. 130 00:06:07,730 --> 00:06:10,980 ‫On the other hand, API-powered websites are often 131 00:06:10,980 --> 00:06:15,360 ‫called client-side rendered, which makes sense, right? 132 00:06:15,360 --> 00:06:17,200 ‫So, for us back-end developers, 133 00:06:17,200 --> 00:06:20,750 ‫it's actually far easier to just build an API 134 00:06:20,750 --> 00:06:24,460 ‫and let the front-end people build a site, right? 135 00:06:24,460 --> 00:06:27,760 ‫And in fact, Node is an absolutely perfect tool 136 00:06:27,760 --> 00:06:31,510 ‫for building APIs, and it's very commonly used for that, 137 00:06:31,510 --> 00:06:33,610 ‫but of course, it's also perfectly suitable 138 00:06:33,610 --> 00:06:37,210 ‫to build a dynamic server-side rendered website. 139 00:06:37,210 --> 00:06:40,730 ‫So, in this course, we will actually do both versions, 140 00:06:40,730 --> 00:06:43,960 ‫starting with the API, and by the end of the course, 141 00:06:43,960 --> 00:06:47,870 ‫also building a rendered website using the exact same data. 142 00:06:47,870 --> 00:06:51,670 ‫I chose to do both because I believe it's extremely 143 00:06:51,670 --> 00:06:54,960 ‫important for you to know how to build both an API 144 00:06:54,960 --> 00:06:56,710 ‫and a server-side rendered website. 145 00:06:58,150 --> 00:06:59,840 ‫And now just to finish this video, 146 00:06:59,840 --> 00:07:02,020 ‫I wanted to quickly mention that the APIs 147 00:07:02,020 --> 00:07:05,630 ‫that we build with Node, or really, any other language, 148 00:07:05,630 --> 00:07:07,150 ‫can, of course, be consumed 149 00:07:07,150 --> 00:07:09,930 ‫by other clients than just the browser, 150 00:07:09,930 --> 00:07:12,920 ‫which is a huge advantage of building an API instead 151 00:07:12,920 --> 00:07:15,350 ‫of a server-side rendered website. 152 00:07:15,350 --> 00:07:17,320 ‫So, let's say we build an example API 153 00:07:17,320 --> 00:07:22,320 ‫on jonas.io/api/myCourseData. 154 00:07:22,380 --> 00:07:27,350 ‫So, whenever we hit that URL, the server will send back data 155 00:07:27,350 --> 00:07:28,980 ‫about the web development courses 156 00:07:28,980 --> 00:07:31,130 ‫that I am currently teaching. 157 00:07:31,130 --> 00:07:33,970 ‫Now, so far we only talked about requests 158 00:07:33,970 --> 00:07:38,060 ‫coming from web browsers, but we could also request 159 00:07:38,060 --> 00:07:41,060 ‫and then consume the exact same JSON data 160 00:07:41,060 --> 00:07:44,860 ‫on a native iOS app or an Android app, 161 00:07:44,860 --> 00:07:47,890 ‫or even on desktop apps for the Mac 162 00:07:47,890 --> 00:07:50,440 ‫or for Windows computers. 163 00:07:50,440 --> 00:07:54,130 ‫The possibilities are really endless when we build an API 164 00:07:54,130 --> 00:07:56,640 ‫because we simply have one data source, 165 00:07:56,640 --> 00:07:59,380 ‫which can then be requested and used anywhere, 166 00:07:59,380 --> 00:08:00,880 ‫not just browsers. 167 00:08:00,880 --> 00:08:03,210 ‫That's kind of the problem when we build a normal 168 00:08:03,210 --> 00:08:04,520 ‫dynamic website. 169 00:08:04,520 --> 00:08:07,700 ‫We return HTML and CSS and JavaScript files, 170 00:08:07,700 --> 00:08:10,960 ‫and only browsers can really understand these, 171 00:08:10,960 --> 00:08:14,470 ‫so we're then trapped into that single platform. 172 00:08:14,470 --> 00:08:16,840 ‫And that might not be a problem in many cases, 173 00:08:16,840 --> 00:08:19,860 ‫but for complex products that require a lot of apps 174 00:08:19,860 --> 00:08:22,350 ‫and then websites and web apps, 175 00:08:22,350 --> 00:08:25,450 ‫usually, an API is always needed. 176 00:08:25,450 --> 00:08:29,530 ‫So, in this example on Jonas.io, I could build this API 177 00:08:29,530 --> 00:08:32,820 ‫and then build an API-powered website and some apps 178 00:08:32,820 --> 00:08:35,020 ‫and get my data on all these clients 179 00:08:35,020 --> 00:08:37,830 ‫from just one source, all right? 180 00:08:37,830 --> 00:08:41,100 ‫And some people or teams don't even have any client 181 00:08:41,100 --> 00:08:44,240 ‫of their own at all and simply sell access 182 00:08:44,240 --> 00:08:46,120 ‫to their API to third parties 183 00:08:46,120 --> 00:08:49,560 ‫who will then consume these APIs and not their own. 184 00:08:49,560 --> 00:08:51,680 ‫So, there are really entire businesses 185 00:08:51,680 --> 00:08:54,830 ‫built around this philosophy of just selling an API 186 00:08:54,830 --> 00:08:56,563 ‫to other developers or companies. 187 00:08:57,520 --> 00:09:00,670 ‫Anyway, I hope that with this final slide the concept 188 00:09:00,670 --> 00:09:03,740 ‫and reason and, kind of, philosophy 189 00:09:03,740 --> 00:09:07,380 ‫behind building APIs now became crystal clear to you. 190 00:09:07,380 --> 00:09:09,313 ‫So, let's now move on.