The build react-boilerplate recently, 06/26/2018, has been updated to version 3.6.0. This assembly is more than three years old, but, standing out against the background of many
others (more than 18 thousand Stars GitHub), it was almost never seen on Habré. What is its feature? In short - the assembly offers the developer "all at once"!
First about the sad
First, a little about sad things. The value of starting assemblies for react-projects is simply huge. As you know, React itself is just a library that implements the presentation level and in order to create a full-fledged application, many other libraries will need to be applied, since the React ecosystem offers quite a few of them. For this reason, the configuration of the React project is a serious problem whose solution to an individual developer is extremely difficult to find. Dan Abramov himself understands this perfectly well, stating: “The configuration should not stand in the way of getting started”. And offers a solution - Create React App . In this starting build, which gained significant popularity (more than 51 thousand Stars GitHub), the authors tried to protect the developer from configuration issues as much as possible, hiding the default configuration, cutting the set of modules to a minimum, allowing for automatic generation of components, thereby creating a feeling of simplicity and ease of developing react-applications. Moreover, they, on the basis of the same message, offer their own list of recommended assemblies. The approach may be good for attracting newbies, but quickly exhausting itself with its limitations and configuration issues, the use of the best modules, best practices still need to be addressed. And how to be , for example, a developer who is developing his first react-project?
There is an exit
The react-boilerplate assembly is an alternative approach to solving a problem and offers “all at once”. This is a set of modules that are de facto recognized as standard and tested in work, a set that uses best practices in project organization, including with regard to scalability and performance, and technologies are introduced that help the programmer quickly develop and debug code.
The developers of the assembly position it as highly scalable, “offline-first” (once loaded, the application works in offline mode), taking into account the experience of the best developers, aimed at high performance and built taking into account the “best practice”, strong, “production ready”, battle-proven basis for developing a react-application.
Applicable Libraries
More about the modules used:
- React, v16.4 (Fiber) - progressive implementation of the key React algorithm, which increases productivity in developing tasks such as animation, organization of elements on the page and movement of elements;
- React Router , v4.3 - a de facto router for react applications, makes it possible to build applications with search-friendly URLs;
- Redux , v4 - a library providing strictly unidirectional data flow, making application logic more predictable and easy to understand;
- Redux Saga , v0.16 - a library that is designed to simplify and improve the performance of side effects (ie, such actions as asynchronous operations such as data loading, etc.) in React / Redux applications;
- Reselect , v3 - a library that allows you to prevent unnecessary redrawing and recalculation of the data, which, in turn, accelerates the React / Redux application;
- ImmutableJS , v4 - a library that facilitates working with immunable data in React / Redux applications;
- Styled Components , v3.3 - the library allows you to get rid of CSS classes, as an intermediate step between the component and its styles;
- React Loadable , v5.4 - a library that allows to implement a component-oriented approach to code separation and implement late loading;
- Jest v23.1, Enzyme v3.3 - libraries for testing react-applications.
Scalability and performance
The assembly consistently introduced the principles of support for scalability and increased performance, detailed by the developer of the Max Stoiber assembly in his lecture “Scaling ReactJS Applications” and Dan Abramov in the lecture “Components of presentation and components-containers” .
In particular, these principles include:
- separation of components into presentation and containers;
- placing the code on the principle of one component - one folder;
- the use of modern tools (styled-components, CSS Modules) to solve problems with CSS heredity in large projects;
- use Redux / Saga to streamline data flow, simplify asynchronous operations.
Coding, debugging, testing
The assembly provides ample opportunity to assist the programmer in writing and debugging code:
- Next-generation JavaScript (string patterns, object restructuring, JSX syntax, etc.);
- fast generation of components / containers / routes, along with their selectors, sagas, reducers and tests via the command line;
- “Hot-swapping” of modules, which allows, without delay, to see the results of changes made to the application code;
- use of Webpack Dll Plugin , which improves by 40% the launch time of the application on the server and during the "hot reboot" of modules;
- using AppVeyor and TravisCI (installation files are enabled by default), which allows you to automatically run application tests on Windows and Unix;
- static code analysis: ESLint , Prettier and stylelint automatically check and format the code in your editor (setup is required, configuration files and instructions are attached);
- Placement on Heroku , AWS S3 cloud services: (setup required, instructions included).
Command line
The assembly provides, as already mentioned, a set of commands for the command line, which implements many of the features a developer needs, including:
- initialization of a new project with 100% coverage tests;
- running the application on the developer's server;
- generation of components, containers with their selectors, sagas, reducers and tests;
- generation of "production" version of the project code;
- project testing;
- remote debugging, which allows using Ngrok service to provide secure access to a local server from the Internet;
- lintting;
- translation management (adding languages, extracting messages into i18n JSON files);
- profiling, although mentioned among the merits of the command line build, but, unfortunately, not found.
Is there something extra?
If you decide that you do not need any modules, you can remove them and the assembly will help you with your instructions ( here and here ).
It seemed to you that something is missing?
Additional features provided by the assembly:
- “Offline-first”, which means that once downloaded application runs offline even on outdated browsers;
- “Native web app” means that when you re-visit the application, the user will receive an invitation to add an icon to the home screen and the application can be used exactly as a “native” application (but without restrictions imposed by application stores);
- support for search engine optimization (managing head tags of the page) for search engines that support indexing of JavaScript content;
- Fast Web Font download, which allows you to eliminate the delay in displaying the page associated with the delay in loading fonts;
- Image optimization with Webpack's image-loader.
Documentation
The assembly is well documented , and, for example, even contains a section on solving possible problems .
Updates, bugs
The project is regularly updated, promptly responding to changes in its constituent modules (last updated on 06/26/2018), actively solves problems : for example, 1367 resolved on 11.08.2018 and 967 problems are in the process of being solved.
So?
So, the assembly provides an excellent example of a full-fledged configuration of the React project, creates conditions for the programmer to speed up writing and debugging code, offers examples of the implementation of best practices used in the development of highly scalable and productive applications.
And in conclusion - a message from the author of the assembly Maximilian Stoiber and his team:
“If you need a solid, battle-proven foundation for building your next superfood, and you have some experience with React, this is the perfect option for you!”