Meet “all at once”, React Boilerplate by Maximilian Stoiber v3.6.0
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, you will need to use many other libraries, since the React ecosystem offers many of these. 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 the work, a set that uses best practices in project organization, including taking into account scalability and performance, has introduced technologies that help the programmer to quickly develop and debug code.
The developers of the assembly position it as a highly scalable, offline-first (once loaded 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”, combat-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, actions such as asynchronous operations such as data loading, etc.) in React / Redux applications;
- Reselect , v3 - the library 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 - library allows you to get rid of CSS-classes, as an intermediate stage between the component and its styles;
- React Loadable , v5.4 - a library that allows you to implement a component-oriented approach to the separation of code 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 container components” .
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 opportunities 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 together with their selectors, sagas, reducers and tests via the command line;
- “Hot swap” of modules, which allows to see without delay the results of changes made to the application code;
- use 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 included 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 you to provide secure access to a local server from the Internet by using the Ngrok service ;
- 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);
- search engine optimization support (managing the page's head tags) for search engines that support indexing of JavaScript content;
- Fast Web Font download, which allows you to eliminate the delay in the display of 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 06/26/2018), actively solves problems : for example, 1367 were resolved as of 08/11/2018 and 9 problems are in the process of solution.
So?
So, the assembly provides an excellent example of a full 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!”