React is the core of this article, and Vue and Angular are not considered for the moment, so I will not comment too much. If you find that they have special advantages, please add them.
1. The tool
1.1. Basic
1.1.1. The yarn/NPM
Yarn is recommended, which is faster, easier to use, and supports advanced features such as workspace. Both should be set to use Taobao mirror (npm.taobao.org/), otherwise very slow.
1.1.2. NPM – check – update (ncu)
Github.com/tjunnone/np… It is used to check the upgrade of the dependent library. The front-end development speed is too fast, so it is necessary to follow up important third-party dependent versions frequently. First, it is necessary to solve hidden bugs, and second, it is necessary to prevent API incompatibility and upgrade difficulties caused by long-term non-tracking.
1.1.3. lerna/yarn workspace
Lernajs. IO/yarnpkg.com/en/docs/wor… Optional. Large project or class library project organization structure, Lerna currently has many well-known projects are used. It is not consistent with the micro-front-end architecture we are currently looking at and may be used on a small scale.
1.1.4. Create – react – app
Github.com/facebook/cr… Create-react-app is becoming more mainstream. It’s official facebook stuff, after all.
1.2. Development
1.2.1. The IDE – webStrom/vscode
VSCode, free and open source, rich plug-ins, strong customization ability, good momentum of development. More commonly used plug-in has EditorConfig, Prettier, TODO Highlight, Trailing Spaces, ESlint, Jest, Node. Js ExtensionPack, Debugger for Chrome, Git The Extension Pack, etc., can be the reference here: www.tuicool.com/articles/FV… WebStorm is smart, efficient, and has a relatively large number of plugins and high quality. VSCode is also good for Java development, as well as Flutter support.
1.2.2. Build packaging – Webpack
Webpack is a no-brainer, with a vibrant community and fast updates. Vue, Angular, and React scaffolding all use Webpack
1.2.3. Code reviews – eslint/editorconfig/prettier/husky/tslint
Eslint is checked in real time with VSCode plugins. For coding styles, editorconfig and prettier are used together with VSCode plugins for standardization. Eslint used Airbnb’s rule library, Google used it too, but found many rules too restrictive and had to write a lot of ignored rules, so it was easier to use create-React-app’s recommendation rule, or prettier, instead. Also, use husky (github.com/typicode/hu… Lint checks before commit to prevent bad code from being committed to the code base. Those using TS can use tsLint
1.3 debugging
Use hot-Reload development service and source-Map provided by WebPack, make use of the debugging capabilities of Chrome, and combine with relevant development tool plug-ins: (github.com/facebook/re…) (github.com/reduxjs/red…). (github.com/mobxjs/mobx…). If you need to interconnect with the background API service, you can use the React-app-Rewired configuration WebPack devServer to do the reverse proxy. Webpack.js.org/configurati…
1.4 test
TODO: Lack of integration testing, E2E testing and other related tools
1.4.1. Unit testing
There are many front-end testing frameworks. Currently, the mainstream is Jest and Jest-DOM, mainly because it comes with create-React-app and Facebook, as well as the react-testing-library. Other common assertion libraries are Mocha, Jasmine, Ava, etc., and Chai/Sinon etc., which are basically the same.
1.4.2. Component testing
It is worth mentioning that there are two high-level test frameworks developed for the React component: airbnb. IO /enzyme/ storybook.js.org/. We have not used them yet, mainly because there are few unit tests written and engineering has not kept up.
1.4.3. Data tools
There is also a variety of Mock libraries, not much use, Jest is basically enough, and there is ajax Mock library: github.com/ctimmerm/ax… This is used in conjunction with the AXIos library tests. There are also data related test auxiliary generation tools, such as: github.com/marak/Faker…
1.5. The deployment
At present, all product deployments have been Docker-like, the front end runs in the Nginx container, and the build version generated by WebPack is automatically packaged into the Nginx image through the CI function of GitLab. The early use of Node to do the Web server, with PM2 process management, are now out of the way.
2. The component
Core 2.1.
2.1.1. Basic framework
The react not explain
2.1.2. State management
MobX (mobx.js.org/).
2.1.3. Front-end routing
At present the react – the router (reacttraining.com/react-route…). It’s almost a de facto standard, although its 4-3 improvement doesn’t make a lot of sense because front-end routing is state management at heart, but it takes a step backwards by coupling events like onEnter and onLeave to use component life cycles. Actually like https://github.com/nareshbhatia/mobx-state-router routing idea is right, just as the react – the router on the powerful, the most main is lack of nesting. Therefore, the React-router will definitely be used for the time being, but it can be replaced in the future if something better comes along.
Interface of 2.2.
2.2.1. Basic kits
Until we had the manpower to develop our own component library, using some large third-party suites helped to get the product up and running quickly and maintain the interface. Currently, ANTD (Ant.Design/index-CN) is our main UI library, with built-in components that solve more than 80 to 90 percent of prototyping problems and allow for a degree of interface style customization by modifying less variables. Antd has verified some other suites before, one of which is also ali (I forgot the name and address, antD considered it two years ago when antD table did not support multilevel table headers), and http://amazeui.org/, etc. Finally, ANTD won in terms of component integrity and ease of use. Here are some resources: mp.weixin.qq.com/s/JFn64E1wR…
The main difference between ANTD and THE UI framework is that it can customize components, such as the text, border, size, rounded corner, shadow, etc. of each UI component can be customized, and then input the style file for co-development. There is no need to modify the component style for development. Visual interaction designers can develop directly when they’re done.
2.2.2. CSS in JS
In addition to webpack itself directly introducing CSS /less files, there are several tools that can make CSS writing more efficient: TypeStyle and CSstips TypeStyle.github. IO /), which are especially useful for Flex layout control. JSS is recommended, but not recommended directly. It is recommended to use excellent open source UI frameworks for JSS encapsulation, @material- UI /styles and @Material – UI/System, which can save a lot of CSS writing
2.2.3. Graph library
Baidu’s ECharts and React Package (echarts.baidu.com) (github.com/hustcc/echa…) Recommend using antV. After all, is the visualization of the big company product solutions, recommend encapsulated with the react version bizCharts (bizcharts.net/products/bi…). There are some resources: mp.weixin.qq.com/s/jdPgWwSEV…
2.2.4. Symbol library
Antd comes with a small number of ICONS, most of which still use the Ari icon library (www.iconfont.cn/), but it’s a little tricky to use. For the most part, react-icons(react-icons.netlify.com/) will suffice. It contains the Font Awesome (fontawesome.com/) and the Material Design ICONS (Google. Making. IO/Material – DE… Open source icon library.
Around 2.3.
2.3.1. Data access
Currently we are using fetch(github.github. IO /fetch/). We are going to change to Axios (github.com/axios/axios), which is better in terms of usability and has a simpler mock scheme for easy testing.
Internationalization of 2.3.2.
Antd uses react-intl github.com/yahoo/react… It’s also recommended by default on creatre-React-app, but it doesn’t feel particularly flexible. Prepare to adopt i18Next related solutions: (github.com/i18next/i18…) (github.com/dmtrKovalen…). This solution can also be used on nodes, enabling both front and back ends to use the same locale mapping file.
2.3.3. Common Tools
-
The most used gadget in the entire front-end, including Node code, is LoDash, which replaced the older underscore but is now being replaced by Ramda. Ramda is not as well known as Lodash, but starts at a high level, equivalent to Lodash/FP. Makes the code very concise in front-end functional programming and can be used directly in imperative mode with just one more parameter, beating LoDash. (lodash.com/) (ramdajs.com/)
-
Moment is the most important tool in the moment library, but you use it more indirectly (date control), mainly for date formatting and calculation. (momentjs.com/)
-
There is another kind of tool is data verification tool, currently not much directly used, mainly using ANTD encapsulation form verification, but its internal library verification rules or worth knowing: (github.com/yiminghe/as…) (github.com/skaterdav85…). The last one is a validation tool for mobx’s other form validation mechanism, which may be used to replace ANTD’s.
3. The other
3.1. The WebSocket
(socket. IO /) and (github.com/socketio/so…). Socket.io is still the most popular
3.2. JWT
(JWT. IO /) and (github.com/auth0/jwt-d…). The front-end identity authentication uses JWT scheme, combines fetch/ AXIOS to transmit authentication information through HTTP protocol headers, and carries out payload resolution on the client.
3.3. The Service Worker
This is currently being used passively through the create-React-app framework. It is a performance optimization and has not been carefully studied.
3.4. GraphQL
(facebook. Making. IO/relay /), (www.apollographql.com/) for the two solution technology demonstration, feel it’s not yet time to put into production, how is not clear now.
3.5. NodeJS
NodeJS’s role in front-end development is mainly API transfer and data format conversion processing, and the real backend services are still in Java side. Before, NodeJS was heavily used, including database access, scheduled task, message push, audio and video interface and a large number of other functions. However, it was later found that the effect was not good, mainly due to insufficient human resources and poor code quality. If you still have a small amount of Node code, prepare to use Ali’s egg framework: eggjs.org/
3.6. Micro-front-end architecture
It is the front end microservitization, which is currently the focus of research and is still in the prototype verification stage. We are ready to start on the basis of single-SPA, which is the most realistic solution we can find at present: Single-spa.js.org/, (single-spa.js.org/), (alili. Tech /tags/ single-spa.js.org/) and if you’ve got any good data or ideas in this area, we can research them together; this is one of the single-spa.js.org/ technology frameworks.