In part 1 I covered the reasons why I think React is an exciting tool that can be used to build isomorphic or adaptive-hybrid websites which can equal the dynamism of a smart phone application and be as robust as a 20 year old static page. I also wrote a basic demo application to explore some of Reacts paradigms and features and to show how quickly dynamic applications can be prototyped in-browser but it was hardly a display of the robustness I’m primarily striving for.
The code being delivered to the browser in the initial demo failed every basic web performance test; the scripts should to be precompiled, concatenated and minified before being delivered on a production website.
React Tools can perform a one-to-one
.js file conversion and it is smart enough to recognise CommonJS
require statements to build the dependency tree for a project. This means the tool can process an entire application when given only a single entry point, so there’s no need to transform each script individually. The Tube Tracker application could be transformed with the following command once each scripts dependencies are defined, making sure to start with the files with a
The React Tools solve one piece of the puzzle but the individual scripts still need concatenating and then minifying. Usually when working with a build process requiring several steps a task runner such as Grunt or Gulp.js would be useful but with such a simple application–and one intended to run on both the server and in the browser–we can just use the module bundler Browserify and NPM package scripts for orchestration.
We don’t need a task runner because Browserify supports extensions or ‘source transforms’ through which it can pipe each script it processes. There are transforms available for both precompiling JSX (Reactify) and minifying the output (Uglifyify). All the packages can be installed via NPM, making sure to save them as dependencies to the package manifest:
The build process can now be run but to save repetitively typing the commands they can also be saved to the package manifest as package scripts. NPM already has shortcuts for common use cases such as
npm test and
npm start and arbitrary development and production build scripts can be defined to execute Browserify with the appropriate transforms and flags:
The two package scripts can then be run in sequence:
Lastly, as a handy feature I’ve setup an internal redirect within the application server (written with Express) to deliver the correct script bundle depending on the environment the application is running in:
Honestly, it hasn’t taken me an entire month to write this short article but explaining how to test an application built with React turned out to be a bit more work than expected. I’ve split my testing explorations into another piece to follow in part 3. You can test the app right now (note: It’s running on a free account so this link may not be reliable) or head over to GitHub to check out the source code. Please leave a comment or send me a tweet, I’d love some feedback.