‫In the previous lecture,
‫while talking about the front-end and the back-end,
‫I mentioned simple and static and dynamic websites,
‫or applications, a couple of times
‫but without really defining what they are.
‫So, in this video, I wanted to clarify these things
‫and also talk about APIs in order to bring
‫all these concepts into the bigger picture
‫of back-end web development in general.
‫So, let's start by talking about static
‫versus dynamic websites.
‫So, a static website, or a simple website
‫as I called it in the last video,
‫is when a developer uploads the final
‫ready to be served files of a website onto the web server.
‫These files usually contain HTML, CSS,
‫JavaScript, images, and more, and as I said,
‫these are the exact files that the server will later send
‫to the browser when the website is requested.
‫The browser will then take these files
‫and render them as they are.
‫This means that there is no work done on the server,
‫there is no back-end code, and there's also no application
‫whatsoever running.
‫Okay?
‫So, it's just a static web server serving static files,
‫exactly like I mentioned in the last video.
‫Now, you might think, wait,
‫when there is JavaScript on the page,
‫then there are usually dynamic effects,
‫like animations and stuff, right?
‫Well, that dynamic that you mean there
‫is a different dynamic.
‫It's just in the context of front-end development.
‫In the browser context, dynamic has nothing to do
‫with effects on a page or things moving around
‫but with the way websites are generated on servers.
‫Okay?
‫So, dynamic websites are different from static websites
‫because they are usually built on the server
‫each time a new request comes in.
‫So, like we saw in the last video,
‫dynamic websites usually contain a database,
‫then there's also an application running,
‫like a Node.js app, which fetches data from the database,
‫and then, together with a predefined template,
‫builds each page that the user requests dynamically
‫based on data coming from the database.
‫So, each time a browser requests a page,
‫that page is then built as HTML, CSS, and JavaScript files,
‫which will then be sent back to the browser.
‫This whole process is sometimes called
‫server-side rendering.
‫So, again, that's why it's called dynamic,
‫because the website can change all the time according
‫to the content that's in the database
‫or user's actions on the site.
‫For example, if you logged into Twitter,
‫it will show you a completely different page
‫than when you logged out, right?
‫And it will also show you a different page tomorrow
‫than it did today because there are new tweets,
‫so new data in the database.
‫And that is what dynamic websites are all about.
‫Now, if you, for example, go to Jonas.io,
‫and you should, by the way,
‫then you will always see the same content,
‫the same website, no matter when you visit
‫or what you do there.
‫And so, that means that it's a static page, all right?
‫Does this difference make sense?
‫Now, sometimes we use the term dynamic websites
‫and sometimes the term web application,
‫but they are kind of the same thing.
‫Usually when people refer to web applications,
‫they mean a dynamic website with some functionality
‫like logging in, creating user profiles,
‫searching for stuff, and things like that in general.
‫Websites are, for example, something like a WordPress blog.
‫They are still generated dynamically,
‫but we can't really do anything but reading them, right?
‫And traditionally, static and dynamic websites were the only
‫two types of websites, but in recent years,
‫thanks to how powerful browsers have become
‫on the client side, we see more and more websites
‫that are, basically, based on APIs.
‫So, let's learn how these work
‫and how we can use Node.js to power them.
‫Let's just keep the dynamic websites here in the slide
‫so that we can better compare the two.
‫So, just like with the dynamic websites,
‫we have a database here and we have an app
‫that fetches data from the database
‫each time a client makes a request, so in that sense,
‫an API-powered website is actually quite similar
‫to a dynamic website.
‫So, both work dynamically.
‫Now, the big difference here is that with an API,
‫we only send the data to the browser,
‫usually in the JSON data format,
‫and not the entire website.
‫So, again, just the data is sent to the client
‫and not the ready to be displayed website.
‫So, no HTML, no CSS, only the JSON data, all right?
‫So, when building API-powered websites,
‫there is always these two steps,
‫building an API and then consuming the API
‫on the client side, and by the way,
‫API stands for application programming interface,
‫and on a very high level, it's basically a piece
‫of software that can be used by another piece of software
‫to, basically, allow applications to talk to each other.
‫And we will talk a bit more deeply about
‫what an API actually is once we start building one.
‫Anyway, now about the client side I just mentioned.
‫So, this is where the website is then actually assembled
‫by plugging the data that we receive into some sort
‫of templates, usually using some fancy front-end framework
‫like React, Angular, or Vue.
‫I'm not gonna go into specifics here
‫because that would be for a front-end course,
‫but in very general terms, this is how it works.
‫So, you see that when builidng an API-powered website,
‫the building phase of the website kind of moved
‫from the back end to the front end, right?
‫Or we can also say it moved from the server to the client.
‫That's why many times you will see
‫dynamic websites being called server-side rendered
‫because they're actually built on the server.
‫On the other hand, API-powered websites are often
‫called client-side rendered, which makes sense, right?
‫So, for us back-end developers,
‫it's actually far easier to just build an API
‫and let the front-end people build a site, right?
‫And in fact, Node is an absolutely perfect tool
‫for building APIs, and it's very commonly used for that,
‫but of course, it's also perfectly suitable
‫to build a dynamic server-side rendered website.
‫So, in this course, we will actually do both versions,
‫starting with the API, and by the end of the course,
‫also building a rendered website using the exact same data.
‫I chose to do both because I believe it's extremely
‫important for you to know how to build both an API
‫and a server-side rendered website.
‫And now just to finish this video,
‫I wanted to quickly mention that the APIs
‫that we build with Node, or really, any other language,
‫can, of course, be consumed
‫by other clients than just the browser,
‫which is a huge advantage of building an API instead
‫of a server-side rendered website.
‫So, let's say we build an example API
‫on jonas.io/api/myCourseData.
‫So, whenever we hit that URL, the server will send back data
‫about the web development courses
‫that I am currently teaching.
‫Now, so far we only talked about requests
‫coming from web browsers, but we could also request
‫and then consume the exact same JSON data
‫on a native iOS app or an Android app,
‫or even on desktop apps for the Mac
‫or for Windows computers.
‫The possibilities are really endless when we build an API
‫because we simply have one data source,
‫which can then be requested and used anywhere,
‫not just browsers.
‫That's kind of the problem when we build a normal
‫dynamic website.
‫We return HTML and CSS and JavaScript files,
‫and only browsers can really understand these,
‫so we're then trapped into that single platform.
‫And that might not be a problem in many cases,
‫but for complex products that require a lot of apps
‫and then websites and web apps,
‫usually, an API is always needed.
‫So, in this example on Jonas.io, I could build this API
‫and then build an API-powered website and some apps
‫and get my data on all these clients
‫from just one source, all right?
‫And some people or teams don't even have any client
‫of their own at all and simply sell access
‫to their API to third parties
‫who will then consume these APIs and not their own.
‫So, there are really entire businesses
‫built around this philosophy of just selling an API
‫to other developers or companies.
‫Anyway, I hope that with this final slide the concept
‫and reason and, kind of, philosophy
‫behind building APIs now became crystal clear to you.
‫So, let's now move on.