react and vue technology stack
The following comparison chart can clearly compare the technology stacks of Vue and React. Frameworks are just tools, and their purpose is to solve the same business problems. Therefore, from a macro perspective, it is found that the surrounding and supporting points of Vue and React are basically the same.
react family bucket
react
react-router
React Router is a complete React routing solution.
Documentation: Introduction | React Router Chinese Documentation
react-redux
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.
文档: React Redux | Redux
react-saga
An intuitive Redux side effect manager. Easy to manage, easy to test, and executes efficiently.
文档: https://redux-saga.js.org
ant design
( https://cdn.nlark.com/yuque/0/2021/png/12409758/1618210820161-dbf5414a-f232-4dd3-bee3-97c8595b1b2e.png#averageHue=%23e1ecf6&height=34&id=E9mXj&originHeight=68& originWidth =232&originalType=binary&ratio= 1&rotation=0&showTitle=false&size=6393&status=done&style=none&title=&width=116 ) antd is a React UI component library based on the Ant Design design system. It is mainly used to develop enterprise-level middle and back-end products.
Website: https://ant.design
ant design pro
Ant Design Pro is an enterprise-level mid- and back-end front-end/design solution.
Website: https://pro.ant.design
React in actual development
DvaJs
Website: https://dvajs.com
Why dva ?
After a period of self-study or training, everyone should be able to understand the concept of redux and recognize that this data flow control can make the application more controllable and the logic clearer.
But then there are usually questions like this: there are too many concepts, and reducers, saga, and actions are all separated (divided into files).
The problem this brings is:
- The editing cost is high and you need to switch back and forth between reducer, saga, and action.
- It is not convenient to organize the business model (or domain model). For example, after we write a userlist, we need to copy a lot of files to write a productlist.
And some others:
- Writing saga is too complicated. Every time you listen to an action, you need to go through the process of fork -> watcher -> worker.
- entry writing trouble
- …
And dva is used to solve these problems.
What is dva?
dva is a lightweight package based on the existing application architecture (redux + react-router + redux-saga, etc.). It does not introduce any new concepts and the total code is less than 100 lines. (Inspired by elm and choo.)
dva is a framework, not a library. Similar to emberjs, it will clearly tell you how each component should be written, which will be more controllable for the team. In addition, except react and react-dom which are peerDependencies, dva encapsulates all other dependencies.
In dva implementation, try not to create new syntax, but use the syntax of the dependent library itself. For example, the definition of router still uses the JSX syntax of react-router (dynamic config is a performance consideration and will be supported later).
picture
UmiJs
Website: https://umijs.org
What is Umi?
Umi, which can be pronounced as Wumi in Chinese , is a scalable enterprise-level front-end application framework. Umi is based on routing and supports both configured routing and conventional routing to ensure complete routing functions and expand functions accordingly. Then it is equipped with a plug-in system with a complete life cycle, covering every life cycle from source code to built products, supporting various functional expansions and business needs.
Umi is the underlying front-end framework of Ant Financial and has directly or indirectly served 3,000+ applications, including java, node, H5 wireless, offline (Hybrid) applications, pure front-end assets applications, CMS applications, etc. He has served our internal users well, and I hope he can also serve our external users well.
picture
