The architecture of the SPA-application exchange in 2019

Greetings, habrovchane!

I have been reading this resource since its inception, but the time to write an article appeared only now, which means it’s time to share my experience with the community. I hope for novice developers, the article will help to improve the quality of design, and experienced ones will act as a checklist so as not to forget important elements at the architecture stage. For the impatient - the final repository and demos .

Suppose you are settled in a "dream company" - one of the exchanges with a free choice of technologies and resources to do everything "as it should." At the moment, all that the company has is

Task from business

Develop a SPA application for the trade interface in which you can:

see the list of trading pairs grouped by the currency being traded;
when you click on the trading pair, see the information on the current price, change in 24 hours, “the order book”;
change the language of the application to English / Russian;
change the theme to dark / light.

The task is rather short, which will allow focusing on the architecture, rather than writing large volumes of business functionality. The result of the initial efforts should be a logical and well-thought-out code that allows you to proceed directly to the implementation of business logic.

Since there are no technical requirements in the customer specification, let them be comfortable for development:

Cross-browser compatibility : 2 latest versions of popular browsers (without IE);
screen width :> = 1240px;
design : by analogy with other exchanges, because The designer has not yet been hired.

Now is the time to identify the tools and libraries used. I will be guided by the principles of “turnkey” development and KISS , that is, taking only those opensource libraries that would require an inadequate amount of time for self-realization, including time to train future fellow developers.

version control system : Git + Github;
backend : CoinGecko API ;
build / transfer : Webpack + Babel;
Package Installer : Yarn (npm 6 incorrectly updated dependencies);
code quality control : ESLint + Prettier + Stylelint;
view : React (see how convenient the hooks are);
store : MobX;
Autotests : Cypress.io (complex solution for javascript instead of modular assembly like Mocha / Karma + Chai + Sinon + Selenium + Webdriver / Protractor);
Styles : SCSS via PostCSS (configuration flexibility, friendly with Stylelint);
graphics : HighStock (it is much easier to configure than TradingView , but for the real application you would take the latter);
error registration : Sentry;
utilities : Lodash (time saving);
routing : turnkey;
localization : turnkey;
work with queries : turnkey;
performance metrics : turnkey;
typing : not in my shift.

Thus, only React, MobX, HighStock, Lodash and Sentry will be from the libraries in the final application file. I think this is justified, as they have excellent documentation, speed and are familiar to many developers.

Code Quality Control

I prefer to break the dependencies in package.json into semantic parts, so after the initiation of the git repository I will group the first step in the style of the code in the ./eslint-custom folder, with package.json :

{ "scripts": { "upd": "yarn install --no-lockfile" }, "dependencies": { "eslint-custom": "file:./eslint-custom" } }

Normal yarn install will not check if the dependencies have changed inside eslint-custom , so I will use yarn upd . In general, this practice looks more universal, since devops will not have to change the deployment recipe if developers need to change the package installation method.

There is no point in using the yarn.lock file , since all dependencies will be without semver “caps” (in the form of "react": "16.8.6" ). Experience has shown that it is better to manually update versions and test them thoroughly as part of individual tasks than relying on the lock file, giving package authors the opportunity to break the application with a minor update at any time (the lucky ones who have not encountered this).

In the eslint-custom package dependencies will be as follows:

eslint-custom / package.json

 { "name": "eslint-custom", "version": "1.0.0", "description": "Custom linter rules for this project", "license": "MIT", "dependencies": { "babel-eslint": "10.0.1", "eslint": "5.16.0", "eslint-config-prettier": "4.1.0", "eslint-plugin-import": "2.17.2", "eslint-plugin-prettier": "3.0.1", "eslint-plugin-react": "7.12.4", "eslint-plugin-react-hooks": "1.6.0", "prettier": "1.17.0", "prettier-eslint": "8.8.2", "stylelint": "10.0.1", "stylelint-config-prettier": "5.1.0", "stylelint-prettier": "1.0.6", "stylelint-scss": "3.6.0" } }

To bind the three tools, it took 5 auxiliary packages ( eslint-plugin-prettier, eslint-config-prettier, stylelint-prettier, stylelint-config-prettier, prettier-eslint ) —that price must be paid today. For maximum convenience, all that is needed is automatic sorting of imports , but unfortunately, this plugin loses lines when reformatting a file.

The configuration files for all tools will be in * .js format ( eslint.config.js , stylelint.config.js ) so that the code formatting works on them. Let the rules be in * .yaml format, broken down by semantic modules. Full versions of configurations and rules - in the repository .

It remains to add commands to the main package.json ...

 { "scripts": { "upd": "yarn install --no-lockfile", "format:js": "eslint --ignore-path .gitignore --ext .js -c ./eslint-custom/eslint.config.js --fix", "format:style": "stylelint --ignore-path .gitignore --config ./eslint-custom/stylelint.config.js --fix" } }

... and configure your IDE to apply formatting while saving the current file. To guarantee a commit, you need to use git-hook, which will check and format all project files. Why not only those that are present in the commit? For the principle of collective responsibility for the entire code base, so that no one has the temptation to bypass validation. For the same while creating a commit, all linter warnings will be considered errors with the help of --max-warnings=0 .

 { "husky": { "hooks": { "pre-commit": "npm run format:js -- --max-warnings=0 ./ && npm run format:style ./**/*.scss" } } }

Build / Transfer

I will use the modular approach again and bring all the Webpack and Babel settings to the folder ./webpack-custom. The config will be based on the following file structure:

 . |-- webpack-custom | |-- config | |-- loaders | |-- plugins | |-- rules | |-- utils | `-- package.json | `-- webpack.config.js

Properly configured collector will provide:

the ability to write code using the syntax and capabilities of the latest EcmaScript specification, including convenient proposals (decorators of classes and their properties for MobX will definitely be useful here);
local server with Hot Reloading;
assembly performance metrics;
checking for cyclic dependencies;
analysis of the structure and size of the final file;
optimization and minification for production assembly;
interpretation of modular * .scss files and the ability to make ready * .css files from the bundle;
inline-insert * .svg files;
polyfills / style prefixes for target browsers;
solution to the problem of caching files on production.

And it will also be convenient to configure. I will solve this problem with the help of two * .env example files:

.frontend.env.example

 AGGREGATION_TIMEOUT=0 BUNDLE_ANALYZER=false BUNDLE_ANALYZER_PORT=8889 CIRCULAR_CHECK=true CSS_EXTRACT=false DEV_SERVER_PORT=8080 HOT_RELOAD=true NODE_ENV=development SENTRY_URL=false SPEED_ANALYZER=false PUBLIC_URL=false # https://webpack.js.org/configuration/devtool DEV_TOOL=cheap-module-source-map

.frontend.env.prod.example

 AGGREGATION_TIMEOUT=0 BUNDLE_ANALYZER=false BUNDLE_ANALYZER_PORT=8889 CIRCULAR_CHECK=false CSS_EXTRACT=true DEV_SERVER_PORT=8080 HOT_RELOAD=false NODE_ENV=production SENTRY_URL=false SPEED_ANALYZER=false PUBLIC_URL=/exchange_habr/dist # https://webpack.js.org/configuration/devtool DEV_TOOL=false

Thus, to run the assembly, you need to create a file called .frontend.env and the mandatory presence of all parameters. This approach will solve several problems at once: it is not necessary to make separate configuration files for the Webpack and maintain their consistency; locally, you can configure as much as a specific developer needs; Deploying devops will only copy the file for a production assembly ( cp .frontend.env.prod.example .frontend.env ), enriching with values from the repository, respectively, frontend developers can manage the recipe through variables without admins. Additionally, it will be possible to make an example of configuration for stands (for example, from source maps).

To separate styles into files with CSS_EXTRACT enabled, I will use mini-css-extract-plugin - it allows using Hot Reloading. That is, if you enable HOT_RELOAD and CSS_EXTRACT in local development, then
only they will be reloaded when changing styles files - but, unfortunately, everything, and not just the modified file. With CSS_EXTRACT turned off, only the modified style module will be updated.

The HMR for working with React Hooks is enabled fairly standardly:

webpack.HotModuleReplacementPlugin in plugins;
hot: true in webpack-dev-server parameters;
react-hot-loader/babel to babel-loader plugins;
options.hmr: true mini-css-extract-plugin ;
export default hot(App) in the main component of the application;
@ hot-loader / react-dom instead of the usual react-dom (conveniently through resolve.alias: { 'react-dom': '@hot-loader/react-dom' } );

The current react-hot-loader version does not support component React.memo with React.memo , so when writing decorators for MobX, you will need to take this into account for the convenience of local development. Another inconvenience caused by this is that when Highlight Updates is enabled in the React Developer Tools, all components are updated with any interaction with the application. Therefore, when working locally on performance optimization, the HOT_RELOAD setting should be disabled.

Optimization of assembly in Webpack 4 is performed automatically when specifying mode : 'development' | 'production' mode : 'development' | 'production' . In this case, I will rely on the standard optimization (+ including the keep_fnames: true parameter in the terser-webpack-plugin to save the names of the components), since it is already well-tuned.

Separate attention should be divided into chunks and client caching control. For correct work you need:

in output.filename for js and css files specify isProduction ? '[name].[contenthash].js' : '[name].js' isProduction ? '[name].[contenthash].js' : '[name].js' (with a .css extension, respectively), so that the name of the file is based on its content;
in optimization, change the parameters to chunkIds: 'named', moduleIds: 'hashed' , so that the internal module counter in the webpack does not change;
make runtime in a separate chunk;
bring caching groups to splitChunks (for this application, four points are enough - lodash, sentry, highcharts and vendor for the remaining dependencies from node_modules ). Since the first three will be rarely updated, they will remain in the client browser cache as long as possible.

webpack-custom / config / configOptimization.js

 /** * @docs: https://webpack.js.org/configuration/optimization * */ const TerserPlugin = require('terser-webpack-plugin'); module.exports = { runtimeChunk: { name: 'runtime', }, chunkIds: 'named', moduleIds: 'hashed', mergeDuplicateChunks: true, splitChunks: { cacheGroups: { lodash: { test: module => module.context.indexOf('node_modules\\lodash') !== -1, name: 'lodash', chunks: 'all', enforce: true, }, sentry: { test: module => module.context.indexOf('node_modules\\@sentry') !== -1, name: 'sentry', chunks: 'all', enforce: true, }, highcharts: { test: module => module.context.indexOf('node_modules\\highcharts') !== -1, name: 'highcharts', chunks: 'all', enforce: true, }, vendor: { test: module => module.context.indexOf('node_modules') !== -1, priority: -1, name: 'vendor', chunks: 'all', enforce: true, }, }, }, minimizer: [ new TerserPlugin({ terserOptions: { keep_fnames: true, }, }), ], };

To speed up the build in this project I use thread-loader - when parallelizing to 4 processes, it gave build acceleration by 90%, which is better than the happypack with similar settings.

Settings for loaders, including for babel, in individual files (like .babelrc ) make, I believe, unnecessary. But the cross-browser compatibility configuration is more convenient to keep in the browserslist parameter of the main package.json , since it is also used for autoprefixer styles.

For convenience, Prettier made the parameter AGGREGATION_TIMEOUT , which allows you to set a delay between detecting changes in files and rebuilding an application in dev-server mode. Since I configured to reformat files when saving to the IDE, this causes 2 rebuilds - the first to save the original file, the second to finish formatting. 2000 milliseconds is usually enough for the webpack to wait for the final version of the file.

The rest of the configuration does not deserve special attention, since it is disclosed in hundreds of training materials for beginners, so you can proceed to the design of the application architecture.

Style themes

Previously, to create themes, you had to do several versions of * .css files and reload the page when changing themes, loading the necessary set of styles. Now everything is easily solved using Custom CSS Properties . This technology is supported by all target browsers of the current application, but there are also polyfills for IE.

Let's say there will be 2 themes - light and dark, the color sets for which will be in

styles / themes.scss

 .light { --n0: rgb(255, 255, 255); --n100: rgb(186, 186, 186); --n10: rgb(249, 249, 249); --n10a3: rgba(249, 249, 249, 0.3); --n20: rgb(245, 245, 245); --n30: rgb(221, 221, 221); --n500: rgb(136, 136, 136); --n600: rgb(102, 102, 102); --n900: rgb(0, 0, 0); --b100: rgb(219, 237, 251); --b300: rgb(179, 214, 252); --b500: rgb(14, 123, 249); --b500a3: rgba(14, 123, 249, 0.3); --b900: rgb(32, 39, 57); --g400: rgb(71, 215, 141); --g500: rgb(61, 189, 125); --g500a1: rgba(61, 189, 125, 0.1); --g500a2: rgba(61, 189, 125, 0.2); --r400: rgb(255, 100, 100); --r500: rgb(255, 0, 0); --r500a1: rgba(255, 0, 0, 0.1); --r500a2: rgba(255, 0, 0, 0.2); } .dark { --n0: rgb(25, 32, 48); --n100: rgb(114, 126, 151); --n10: rgb(39, 46, 62); --n10a3: rgba(39, 46, 62, 0.3); --n20: rgb(25, 44, 74); --n30: rgb(67, 75, 111); --n500: rgb(117, 128, 154); --n600: rgb(255, 255, 255); --n900: rgb(255, 255, 255); --b100: rgb(219, 237, 251); --b300: rgb(39, 46, 62); --b500: rgb(14, 123, 249); --b500a3: rgba(14, 123, 249, 0.3); --b900: rgb(32, 39, 57); --g400: rgb(0, 220, 103); --g500: rgb(0, 197, 96); --g500a1: rgba(0, 197, 96, 0.1); --g500a2: rgba(0, 197, 96, 0.2); --r400: rgb(248, 23, 1); --r500: rgb(221, 23, 1); --r500a1: rgba(221, 23, 1, 0.1); --r500a2: rgba(221, 23, 1, 0.2); }

In order for these variables to be applied globally, they need to be written to document.documentElement , respectively, a small parser is needed to convert this file to a javascript object. Later I will explain why it is more convenient than to store it in javascript right away.

webpack-custom / utils / sassVariablesLoader.js

 function convertSourceToJsObject(source) { const themesObject = {}; const fullThemesArray = source.match(/\.([^}]|\s)*}/g) || []; fullThemesArray.forEach(fullThemeStr => { const theme = fullThemeStr .match(/\.\w+\s{/g)[0] .replace(/\W/g, ''); themesObject[theme] = {}; const variablesMatches = fullThemeStr.match(/--(.*:[^;]*)/g) || []; variablesMatches.forEach(varMatch => { const [key, value] = varMatch.split(': '); themesObject[theme][key] = value; }); }); return themesObject; } function checkThemesEquality(themes) { const themesArray = Object.keys(themes); themesArray.forEach(themeStr => { const themeObject = themes[themeStr]; const otherThemesArray = themesArray.filter(t => t !== themeStr); Object.keys(themeObject).forEach(variableName => { otherThemesArray.forEach(otherThemeStr => { const otherThemeObject = themes[otherThemeStr]; if (!otherThemeObject[variableName]) { throw new Error( `checkThemesEquality: theme ${otherThemeStr} has no variable ${variableName}` ); } }); }); }); } module.exports = function sassVariablesLoader(source) { const themes = convertSourceToJsObject(source); checkThemesEquality(themes); return `module.exports = ${JSON.stringify(themes)}`; };

It also checks the consistency of topics - that is, the full compliance of a set of variables, the difference between which the assembly falls.

When using this loader, a completely beautiful object with parameters is obtained, and a couple of lines are enough for the theme change utility:

src / utils / setTheme.js

 import themes from 'styles/themes.scss'; const root = document.documentElement; export function setTheme(theme) { Object.entries(themes[theme]).forEach(([key, value]) => { root.style.setProperty(key, value); }); }

I prefer to translate these css-variables into standard for * .scss :

src / styles / constants.scss

IDE WebStorm, as seen in the screenshot, shows the colors in the panel on the left and by clicking on a color opens a palette where you can change it. The new color will automatically be substituted into the themes.scss , the Hot Reload will work and the application will instantly change. This is exactly the level of convenience of development, which is expected in 2019.

Principles of code organization

In this project I will adhere to duplication of folder names of components, files and styles, for example:

 . |-- components | |-- Chart | | `-- Chart.js | | `-- Chart.scss | | `-- package.json

Accordingly, package.json will have the content { "main": "Chart.js" } . For components with multiple named exports (for example, utilities), the name of the main file will begin with an underscore:

 . |-- utils | `-- _utils.js | `-- someUtil.js | `-- anotherUtil.js | `-- package.json

And the rest of the files will be exported as:

 export * from './someUtil'; export * from './anotherUtil';

This will get rid of duplicate file names, so as not to get lost in the top ten open index.js / style.scss . You can solve this with plugins for IDE, but why not in a universal way.

Components will be grouped by page, except for common ones like Message / Link, and if possible use named exports (without export default ) to maintain uniformity of names, ease of refactoring and search by project.

Customize the rendering and storage of MobX

The file that serves as the entry point for the Webpack will look like this:

src / app.js

 import './polyfill'; import './styles/reset.scss'; import './styles/global.scss'; import { initSentry, renderToDOM } from 'utils'; import { initAutorun } from './autorun'; import { store } from 'stores'; import App from 'components/App'; initSentry(); initAutorun(store); renderToDOM(App);

As when working with observables, the console displays something like Proxy {0: "btc", 1: "eth", 2: "usd", 3: "test", Symbol(mobx administration): ObservableArrayAdministration} , in polyfills I will make the utility for reduction in a standard type:

src / polyfill.js

 import { toJS } from 'mobx'; console.js = function consoleJsCustom(...args) { console.log(...args.map(arg => toJS(arg))); };

Also, global styles and style normalization for different browsers are connected in the main file, if you have a key for Sentry, errors start to be logged in .env.frontend, MobX storage is created, tracking of changes in parameters is initiated using autorun and the component wrapped in react-hot-loader is mounted in the dom.

The storage itself will be a non-observable class, the parameters of which will be non-observable classes with observable parameters. Thus it is assumed that the parameter set will not be dynamic - therefore, the application will be more predictable. This is one of the few places where JSDoc comes in handy to enable autocompletion in the IDE.

src / stores / RootStore.js

 import { I18nStore } from './I18nStore'; import { RatesStore } from './RatesStore'; import { GlobalStore } from './GlobalStore'; import { RouterStore } from './RouterStore'; import { CurrentTPStore } from './CurrentTPStore'; import { MarketsListStore } from './MarketsListStore'; /** * @name RootStore */ export class RootStore { constructor() { this.i18n = new I18nStore(this); this.rates = new RatesStore(this); this.global = new GlobalStore(this); this.router = new RouterStore(this); this.currentTP = new CurrentTPStore(this); this.marketsList = new MarketsListStore(this); } }

The example of MobX Store can be analyzed using the example of GlobalStore, which at the moment will have the only purpose - to store and install the current style theme.

src / stores / GlobalStore.js

 import { makeObservable, setTheme } from 'utils'; import themes from 'styles/themes.scss'; const themesList = Object.keys(themes); @makeObservable export class GlobalStore { /** * @param rootStore {RootStore} */ constructor(rootStore) { this.rootStore = rootStore; setTheme(themesList[0]); } themesList = themesList; currentTheme = ''; setTheme(theme) { this.currentTheme = theme; setTheme(theme); } }

Sometimes the parameters and the class method manually using decorators set the type, for example:

 export class GlobalStore { @observable currentTheme = ''; @action.bound setTheme(theme) { this.currentTheme = theme; setTheme(theme); } }

But I see no point in this, since the old Proposal class decorators support their automatic transformation, so the following utility suffices:

src / utils / makeObservable.js

 import { action, computed, decorate, observable } from 'mobx'; export function makeObservable(target) { /** *   -   this +    *     * *   -   computed * */ const classPrototype = target.prototype; const methodsAndGetters = Object.getOwnPropertyNames(classPrototype).filter( methodName => methodName !== 'constructor' ); for (const methodName of methodsAndGetters) { const descriptor = Object.getOwnPropertyDescriptor( classPrototype, methodName ); descriptor.value = decorate(classPrototype, { [methodName]: typeof descriptor.value === 'function' ? action.bound : computed, }); } return (...constructorArguments) => { /** * ,   rootStore,   * observable * */ const store = new target(...constructorArguments); const staticProperties = Object.keys(store); staticProperties.forEach(propName => { if (propName === 'rootStore') { return false; } const descriptor = Object.getOwnPropertyDescriptor(store, propName); Object.defineProperty( store, propName, observable(store, propName, descriptor) ); }); return store; }; }

To use, you need to adjust the plugins in loaderBabel.js : ['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-class-properties', { loose: true }] , and in the ESLint settings, set parserOptions.ecmaFeatures.legacyDecorators accordingly parserOptions.ecmaFeatures.legacyDecorators: true . Without these settings, only the class descriptor without a prototype is transferred to the decorator’s target, and despite careful research of the current version of Proposal , I have not found a way to wrap the methods and static properties.

In general, the storage configuration is complete, but it would be good to unlock the potential of MobX autorun. For this, tasks like “wait for a response from the authorization server” or “download translations from the server” are best suited, then write the answers to the stop and directly render the application to the DOM. Therefore, I will run a bit into the future and create a story with localization:

src / stores / I18nStore.js

 import { makeObservable } from 'utils'; import ru from 'localization/ru.json'; import en from 'localization/en.json'; const languages = { ru, en, }; const languagesList = Object.keys(languages); @makeObservable export class I18nStore { /** * @param rootStore {RootStore} */ constructor(rootStore) { this.rootStore = rootStore; setTimeout(() => { this.setLocalization('ru'); }, 500); } i18n = {}; languagesList = languagesList; currentLanguage = ''; setLocalization(language) { this.currentLanguage = language; this.i18n = languages[language]; this.rootStore.global.shouldAppRender = true; } }

As you can see, there are some * .json files with translations, and in the class constructor, asynchronous loading is emulated using setTimeout. When executed in the newly created GlobalStore, this.rootStore.global.shouldAppRender = true put this.rootStore.global.shouldAppRender = true .

Thus, from app.js you need to transfer the rendering function to the autorun.js file:

src / autorun.js

 /* eslint-disable no-unused-vars */ import { autorun } from 'mobx'; import { renderToDOM } from 'utils'; import App from 'components/App'; const loggingEnabled = true; function logReason(autorunName, reaction) { if (!loggingEnabled || reaction.observing.length === 0) { return false; } const logString = reaction.observing.reduce( (str, { name, value }) => `${str}${name} changed to ${value}; `, '' ); console.log(`autorun-${autorunName}`, logString); } /** * @param store {RootStore} */ export function initAutorun(store) { autorun(reaction => { if (store.global.shouldAppRender) { renderToDOM(App); } logReason('shouldAppRender', reaction); }); }

In the initAutorun function, there can be any number of autorun constructions with callbacks that will work only when they themselves initiate and change a variable inside a particular callback. In this case, the console will autorun-shouldAppRender GlobalStore@3.shouldAppRender changed to true; , and caused the application to be rendered in the DOM. A powerful tool that allows you to log all changes in the stack and respond to them accordingly.

Localization and React Hooks

Translation into other languages is one of the most voluminous tasks, in small companies it is often underestimated tenfold, and in large ones it is unnecessarily over-complicated. From its implementation depends on how much nerves and time will not be wasted at once in several departments in the company. I will only touch on the client part in the article with a basis for future integration with other systems.

For the convenience of developing frontend, you must be able to:

set semantic names for constants;
insert dynamic variables;
specify the singular / plural;
easy to connect localization anywhere - by function or reactant component;
;
/ ;
;
() ;
() , .

, , : messages.js ( ) . . ( / ), . ( , , ) . .

, currentLanguage i18n , , .

src/components/TestLocalization.js

 import React from 'react'; import { observer } from 'utils'; import { useLocalization } from 'hooks'; const messages = { hello: '  {count} {count: ,,}', }; function TestLocalization() { const getLn = useLocalization(__filename, messages); return <div>{getLn(messages.hello, { count: 1 })}</div>; } export const TestLocalizationConnected = observer(TestLocalization);

, MobX- , , Connected. , ESLint, .

observer mobx-react-lite/useObserver , HOT_RELOAD React.memo ( PureMixin / PureComponent ), useObserver :

src/utils/observer.js

 import { useObserver } from 'mobx-react-lite'; import React from 'react'; function copyStaticProperties(base, target) { const hoistBlackList = { $$typeof: true, render: true, compare: true, type: true, }; Object.keys(base).forEach(key => { if (base.hasOwnProperty(key) && !hoistBlackList[key]) { Object.defineProperty( target, key, Object.getOwnPropertyDescriptor(base, key) ); } }); } export function observer(baseComponent, options) { const baseComponentName = baseComponent.displayName || baseComponent.name; function wrappedComponent(props, ref) { return useObserver(function applyObserver() { return baseComponent(props, ref); }, baseComponentName); } wrappedComponent.displayName = baseComponentName; let memoComponent = null; if (HOT_RELOAD === 'true') { memoComponent = wrappedComponent; } else if (options.forwardRef) { memoComponent = React.memo(React.forwardRef(wrappedComponent)); } else { memoComponent = React.memo(wrappedComponent); } copyStaticProperties(baseComponent, memoComponent); memoComponent.displayName = baseComponentName; return memoComponent; }

displayName , React- ( stack trace ).

RootStore:

src/hooks/useStore.js

 import React from 'react'; import { store } from 'stores'; const storeContext = React.createContext(store); /** * @returns {RootStore} * */ export function useStore() { return React.useContext(storeContext); }

, observer:

 import React from 'react'; import { observer } from 'utils'; import { useStore } from 'hooks'; function TestComponent() { const store = useStore(); return <div>{store.i18n.currentLanguage}</div>; } export const TestComponentConnected = observer(TestComponent);

TestLocalization — useLocalization:

src/hooks/useLocalization.js

 import _ from 'lodash'; import { declOfNum } from 'utils'; import { useStore } from './useStore'; const showNoTextMessage = false; function replaceDynamicParams(values, formattedMessage) { if (!_.isPlainObject(values)) { return formattedMessage; } let messageWithValues = formattedMessage; Object.entries(values).forEach(([paramName, value]) => { messageWithValues = formattedMessage.replace(`{${paramName}}`, value); }); return messageWithValues; } function replacePlurals(values, formattedMessage) { if (!_.isPlainObject(values)) { return formattedMessage; } let messageWithPlurals = formattedMessage; Object.entries(values).forEach(([paramName, value]) => { const pluralPattern = new RegExp(`{${paramName}:\\s([^}]*)}`); const pluralMatch = formattedMessage.match(pluralPattern); if (pluralMatch && pluralMatch[1]) { messageWithPlurals = formattedMessage.replace( pluralPattern, declOfNum(value, pluralMatch[1].split(',')) ); } }); return messageWithPlurals; } export function useLocalization(filename, messages) { const { i18n: { i18n, currentLanguage }, } = useStore(); return function getLn(text, values) { const key = _.findKey(messages, message => message === text); const localizedText = _.get(i18n, [filename, key]); if (!localizedText && showNoTextMessage) { console.error( `useLocalization: no localization for lang '${currentLanguage}' in ${filename} ${key}` ); } let formattedMessage = localizedText || text; formattedMessage = replaceDynamicParams(values, formattedMessage); formattedMessage = replacePlurals(values, formattedMessage); return formattedMessage; }; }

replaceDynamicParams replacePlurals — , , , , , ..

Webpack — __filename — , , . , — , , . , :

 useLocalization: no localization for lang 'ru' in src\components\TestLocalization\TestLocalization.js hello

ru.json :

src/localization/ru.json

 { "src\\components\\TestLocalization\\TestLocalization.js": { "hello": "  {count} {count: ,,}" } }

, . src/localization/en.json « » setLocalization I18nStore.

«» React Message:

src/components/Message/Message.js

 import React from 'react'; import { observer } from 'utils'; import { useLocalization } from 'hooks'; function Message(props) { const { filename, messages, text, values } = props; const getLn = useLocalization(filename, messages); return getLn(text, values); } const ConnectedMessage = observer(Message); export function init(filename, messages) { return function MessageHoc(props) { const fullProps = { filename, messages, ...props }; return <ConnectedMessage {...fullProps} />; }; }

__filename ( id ), , :

 const Message = require('components/Message').init( __filename, messages ); <Message text={messages.hello} values={{ count: 1 }} />

— useLocalization ( currentLanguage , Message — . , , .

, ( , , , / production). id , messages.js *.json , . ( / ), production. , , .

MobX + Hooks . , backend, , , .

Work with API

( backend, ) — , , . , . :

src/stores/CurrentTPStore.js

 import _ from 'lodash'; import { makeObservable } from 'utils'; import { apiRoutes, request } from 'api'; @makeObservable export class CurrentTPStore { /** * @param rootStore {RootStore} */ constructor(rootStore) { this.rootStore = rootStore; } id = ''; symbol = ''; fullName = ''; currency = ''; tradedCurrency = ''; low24h = 0; high24h = 0; lastPrice = 0; marketCap = 0; change24h = 0; change24hPercentage = 0; fetchSymbol(params) { const { tradedCurrency, id } = params; const { marketsList } = this.rootStore; const requestParams = { id, localization: false, community_data: false, developer_data: false, tickers: false, }; return request(apiRoutes.symbolInfo, requestParams) .then(data => this.fetchSymbolSuccess(data, tradedCurrency)) .catch(this.fetchSymbolError); } fetchSymbolSuccess(data, tradedCurrency) { const { id, symbol, name, market_data: { high_24h, low_24h, price_change_24h_in_currency, price_change_percentage_24h_in_currency, market_cap, current_price, }, } = data; this.id = id; this.symbol = symbol; this.fullName = name; this.currency = symbol; this.tradedCurrency = tradedCurrency; this.lastPrice = current_price[tradedCurrency]; this.high24h = high_24h[tradedCurrency]; this.low24h = low_24h[tradedCurrency]; this.change24h = price_change_24h_in_currency[tradedCurrency]; this.change24hPercentage = price_change_percentage_24h_in_currency[tradedCurrency]; this.marketCap = market_cap[tradedCurrency]; return Promise.resolve(); } fetchSymbolError(error) { console.error(error); } }

, , . fetchSymbol , id , . , — ( @action.bound ), Sentry :

src/utils/initSentry.js

 import * as Sentry from '@sentry/browser'; export function initSentry() { if (SENTRY_URL !== 'false') { Sentry.init({ dsn: SENTRY_URL, }); const originalErrorLogger = console.error; console.error = function consoleErrorCustom(...args) { Sentry.captureException(...args); return originalErrorLogger(...args); }; } }

, :

src/api/_api.js

 import _ from 'lodash'; import { omitParam, validateRequestParams, makeRequestUrl, makeRequest, validateResponse, } from 'api/utils'; export function request(route, params) { return Promise.resolve() .then(validateRequestParams(route, params)) .then(makeRequestUrl(route, params)) .then(makeRequest) .then(validateResponse(route, params)); } export const apiRoutes = { symbolInfo: { url: params => `https://api.coingecko.com/api/v3/coins/${params.id}`, params: { id: omitParam, localization: _.isBoolean, community_data: _.isBoolean, developer_data: _.isBoolean, tickers: _.isBoolean, }, responseObject: { id: _.isString, name: _.isString, symbol: _.isString, genesis_date: v => _.isString(v) || _.isNil(v), last_updated: _.isString, country_origin: _.isString, coingecko_rank: _.isNumber, coingecko_score: _.isNumber, community_score: _.isNumber, developer_score: _.isNumber, liquidity_score: _.isNumber, market_cap_rank: _.isNumber, block_time_in_minutes: _.isNumber, public_interest_score: _.isNumber, image: _.isPlainObject, links: _.isPlainObject, description: _.isPlainObject, market_data: _.isPlainObject, localization(value, requestParams) { if (requestParams.localization === false) { return true; } return _.isPlainObject(value); }, community_data(value, requestParams) { if (requestParams.community_data === false) { return true; } return _.isPlainObject(value); }, developer_data(value, requestParams) { if (requestParams.developer_data === false) { return true; } return _.isPlainObject(value); }, public_interest_stats: _.isPlainObject, tickers(value, requestParams) { if (requestParams.tickers === false) { return true; } return _.isArray(value); }, categories: _.isArray, status_updates: _.isArray, }, }, };

request :

apiRoutes ;
, route.params, , omitParam ;
URL route.url — , , — get- URL;
fetch, JSON;
, route.responseObject route.responseArray ( ). , — , ;
/ / / , ( fetchSymbolError ) .

. , Sentry, response:

— ( ), .

, , . , :

;
pathname search;
/ ;
location ;
beforeEnter, isLoading, ;
: , , , beforeEnter, ;
/ ;
/ ;
.

«», -, — . :

src/routes.js

 export const routes = { marketDetailed: { name: 'marketDetailed', path: '/market/:market/:pair', masks: { pair: /^[a-zA-Z]{3,5}-[a-zA-Z]{3}$/, market: /^[a-zA-Z]{3,4}$/, }, beforeEnter(route, store) { const { params: { pair, market }, } = route; const [symbol, tradedCurrency] = pair.split('-'); const prevMarket = store.marketsList.currentMarket; function optimisticallyUpdate() { store.marketsList.currentMarket = market; } return Promise.resolve() .then(optimisticallyUpdate) .then(store.marketsList.fetchSymbolsList) .then(store.rates.fetchRates) .then(() => store.marketsList.fetchMarketList(market, prevMarket)) .then(() => store.currentTP.fetchSymbol({ symbol, tradedCurrency, }) ) .catch(error => { console.error(error); }); }, }, error404: { name: 'error404', path: '/error404', }, };

src/routeComponents.js

 import { MarketDetailed } from 'pages/MarketDetailed'; import { Error404 } from 'pages/Error404'; export const routeComponents = { marketDetailed: MarketDetailed, error404: Error404, };

, , — <Link route={routes.marketDetailed}> , . Webpack , .

, location .

src/stores/RouterStore.js

 import _ from 'lodash'; import { makeObservable } from 'utils'; import { routes } from 'routes'; @makeObservable export class RouterStore { /** * @param rootStore {RootStore} */ constructor(rootStore) { this.rootStore = rootStore; this.currentRoute = this._fillRouteSchemaFromUrl(); window.addEventListener('popstate', () => { this.currentRoute = this._fillRouteSchemaFromUrl(); }); } currentRoute = null; _fillRouteSchemaFromUrl() { const pathnameArray = window.location.pathname.split('/'); const routeName = this._getRouteNameMatchingUrl(pathnameArray); if (!routeName) { const currentRoute = routes.error404; window.history.pushState(null, null, currentRoute.path); return currentRoute; } const route = routes[routeName]; const routePathnameArray = route.path.split('/'); const params = {}; routePathnameArray.forEach((pathParam, i) => { const urlParam = pathnameArray[i]; if (pathParam.indexOf(':') === 0) { const paramName = pathParam.replace(':', ''); params[paramName] = urlParam; } }); return Object.assign({}, route, { params, isLoading: true }); } _getRouteNameMatchingUrl(pathnameArray) { return _.findKey(routes, route => { const routePathnameArray = route.path.split('/'); if (routePathnameArray.length !== pathnameArray.length) { return false; } for (let i = 0; i < routePathnameArray.length; i++) { const pathParam = routePathnameArray[i]; const urlParam = pathnameArray[i]; if (pathParam.indexOf(':') !== 0) { if (pathParam !== urlParam) { return false; } } else { const paramName = pathParam.replace(':', ''); const paramMask = _.get(route.masks, paramName); if (paramMask && !paramMask.test(urlParam)) { return false; } } } return true; }); } replaceDynamicParams(route, params) { return Object.entries(params).reduce((pathname, [paramName, value]) => { return pathname.replace(`:${paramName}`, value); }, route.path); } goTo(route, params) { if (route.name === this.currentRoute.name) { if (_.isEqual(this.currentRoute.params, params)) { return false; } this.currentRoute.isLoading = true; this.currentRoute.params = params; const newPathname = this.replaceDynamicParams(this.currentRoute, params); window.history.pushState(null, null, newPathname); return false; } const newPathname = this.replaceDynamicParams(route, params); window.history.pushState(null, null, newPathname); this.currentRoute = this._fillRouteSchemaFromUrl(); } }

— routes.js . — 404. , « », , , — , 'test-test'.

currentRoute , params ( URL) isLoading: true . React- Router:

src/components/Router.js

 import React from 'react'; import _ from 'lodash'; import { useStore } from 'hooks'; import { observer } from 'utils'; import { routeComponents } from 'routeComponents'; function getRouteComponent(route, isLoading) { const Component = routeComponents[route.name]; if (!Component) { console.error( `getRouteComponent: component for ${ route.name } is not defined in routeComponents` ); return null; } return <Component isLoading={isLoading} />; } function useBeforeEnter() { const store = useStore(); const { currentRoute } = store.router; React.useEffect(() => { if (currentRoute.isLoading) { const beforeEnter = _.get(currentRoute, 'beforeEnter'); if (_.isFunction(beforeEnter)) { Promise.resolve() .then(() => beforeEnter(currentRoute, store)) .then(() => { currentRoute.isLoading = false; }) .catch(error => console.error(error)); } else { currentRoute.isLoading = false; } } }); return currentRoute.isLoading; } function Router() { const { router: { currentRoute }, } = useStore(); const isLoading = useBeforeEnter(); return getRouteComponent(currentRoute, isLoading); } export const RouterConnected = observer(Router);

, , currentRoute == null . — isLoading === true , false , route.beforeEnter ( ). console.error , , .

, — , . React- 2 :

componentWillMount / componentDidMount / useEffect , , . — , «». — — ;
( ) , . — — , . — / — real-time , / .

, — ( , , ..), .

beforeEnter , : « », ( , , ), — ( — 500 ; ; , ; ..). «» , MVP .

src/components/Link.js

 import React from 'react'; import _ from 'lodash'; import { useStore } from 'hooks'; import { observer } from 'utils'; function checkRouteParamsWithMasks(route, params) { if (route.masks) { Object.entries(route.masks).forEach(([paramName, paramMask]) => { const value = _.get(params, paramName); if (paramMask && !paramMask.test(value)) { console.error( `checkRouteParamsWithMasks: wrong param for ${paramName} in Link to ${ route.name }: ${value}` ); } }); } } function Link(props) { const store = useStore(); const { currentRoute } = store.router; const { route, params, children, onClick, ...otherProps } = props; checkRouteParamsWithMasks(route, params); const filledPath = store.router.replaceDynamicParams(route, params); return ( <a href={filledPath} onClick={e => { e.preventDefault(); if (currentRoute.isLoading) { return false; } store.router.goTo(route, params); if (onClick) { onClick(); } }} {...otherProps} > {children} </a> ); } export const LinkConnected = observer(Link);

route , params ( ) ( ) href . , beforeEnter , . «, », , — .

- ( , , , , ) . . .

— , — , . :

src/api/utils/metrics.js

 import _ from 'lodash'; let metricsArray = []; let sendMetricsCallback = null; export function startMetrics(route, apiRoutes) { return function promiseCallback(data) { clearTimeout(sendMetricsCallback); const apiRouteName = _.findKey(apiRoutes, route); metricsArray.push({ id: apiRouteName, time: new Date().getTime(), }); return data; }; } export function stopMetrics(route, apiRoutes) { return function promiseCallback(data) { const apiRouteName = _.findKey(apiRoutes, route); const metricsData = _.find(metricsArray, ['id', apiRouteName]); metricsData.time = new Date().getTime() - metricsData.time; clearTimeout(sendMetricsCallback); sendMetricsCallback = setTimeout(() => { console.log('Metrics sent:', metricsArray); metricsArray = []; }, 2000); return data; }; }

middleware request :

 export function request(route, params) { return Promise.resolve() .then(startMetrics(route, apiRoutes)) .then(validateRequestParams(route, params)) .then(makeRequestUrl(route, params)) .then(makeRequest) .then(validateResponse(route, params)) .then(stopMetrics(route, apiRoutes)) .catch(error => { stopMetrics(route, apiRoutes)(); throw error; }); }

, , 2 , ( ) . — , — , ( ) , .

- — .

end-to-end , Cypress. : ; , ; Continious Integration.

javascript Chai / Sinon , . , , — ./tests, package.json — "dependencies": { "cypress": "3.2.0" }

. Webpack :

tests/cypress/plugins/index.js

 const webpack = require('../../../node_modules/@cypress/webpack-preprocessor'); const webpackConfig = require('../../../webpack-custom/webpack.config'); module.exports = on => { const options = webpack.defaultOptions; options.webpackOptions.module = webpackConfig.module; options.webpackOptions.resolve = webpackConfig.resolve; on('file:preprocessor', webpack(options)); };

. module ( ) resolve ( ). ESLint ( describe , cy ) eslint-plugin-cypress . , :

tests/cypress/integration/mixed.js

 describe('Market Listing good scenarios', () => { it('Lots of mixed tests', () => { cy.visit('/market/usd/bch-usd'); cy.location('pathname').should('equal', '/market/usd/bch-usd'); //    ,       cy.wait('@symbolsList') .its('response.body') .should(data => { expect(data).to.be.an('array'); }); //    cy.wait('@rates'); cy.wait('@marketsList'); cy.wait('@symbolInfo'); cy.wait('@chartData'); //       cy.get('#marketTab-eth').click(); cy.location('pathname').should('equal', '/market/eth/bch-usd'); cy.wait('@rates'); cy.wait('@marketsList'); //    cy.contains(''); cy.get('#langSwitcher-en').click(); cy.contains('Markets list'); //    cy.get('body').should('have.class', 'light'); cy.get('#themeSwitcher-dark').click(); cy.get('body').should('have.class', 'dark'); }); });

Cypress fetch, , :

tests/cypress/support/index.js

 import { apiRoutes } from 'api'; let polyfill = null; before(() => { const polyfillUrl = 'https://unpkg.com/unfetch/dist/unfetch.umd.js'; cy.request(polyfillUrl).then(response => { polyfill = response.body; }); }); Cypress.on('window:before:load', window => { delete window.fetch; window.eval(polyfill); window.fetch = window.unfetch; }); before(() => { cy.server(); cy.route(`${apiRoutes.symbolsList.url}**`).as('symbolsList'); cy.route(`${apiRoutes.rates.url}**`).as('rates'); cy.route(`${apiRoutes.marketsList.url}**`).as('marketsList'); cy.route(`${apiRoutes.symbolInfo.url({ id: 'bitcoin-cash' })}**`).as( 'symbolInfo' ); cy.route(`${apiRoutes.chartData.url}**`).as('chartData'); });