Creating a Universal JavaScript App

Learn how to use advanced concepts such as universal routing, rendering, and data fetching to create JavaScript applications.

We'll cover the following

Now that we’ve covered the basics, let’s start to build a more complete Universal JavaScript application. We’re going to build a simple “book library” application where we can list different authors and see their biography and some of their masterpieces. Although this is going to be a very simple application, it’ll allow us to cover more advanced topics such as universal routing, universal rendering, and universal data fetching. The idea is that we can later use this application as a scaffold for a real project and build our next universal JavaScript application on top of it. 

In this experiment, we’re going to use the following technologies: 

  • React, which we just introduced 

  • React Router, a companion routing layer for React 

  • Fastify, a fast and ergonomic framework to build web servers in Node.js 

  • Webpack as the module bundler 

For practical reasons, we’ve selected a very specific set of technologies for this exercise, but we’ll try to focus on the design principles and patterns rather than the technologies themselves. As we learn these patterns, we should be able to use the acquired knowledge with any other combination of technologies and achieve similar results.

Get hands-on with 1200+ tech skills courses.