- Node.js Basic front-end development environment
- Webpack A must-learn and must-know packaging tool for the front end
- React Router routing library
- proxy Reverse proxy tool
- dva Lightweight application framework
- fabric Strict but not strict lint rule set
- Ant Design Front-end component library
- Ant Design Chart Simple and easy to use React chart library
- ProComponents template components
- useModel Simple Data Flow
- Runtime and compile time
This document is for users who use the front-end framework for the first time. If you already know about umi, Ant Design, webpack and other development tools, you can quickly skip it.
Ant Design Pro is striving to provide an out-of-the-box development experience, for which we offer a complete scaffolding involving the internationalization of the world, Permissions, the mock, the data stream, the network requests Best practices are provided for scenarios common in these backgrounds to reduce learning and development costs.
At the same time, to provide a more efficient development experience, we have provided a number of column heavy components, ProLayout, ProTable, and ProList are good helpers in the background in development, significantly reducing boilerplate code.
Let's take a big look at the architecture of the entire Ant Design Pro in the big picture below.
After we just started running the project, we can see an interface. Although easy development is fine, if we understand some basic knowledge, our development will be smoother and debugging will be easier.
Node.js Basic front-end development environment
Webpack A must-learn and must-know packaging tool for the front end
Webpack can help us accomplish some tasks. Such as js compression, css compression, compiling template files, etc., thereby reducing the workload of the front-end. Of course, Webpack is very powerful, and it can help us accomplish far more than these. If we use umi, it can greatly simplify the configuration of webpack, but it is still recommended to learn the basics to facilitate debugging and customize some configurations.
React Router routing library
React Router is a powerful routing library based on React, which allows you to quickly add views and data streams to your application, while keeping pages and URLs in sync. React Router can convert the location into a state to help us manage all the states related to routing.
proxy Reverse proxy tool
With the development of more and more biased front-end separation, we will inevitably encounter the problem of cross-domain during development. Proxy can be a perfect reverse proxy. As one of the main functions of webpack-dev-server, proxy can help us proxy to any server, Solve cross-domain problems encountered in development.
dva Lightweight application framework
dva is first a data flow solution based on redux and redux-saga, and then In order to simplify the development experience, dva also built-in react-router and fetch, so It can be understood as a lightweight application framework.
fabric Strict but not strict lint rule set
Pro has built-in fabric as a coding standard. Fabric provides a strict but not strict lint rule set, including eslint, stylelint, prettier three tools can significantly improve code quality and standardize code style.
Ant Design Front-end component library
Ant Design is an enterprise-level UI design language and React component library. As the best component library in Xihu District, it greatly improves the efficiency of middle and back-end development and is widely loved by developers at home and abroad.
Ant Design Chart Simple and easy to use React chart library
Ant Design Charts is an out-of-the-box, easy-to-configure, general-purpose statistical chart library with good visual and interactive experience. It is based on g2's high-interaction visualization graphics grammar and presets the configuration. One component can realize a variety of complex charts.
ProComponents template components
ProComponents is more standardized than Ant Design. As a template component, a single component can be used to build a page. At the expense of some degrees of freedom, the efficiency of CRUD can be improved a hundredfold. If tables and forms are dominant in your project, it is recommended to use ProComponents to complete the development.
Simple data flow is a simple data management solution based on the hooks paradigm (some scenarios can replace dva), which is usually used for global shared data of middle and Taiwan projects. In the middle and back-end development, we often do not need to share a lot of data, only user information or part of the data sent by the back-end, simple data flow and initialization data can solve 90% of the scenes, and it is cheaper and better to use natural.
The base of Pro is based on umi. Compared with webpack, umi increases runtime-related capabilities. Sometimes it may be difficult for us to distinguish it during development.
-Compile time refers to what the code does when it is compiled. The environment at this stage is generally the node environment, and functions such as fs and path can be used. But at the same time, because webpack is not used, jsx, the ability to introduce pictures and other non-node capabilities is not available. -Runtime refers to the stage where the code has been compiled and started to run. This stage is generally in the browser environment, and functions such as fs and path cannot be used. There will be cross-domain problems when accessing the URL. However, this environment has been compiled by webpack, so it can Write jsx, import pictures and other functions.
The above two environments are easy to confuse. Here is a easy version. The src folder contains all the runtime code, which will be compiled by webpack. Other directories can be considered to be able to use node capabilities when compiling. This is why we cannot write JSX in config.ts.
Compared with webpack, umi has increased runtime capabilities and helped us configure many webpack presets. It also reduces the problems caused by webpack upgrades. This is why we can provide plug-ins.
- plugin-access, authority management
- plugin-analytics, statistics management
- plugin-antd, integrate antd UI components
- plugin-initial-state, initialize data management
- plugin-layout, configure the layout to enable ant-design-pro
- plugin-locale, internationalization capability
- plugin-model, a easy data flow based on hooks
- plugin-request, a request scheme based on umi-request and umi-hooks
If you don't like the default configuration of umi, you can check here to see if there is any configuration you like. If you still can’t meet the requirements, you need to customize webpack. chainWebpack can customize the built-in webpack configuration.
Webpack also has version requirements for node, and different webpacks have different dependencies on node versions, so the best way is to upgrade to the latest long-term maintenance version.