Building Reliable Web Applications with React: Part 2, Optimization with Browserify
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 paradigms and features of React and to show how fast you can prototype dynamic browser applications, but this hardly demonstrates the reliability I originally aimed for.
')
The code that was presented to the browser in the initial demo does not pass a single basic performance test; scripts must be precompiled, combined and minified before being sent to production.
Precompiling code from JSX syntax into pure JavaScript can be done on the React Tools command line , which is installed as an NPM package:
React Tools can convert one-to-one from
React Tools solves part of the problem, but individual scripts still require merging and minification. Usually, working with the build process in several steps, a task executor (like Grunt or Gulp.js) could be useful, but for such a simple application that also has to run on the client and on the server, we can simply use Browserify and NPM scripts .
Browserify allows developers to write separate, CommonJS-style modules compatible with the Node.js modular system, 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 for this library. This is a good tool for use in a strictly JavaScript environment, as with some careful decisions it allows the code to be reused for both the client and server parts of the application.
We do not need a task runner, because Browserify supports extensions or 'source transforms', through which it passes each script that is being processed. There are transformations for precompiling JSX ( Reactify ) and subsequent minification ( Uglifyify ). All packages can be installed via NPM, to save them to the package manifest:
Now the build process can be started, but to save the re-entered commands, they can be saved in the package manifest as package scripts. NPM has predefined abbreviations for frequently used cases, for example,
Thus, two batch scripts can be sequentially launched:
Finally, for convenience, I set up an internal redirect within the application server (made in Express) to provide the necessary scripts, depending on the environment in which the application is running:
To be honest, writing this short note didn't take me a month, but explaining how to test the React application turned out to be harder than I expected. I brought these studies to part 3. You can try the app right now (note: the example is running on a free account, so this link may be unstable) or go to GitHub to view the source code . Please comment or tweet me , I will be happy 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 React reliable web applications: Part 1, browser prototypes
- Building Reliable Web Applications with React: Part 2, Optimization with Browserify
- Building React reliable web applications: Part 3, testing with Jasmine
- Building Reliable Web Applications with React: 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 paradigms and features of React and to show how fast you can prototype dynamic browser applications, but this hardly demonstrates the reliability I originally aimed for.
')
The code that was presented to the browser in the initial demo does not pass a single basic performance test; scripts must be precompiled, combined and minified before being sent to production.
Precompiling code from JSX syntax into 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 convert one-to-one from
.jsx to a .js file, and it's smart enough to recognize require CommonJS instructions to build a project's dependency tree. This means that this tool can process the entire application by getting only one entry point, so there is no need to monotonously transform each script separately. Once the dependencies of the Tube Tracker application have been determined, it can be transformed with the following command, which starts with files with the .jsx extension: $ 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 build process in several steps, a task executor (like Grunt or Gulp.js) could be useful, but for such a simple application that also has to run on the client and on the server, we can simply use Browserify and NPM scripts .
Browserify allows developers to write separate, CommonJS-style modules compatible with the Node.js modular system, 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 for this library. This is a good tool for use in a strictly JavaScript environment, as with some careful decisions it allows the code to be reused for both the client and server parts of the application.
We do not need a task runner, because Browserify supports extensions or 'source transforms', through which it passes each script that is being processed. There are transformations for precompiling JSX ( Reactify ) and subsequent minification ( Uglifyify ). All packages can be installed via NPM, to save them to the package manifest:
$ npm install --save-dev browserify reactify uglifyify Now the build process can be started, but to save the re-entered commands, they can be saved in the package manifest as package scripts. NPM has predefined abbreviations for frequently used cases, for example,
npm test or npm start , as well as arbitrary build scripts can be defined to perform Browserify with the appropriate conversions 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 sequentially launched:
$ npm run-script build-dev && npm run-script build-min Finally, for convenience, I set up an internal redirect within the application server (made in 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 didn't take me a month, but explaining how to test the React application turned out to be harder than I expected. I brought these studies to part 3. You can try the app right now (note: the example is running on a free account, so this link may be unstable) or go to GitHub to view the source code . Please comment or tweet me , I will be happy to receive feedback.
Source: https://habr.com/ru/post/229853/
All Articles