It’s been two years since the last Pro was released, and the front-end ecology has changed a bit in the last two years. Low-code has become popular, Bundleless has become popular with Snowpack, Vite, and the front-end has developed best practices in terms of internationalization, permissions, data streaming, and layout. Ant Design Pro is dedicated to improving the middle and back end development experience, and we have come up with our own solutions in these areas.

Based on the above issues, we have provided five major feature updates, namely best practices, template components, compile speed, project integration components, and ** OpenAPI, which I will describe in detail next.

🍣 Best Practices

In V5 we abstractions the common areas of the background based on both internal and external experience. The Ant Design Pro development framework is based on UMI. In V5 we provide a set of best practices for the background through a series of UMI plug-ins. Pro comes with the following plugins:

  • Plugin-access, permission management
  • Plugin-antd, which integrates antD UI components
  • Plugin-initial-state: initializes data management
  • Plugin-layout enables the ant-design-pro layout
  • Plugin-locale, internationalization capability
  • Plugin-model, easy data flow based on hooks
  • Plugin-request is a request scheme based on UMI-request and UMI-hooks

All of these plugins support quick shutdowns, making it easy to combine these capabilities. Based on the runtime capabilities of UMI, these apis can be directly exported from UMI.

// Export internationalization, data flow, permissions, network requests from one place
import { useModel, request, useAccess, getLocale, useIntl } from "umi";
Copy the code

📯 Data stream plug-in

For the past few years, the front end has been using Redux as the default data flow solution, but the redux series has been plagued by boilerplate code and poor code hints, resulting in a poor development experience. Although Redux is powerful, there is less global public data in the middle and background development, and there is no more complex data flow. In V5, we have introduced a lightweight data flow solution, plugin-Model, inspired by hooks.

Plugin-model provides apis for hooks schemes and real-time TypeScript prompts based on UMI’s runtime capabilities.

import { useModel } from "umi";

export default() = > {const { user, fetchUser } = useModel("user");
  return <div>{user.name}</div>;
};
Copy the code

🌎 Internationalizing plug-ins

Internationalization has always been an important feature, not needed by some users, but essential to others. So internationalization is built into Pro. In V5 we have a much simpler API, we can export all of the REact-Intl API from UMI.

import React, { useState } from "react";
import { useIntl } from "umi";

export default function () {
  const intl = useIntl();
  return (
    <button type="primary">{intl.formatMessage({id: "name", defaultMessage: "Hello ",})}</button>
  );
};
Copy the code

To accommodate users who don’t want to just internationalize, we provide the i18n-remove command to remove all internationals.

npm run i18n-remove 
Copy the code

🖥️ Template components

Template components have been the focus of our work in the last year. As early as the first version of Pro we provided a series of blocks to help users develop pages. In 2.0 we also provided umi UI to manage blocks. However, in the actual use, we found that the block start-up cost is high and the coupling is too strong. It didn’t go down well.

In 2.0 we added ProLayout and we got great feedback from the community. ProLayout gave us an idea if we could abstract our common pages in the same way as abstract Layout. The one we use most often in the middle and background is CURD. ProCompoents is our abstraction of CRUD.

ProCompoentsUsing valueType as the core abstracts differentFieldAnd eachFieldBoth include edit and read only modes, so a set of abstractions can be used for both tables and forms.

So we can generate a query form based on the column configuration of ProTable.

In this way, valueType can generate forms and tables, and on top of this, the function of Field Layout is added. We can use a set of fields to configure different layouts to generate different forms. Meanwhile, we also provide low-frequency and high-complexity components such as editable tables and FormList.

For developers, ProTable is a great way to reduce the amount of code needed to create a fully functional table in just a few lines.

const columns: ProColumns<GithubIssueItem>[] = [
  {
    title: "Title".dataIndex: "title".copyable: true.ellipsis: true}, {title: "Creation time".key: "showTime".dataIndex: "created_at".valueType: "date"}, {title: "Operation".valueType: "option".render: (text, record, _, action) = > [<a>The editor</a>.<a>To view</a>],},];const Page = () = > {
  return (
    <ProTable
      columns={columns}
      request={request("https://proapi.azurewebsites.net/github/issues", {
        params})},rowKey="id"
      headerTitle="Advanced Form"
    />
  );
};

Copy the code

⚡ faster compilation

As front-end engineering goes deeper and deeper, front-end relies more and more. Take Pro project as an example, an initial project includes React, React-Router, ANTD, and ProComponents. It takes 50s for an initial project to get started.

That’s when Bundleless came into being. Modern browsers already support es6 modules, so we can use ES6 directly in projects with less or no compilation. After generating the ES module for the first time, the project starts extremely fast. Umi also offers the Bundleless scheme MFSU.

Mfsu (Module Federation Speed Up)** ** is a package Speed improvement solution based on the new WebPack5 feature Module Federation. The core idea is to build your application’s dependencies as a Remote application with Module Federation, so that you don’t have to compile dependencies when your application is hot updated. Therefore, starting an MFSU can significantly reduce the time required for hot updates. In production mode, dependencies can also be compiled in advance to greatly improve deployment efficiency.

Mfsu :{} and wepack5:{} were configured in config.s to enjoy a compilation performance boost.

export default defineConfig({ 
+  mfsu : {},
+  webpack5: {}, 
+  dynamicImport: {},
})
Copy the code

Here we put together a comparative list of Pro base projects. Open WebPack5 and MFSU Pro have an overwhelming advantage in startup speed and hot update speed.

📚 Project integration pattern component documentation

In real projects, we often need to abstract out components that are widely used in our applications, but documentation and testing are missing. TypeScript may solve some of the problems. But some design considerations require a single document to work together to be more fluid. So we have dumi’s project integration mode built into Pro, where you can see a menu of business component documents after logging in.

Click to see Pro’s built-in Business Component documentation, which contains simple documentation and apis for all of Pro’s built-in components.

As a project developer, integration patterns also provide me with a good debug environment. Our writing is no different from normal document writing.

​

Here is a list of all the components used in Pro that are not suitable as component libraries, but are really needed in the business. So we have prepared this document to guide you on whether you need to use this component. This component comes with some Pro configuration, you usually need to change this information. ```tsx /** * background:'#f0f2f5'
 */
import React from 'react';
import Footer from '@/components/Footer';

export default () => <Footer />;
Copy the code
Dumi renders the MD file as a page, and the code blocks in it are rendered as components. ! [image.png](https://cdn.nlark.com/yuque/0/2021/png/84868/1625106761257-3f62de3f-613a-4fe6-97e8-7097f11d5bf4.png#clientId =u09530022-258c-4&from=paste&height=381&id=u4a776da6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=762&origin Width=2192&originalType=binary&ratio=2&size=79703&status=done&style=none&taskId=uc0bead2d-d1c7-44f1-94bb-5f0d4ca7842&wid Th =1096) click on the lower right corner can also also in CodeSandbox, quickly open demo. For more information, see dumi Basic Usage Documentation (https://d.umijs.org/zh-CN/guide/basic). > The built-in documents are automatically deleted after the project is published, so you don't have to worry about the documents appearing online. ## 🏷️ One of the most important things in the background development of OpenAPI is the coordination. During this period, the back end generally needs to maintain a document to tell us what functions the specific API has and what specific field information is. The maintenance cost of these information is quite high. If you make changes but forget to update the document, the information will be out of sync, potentially creating a bug during testing. Pro V5 supports interface description documentation using OpenAPI 3.0.1, which can be generated with [Swagger](https://swagger.io/). It may require a bit of work on the back end, but the benefits far outweigh the costs. Pro automatically generates interfaces and base classes based on the OpenAPI. With TypeScript, we can smoothly access the data in the back end, and use 'TSC' to monitor field misalignments in the back end. ```typescript declare namespace API { type RuleListItem = { key? : number; disabled? : boolean; href? : string; avatar? : string; name? : string; owner? : string; desc? : string; callNo? : number; status? : number; updatedAt? : string; createdAt? : string; progress? : number; }; } import { request } from 'umi'; /** GET/API /rule */ export async function rule(params: api.pageParams, options? : { [key: string]: any }) { return request<API.RuleList>('/api/rule', { method: 'GET', params: { ... params, }, ... (options || {}), }); }Copy the code

For details about the access process, see the OpenApi access document.

🧵 How do I upgrade to V5

Pro V4 is aligned with V5’s underlying architecture, allowing us to use the new features with only the features we like.

  • Plugin-access, permission management
  • Plugin-analytics, statistics management
  • Plugin-antd, which integrates antD UI components
  • Plugin-crossorigin, usually used for JS error statistics
  • Plugin-dva, integration of DVA
  • Plugin-helmet integration, React-helmet integration, manage HTML document tags (title, description, etc.)
  • Plugin-initial-state: initializes data management
  • Plugin-layout enables the ant-design-pro layout
  • Plugin-locale, internationalization capability
  • Plugin-model, easy data flow based on hooks
  • Plugin-request is a request scheme based on UMI-request and UMI-hooks
  • Plugin-esbuild, which uses esBuild as a compressor to achieve rocket-like code compression
  • Mfsu speed up solution, waste of time is shameful, open MFSU can get a great build speed improvement

If you need to fully switch to our best practices, refer to upgrading to Pro V5.

Special thanks from ❤️

Thanks to everyone who submitted errors, initiated PR, responded to questions, wrote documents, etc! Special thanks to @Kaoding for taking on a large part of the V5 development. If you encounter any problems with Ant Design Pro, feel free to submit your problems on GitHub. Thank you for reading, please install, try.