July 15, 2014 at 12:11Building Trusted React Web Applications: Part 2, Optimization with Browserify
- Transfer
- Tutorial
Translation of the article “Building robust web apps with React: Part 2, optimizing with Browserify”, Matt Hinchliffe
From the translator: This is the translation of the second part of the series of articles “Building robust web apps with React”.
Translations:
In the first part , I highlighted the reasons why, in my opinion, React is an exciting tool that can be used to build isomorphic or adaptive-hybrid websites, which can equal the dynamism of mobile applications and the reliability of a static page twenty years ago. I also wrote a basic demo application to explore some of the React paradigms and features and to show how fast prototyping of dynamic browser applications can be, but this hardly demonstrates the reliability that I originally aimed for.
The code that was presented to the browser in the initial demo does not pass any basic performance test; scripts must be precompiled, combined, and minified before being sent to production.
Precompiling code from JSX syntax to pure JavaScript can be done on the React Tools command line , which is installed as an NPM package:
React Tools can do one-to-one conversion of
React Tools solves part of the problem, but individual scripts still require merging and minification. Usually, working with the building process in several steps, a task runner like Grunt or Gulp.js might come in handy, but for such a simple application, which should also be executed on the client and on the server, we can simply use Browserify and NPM scripts .
Browserify allows developers to write separate modules compatible with the Node.js modular system in the style of CommonJS, with the intention of compiling them into a single file. Browserify also includes browser versions of some Node.js modules and is even used by React itself.to create distributions of this library. This is a good tool to use in a purely JavaScript environment, since with some careful solutions it allows the code to be reused for both the client and server parts of the application.
We do not need a task runner, since Browserify supports the extensions or 'source transforms' through which it passes each processed script. There are transformations for precompiling JSX ( Reactify ) and subsequent minification ( Uglifyify ). All packages can be installed through NPM to save them in the package manifest:
Now the building process can be started, but in order to save re-entered commands, they can be saved in the package manifest (package manifest), like batch scripts. NPM has predefined abbreviations for commonly used cases, for example,
Thus, two batch scripts can be run sequentially:
Finally, for convenience, I installed an internal redirection inside the application server (made on Express) to provide the necessary scripts, depending on the environment in which the application is running:
To be honest, writing this short note did not take me a month, but explaining how to test the React application turned out to be more difficult than I expected. I took these studies to part 3. You can try the application right now (note: the example is running on a free account, so this link may be unstable) or go to GitHub to see the source code . Please comment or read to me , I will be glad to receive feedback.
From the translator: This is the translation of the second part of the series of articles “Building robust web apps with React”.
Translations:
- Building Trusted React Web Applications: Part 1, Browser Prototypes
- Building Trusted React Web Applications: Part 2, Optimization with Browserify
- Building Trusted React Web Applications: Part 3, Testing with Jasmine
- Building Robust React Web Applications: Part 4, Server Generation
In the first part , I highlighted the reasons why, in my opinion, React is an exciting tool that can be used to build isomorphic or adaptive-hybrid websites, which can equal the dynamism of mobile applications and the reliability of a static page twenty years ago. I also wrote a basic demo application to explore some of the React paradigms and features and to show how fast prototyping of dynamic browser applications can be, but this hardly demonstrates the reliability that I originally aimed for.
The code that was presented to the browser in the initial demo does not pass any basic performance test; scripts must be precompiled, combined, and minified before being sent to production.
Precompiling code from JSX syntax to pure JavaScript can be done on the React Tools command line , which is installed as an NPM package:
$ npm install -g react-tools
React Tools can do one-to-one conversion of
.jsxa .jsfile, and it is smart enough to recognize requireCommonJS instructions to build a project dependency tree. This means that this tool can process the entire application receiving only one entry point, so there is no need to monotonously transform each script individually. Once the dependencies of the Tube Tracker application are determined, it can be transformed with the following command, which starts with files with the extension .jsx:$ jsx --follow-requires -x jsx app/ public/scripts/
React Tools solves part of the problem, but individual scripts still require merging and minification. Usually, working with the building process in several steps, a task runner like Grunt or Gulp.js might come in handy, but for such a simple application, which should also be executed on the client and on the server, we can simply use Browserify and NPM scripts .
Browserify allows developers to write separate modules compatible with the Node.js modular system in the style of CommonJS, with the intention of compiling them into a single file. Browserify also includes browser versions of some Node.js modules and is even used by React itself.to create distributions of this library. This is a good tool to use in a purely JavaScript environment, since with some careful solutions it allows the code to be reused for both the client and server parts of the application.
We do not need a task runner, since Browserify supports the extensions or 'source transforms' through which it passes each processed script. There are transformations for precompiling JSX ( Reactify ) and subsequent minification ( Uglifyify ). All packages can be installed through NPM to save them in the package manifest:
$ npm install --save-dev browserify reactify uglifyify
Now the building process can be started, but in order to save re-entered commands, they can be saved in the package manifest (package manifest), like batch scripts. NPM has predefined abbreviations for commonly used cases, for example,
npm testor npm start, also arbitrary build scripts can be defined to run Browserify with the appropriate transformations and flags:{
...
"scripts": {
"build-dev": "browserify -e app/bootstrap.js -t reactify -o public/scripts/bundle.dev.js -d",
"build-min": "browserify -e app/bootstrap.js -t reactify -t uglifyify -o public/scripts/bundle.min.js"
}
}
Thus, two batch scripts can be run sequentially:
$ npm run-script build-dev && npm run-script build-min
Finally, for convenience, I installed an internal redirection inside the application server (made on Express) to provide the necessary scripts, depending on the environment in which the application is running:
app.set("js", app.get("env") === "development" ? "dev" : "min");
app.use(function(req, res, next) {
if (req.url === "/scripts/bundle.js") {
req.url = "/scripts/bundle." + app.get("js") + ".js";
}
next();
});
To be honest, writing this short note did not take me a month, but explaining how to test the React application turned out to be more difficult than I expected. I took these studies to part 3. You can try the application right now (note: the example is running on a free account, so this link may be unstable) or go to GitHub to see the source code . Please comment or read to me , I will be glad to receive feedback.