Learn about how a single-page application works.
- Hi and welcome to the first section of this cycle. We're going to have a quick look at the project we're going to build during the course of this cycle as well as have with you a small discussion about why we build web applications this way. In this section we're going to have a quick look at the single page applications. We will have a look at how they work and I will also give you some examples of really successful single page applications. Then we will also have a look at the build process that happens when using, whenever using Webpack.
So we'll talk about module bundling as well as the reasoning behind using Webpack in modern web applications and web projects. Then we will create a very simple application that we will compile and build using Webpack and also have a quick look at one of my projects which is called, MyReads which we will be using during the videos in future sections in order to demonstrate and show the way Webpack and React work together in front end development.
After looking at the application we will also look at what we want to accomplish by the end of the project. We want to see what we want to obtain, what type of files we're expecting to get at the end as well as why we want those files in that specific format and then towards the end of the section we will also look at how to install and setup Webpack on your computers and make sure that you have everything ready for the projects that are following.
In our first video we will talk in a bit more generic terms about React applications and single page applications and we will have a quick introduction into the project we're going to build over the course of this cycle. So first of all, the topics that we're going to cover in this video are single page applications and I will talk a bit more about how they work and why more and more companies are starting to use single page applications instead of the old, traditional, server side rendering. We will have a quick look at the differences between those and why a single page applications are being preferred these days and why people started developing them.
Then we will also have a quick look at how Webpack runs in a project and how it builds and optimizes the project and then we'll have that first look at the MyReads app, which is going to be the application we will be developing together during the course of this title. To better understand why people have started using pro tools like Webpack in their single page applications we need to have a look first at what the main differences between server side rendering and single page applications are.
If you've done front end development before then you're probably familiar with website frameworks such as WordPress or Drupal or anything similar and you've probably used them before so those types of frameworks are server side rendering frameworks. Ah, let's have a quick look at this diagram and see how server side rendering differs, is different from single page applications. Let's have a look at server side rendering, so first of all, imagine you've built your application, you've launched it, it's online, it's sitting on the server which is processing user requests.
At that point, whenever a user makes a request for your website, so they try to access your website, or they land on your website, from a page like Google or from a link they've received, they'll generate a request to your server. At that point your server will receive the request from your users and at that point the server will say, okay what type of page do I need to send this user. Is it a homepage, is it an application page, is it anything like that? After that decision is made, the server will build a full page and send the whole page back to the user.
So page is sent to the user browser, the browser will make sure to load all the necessary resources and then build the whole page again. Now at this point the user has a full page in his browser, if he performs an action, for example, he navigates to a menu or he submits a form, or anything like that, or changes the address in the address bar or anything like that, what will happen is when that action is performed the server will receive a new request and then it will build another full page, the page will be again sent to the user and so on.
So basically every time the user performs an action on your website, the server has to rebuild the whole page, even though some of the elements in the page are the same all the time. So for example, imagine you have a header, footer, you might have a gallery of images or anything like that. Every time those are being sent to the user, the server has to build the whole page again, reusing elements over and over again. Now in order to deal with this issue and to deal with increasing number of visits on sites, and everything like that, and to release the load of the servers, people have started building single page applications.
The basics of how single page applications work is completely different from server side renderings so let's have a look through the diagram and see exactly what a single page application does. So whenever a user sends a request there is still a server, backing server, that exists there which will receive the requests; however, instead of building a whole page for the user to, to send to the user, the server will create just a skeleton of the application, which is a very basic html file and send that page to the user, that page will not contain a lot of code, it will not contain a lot of display elements, it will just contain a lot of java script files that need to be loaded by the browser.
Now the page is sent to our user, the browser will note the page and all the java script files associated with it and from that point onwards the framework that you've chosen, the React, Angular, Vue.js, or anything like that, the framework itself will take care of rendering the page and the elements in the page that need to be shown to the user. So from that point onwards, the interaction with the web server disappears so from this point onwards whenever a user performs an action, the action will be captured by the framework and the framework will make sure it handles rendering of elements as well as rendering of any new links or any new form or any new menu, links, or anything like that.
As you can see, the main difference between those two methodologies of building web applications is that whenever you're doing server side rendering, it is much more stressful on the sever to deal with excessive requests and that is true, especially in the case where you have really popular apps which generate a lot of traffic and everybody's clicking everywhere. So in that case you'd want to build a single page application in which the load is taken off your server and then added onto the browser and the framework, the java script framework that you decided to use in your project.
Now as I have mentioned in the previous diagram, this is how let's say your index.html might look in an application, so basically let's say we have our photo gallery, we have some functions, we have an app java script that handles let's say basic animations and stuff and then we also have an api.js which contains some functions that we need to load data for our gallery for example. At this point, all of those files are being loaded into our index.html so when that happens the browser is doing a lot, a lot of requests for these small java script files and while all those file are small files, just making a lot of requests usually takes the browser a bit longer to load the page.
This is especially true whenever developing web applications for mobiles. Mobiles are sometimes, if the internet connection is not good, or is very slow, those small files will take a long time to load and load time is one of the most important things when developing websites and web apps because a lot of users do not have patience to wait for the site to load so they need to get a really performant application that loads quick and works quick as well. This is one of the reasons why build tools such as Webpack have been invented, to take the stress of the load process and try and increase the speed of which your apps work.
So we will have a quick look at what Webpack does in order to simplify this load process and make it a bit faster. So what build tools, and especially Webpack, will do for you, they will, as you can see, all the same files we had loading previously like our gallery, functions, app, and api and all the other files that you have for your project will go through Webpack which will put them all together into one large java script file, one larger java script file, which is usually called either main.js, upgo.js, or bundle.js, it depends on how you'd like to call it.
And then that bundle.js is then loaded into our index page so at this point, instead of loading a lot of tiny files we would load one large file which will not be much larger than the sum of the other ones combined however it will load much faster just because the browser only needs to do very few requests in order to retrieve this bundle.js file. So that's one of the reasons why build tools, and especially Webpack, are very popular in today's front end development because they increase the load speed of your application and they also help to make sure that your application always loads the same for all the users.
So for example, no files are missed, no files are loaded. The only thing that the user's browser needs to worry about is loading the index.html and the bundle.js. That bundle.js will also contain React and any other development tools that you, or any other frameworks that you decide to use for the user. So as you can see, everything is packaged into one large file that only needs to be loaded once in order to increase the performance of your application. As an example of big companies using this process in order to optimize and improve their web applications we can have a look at Airbnb, which is a platform built, which is a web application based on React that is bundled together with Webpack and also you can also have look if you do not know Discord.
Discord is another one of those applications, is a chat application that works in the browser which is also built with React and bundled with Webpack. We will have a look in the next video quickly and see how Webpack is helping build those applications but before we do that, let's have a quick look at the project we're going to develop over the course of this title which I've called MyReads. It's a project I've done for a course recently, it's not very very complex, React application. However, it contains everything that we need in order to make sure that everything Webpack does is being introduced properly and that you would then can apply those lessons to your own React projects.
So the MyReads application it's a simple, I call it a bookshelf application. What you have in here is basically a page in which you can save the books that you want to read and also keep an history of the books that you've already read. As you can see in the bottom you have a plus button. You can use this button to search for other books that are available in the library. So there are a few searches, I recommend searching art for example and then once those load you can, let's say, pick a book from the library and add it into your "Read".
To add it you just click on this and then let's say you want to add it to your Read list, you'll add it to "Want to Read" and now when we go back into our homepage you'll see that our book has been added to our "Want to Read". At the same time you can always switch a book from one shelf to another, so for example, if you started reading this book you put it into "Currently Reading" and when you're done you'll just add it to "Read". So as you can see, the functionality is really basic however this project encapsulates a lot of React techniques that you can use to get Webpack in order to improve performance.
You also have another page, if you go under any book you can click on "More" and obtain a few more details about that specific book, so it's nothing too fancy however, this project will help you understand how you can combine Webpack and React to obtain a really powerful application. So that covers the first video of this section. In the next video we will have a look at the deliverables that we are expecting to have at the end of the project and how we will obtain that using Webpack too.
- Setting up Babel
- Loading assets into your project
- Using SCSS in your project
- Cache busting
- Using dev server in your application
- Best practices with webpack dev server
- Getting an app production-ready
- Deployments with AWS S3