Introduction

JavaScript was born with the goal of giving web developers the power to execute code directly on the browser and build dynamic and interactive websites.

Since its inception, JavaScript has grown up a lot. If, at the very beginning, JavaScript was a very simple and limited language, today, it can be considered a complete general-purpose language that can be used even outside the browser to build almost any kind of application. In fact, JavaScript now powers frontend applications, web servers, and mobile applications, as well as embedded devices such as wearable devices, thermostats, and flying drones.

The language’s availability across platforms and devices is fostering a new trend among JavaScript developers: being able to simplify code reuse across different environments in the same project. With Node.js, developers have the opportunity to build web applications where it’s easy to share code between the server (backend) and the browser (frontend). This quest for code reuse was originally identified with the term Isomorphic JavaScript, but today, it’s mostly recognized as Universal JavaScript.

In this chapter, we’re going to explore the wonders of Universal JavaScript, specifically in the field of web development, and discover many tools and techniques we can use to share code between the server and the browser.

We’ll explore what a module bundler is and why we need one. We’ll then learn how module bundlers work and we’ll practice with a popular one called webpack. Then, we’ll discuss some generic patterns that can help us with code reuse across platforms.

Finally, we’ll learn the basic functionalities of React and we’ll use it to build a complete Universal JavaScript application that features universal rendering, universal routing, and universal data loading.

To summarize, here’s a list of topics we’ll be covering in this chapter: