In the eight months since, the 2.0 development project has continued, with the help of the 38 contributors who initiated PR for the V2 release, 600 Commits, and an overall architecture upgrade to the new Ant Design Pro 2.0. In this release we bring four new pages, multiple layouts to enrich the Pro usage scenario, switch scaffolding from RoadHog to Umi2, and add a cool Settings drawer. See Preview.pro.ant. Design for the preview screen.

😘 brand new page

As the most influential web design specification in Xihu District, elegant and beautiful, well-designed interface has always been our main advantage. In V2 we also brought a series of interface updates and optimizations, introducing four new interfaces:

  • Step dialog box
  • Information entry dialog box
  • Personal center
  • Personal Settings

🎨 New layout and theme

With V2 we have a variety of built-in layouts, you can combine a variety of interfaces with simple configurations to suit your needs, and there is always one for you. To make it easier for you to see the results quickly, we’ve developed a cool Settings drawer to switch themes and layouts. After confirming the effect, you can copy the Settings and set them as default, change the theme so easy, and more importantly, the whole process is online, no need to restart the scaffolding, immediately visible.

⚡ Scaffold switch to UMI

Umi, pronounced “ummi” in Chinese, is a pluggable enterprise react application framework. Umi is based on routing, with support for reduced-form routing of the class Next-.js, and various advanced routing capabilities, which are extended by, for example, on-demand routing. Then with a complete plug-in system, covering every life cycle from source code to build products, support a variety of functional extension and business requirements, the current internal and external combined with more than 50 plug-ins.

Umi is the underlying front-end framework of Ant Financial, which has directly or indirectly served hundreds of applications, including Java, Node, H5 wireless, offline (Hybrid) applications, pure front-end assets applications, CMS applications, etc. It has served our internal users well, and hopefully it will serve our external users well as well. It contains the following features:

  • 📦 out of the box, built-in react, react-router, etc
  • The 🏈 class next. Js has a fully functional routing convention and supports the configured routing mode
  • 🎉 complete plug-in architecture covering every lifecycle from source code to build artifacts
  • 🚀 High performance, plugins support PWA, routing based code splitting, etc
  • 💈 supports static page export for various environments, such as middle-Taiwan service, wireless service, egg, Alipay Wallet, cloud phoenix Butterfly, etc
  • 🚄 development start fast, support a key open DLL and hard-source-webpack-plugin, etc
  • 🐠 one-click compatibility to IE9, based on UMi-plugin-polyfills
  • 🍁 Complete TypeScript support, including D. ts definitions and UMI test
  • 🌴 deep integration with DVA data streams, support for Duck Directory, model autoload, Code splitting, and more
  • 🐱 Supports on-demand component loading

In Pro we provide some more advanced components that are encapsulated, and in V2 we also provide the ability to load on demand with the following configuration in babel-plugin-import:

{
    libraryName: 'ant-design-pro'.libraryDirectory: 'lib'.style: true.camel2DashComponentName: false,}Copy the code

You can use the Pro component just like antD, which we highly recommend to significantly reduce the package size.

import { Result } from 'ant-design-pro';
ReactDOM.render(<Result type="success" />, mountNode);
Copy the code

🌏 Best practices for internationalization

The best practices for umi-plugin-locale internationalization are provided in V2. Just introduce js in SRC /locales, such as en-us.js and zh-cn.js, and you can happily use the capabilities of internationalization in your code.

import {
  formatMessage,
  setLocale,
  getLocale,
  FormattedMessage,
} from 'umi/locale';

export default() = > {return <div><FormattedMessage id="test" /></div>
}
Copy the code

🥇 Looking to the future

We will continue to focus on pro’s performance and ease of use in the future. In addition, I will work with UMI to explore the material aspects of components, and continue to improve the documents to reduce the cost of use. More good-looking and easy to use will be the direction of our efforts.

Special thanks from 🤝

Thanks to everyone who submitted errors, initiated PR, responded to questions, wrote documents, etc! Special thanks to the following community friends @yoyo837 @Xiaohuoni @zhangxiuling @Kaoding, and 38 contributors who initiated PR for V2, your participation made pro V2 launch a reality.

If you encounter any problems with Ant Design Pro, feel free to submit your problems on GitHub.

Thank you for reading, please install, try. 🎉

The original link