Building Isomorphic JavaScript Apps

Chapter 8. Transporting the Application to the Client

Jason Strimpel

Up until now our efforts have been focused on building a solid foundation for our application. In this chapter we will begin to reap the benefits of our careful planning as we update our server-only application to run on the client. If we have done our job well, this should be a fairly easy task; once we are done, we will have the core of a fully functioning isomorphic JavaScript application. However, before we begin the process of porting our application to the client, we need to make some additions to our build process and modify the structure of the application.

Bundling Our Application for the Client

This first thing we need to do in order to run our application on the client is to create an application bundle file that contains our entire application source. This file will be included by ./src/index.html, which is served as the first page response from the server.

Note

If your application is large you may want to split it up into multiple bundles to improve the initial page load experience.

Selecting a Bundling Library

There are two primary bundling libraries currently being leveraged by the community to create client application bundles: Browserify and Webpack.

Asynchronous Module Definition (AMD)

There is a third bundling library, the RequireJS Optimizer, that leverages RequireJS, which implements the AMD pattern: an API specifies a mechanism for defining modules such that the module and its dependencies ...