It’s been eight months since the last version of Pro was released, and the Pro has gone through a number of iterations, but most of the updates have focused on fixing bugs. During this time, we encountered a number of pain points with The Pro and wondered how we could solve them. At the same time, the whole front end industry is also changing, with business complexity, micro front end is ready. With hundreds of pages and hundreds of developers working together on projects like Aliyun’s console, there will be more and more. Serverless is in the ascendant, and the front-end cloud is still being explored, bringing new challenges every day.

V4 was our latest attempt to tackle the challenge, bringing TypeScript, Layout components, blocks, and gradually pulling Pro components into Ant Design. We also introduced a new way of creating projects that significantly reduced redundant code.

🚀 Quick Start

Create an empty folder as your project directory and execute in that directory:

yarn create umi // or npm create umi
Copy the code

Choose Ant-design-Pro to create the scaffold for V4.

Select the boilerplate type(Use arrow keys) ❯ ant-design-pro-create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.Copy the code

The scaffolding will be automatically installed and then run to start an Ant Design Pro V4 project!

yarn
yarn start
Copy the code

🏆 TypeScript

In V4, both scaffolding and blocks are refactored in TypeScript. TypeScript’s development benefits are obvious. The good ecology of TypeScript dramatically reduces the time it takes to query your API. Even better, you can easily read an old project because of its powerful type expression. Because a type can be used as a document under certain circumstances.

TypeScript’s bigger advantage is that it makes refactoring easier. Static type checking in TypeScript is a great way to get things done when you’re dealing with legacy code that isn’t particularly robust. Refactoring can cause type errors that can be found at development time. For example, upgrading antd@2 to antd@4, it’s hard to imagine how stressful it would be to go online without TypeScript.

We look forward to the day when you take over a project and feel reassured that it uses Pro scaffolding. You can get started quickly, develop quickly, and use the same abstract model and code style. To do this well, TypeScript is essential.

To accommodate more situations, we also provide an additional version of JavaScript that you can select when initializing the project.

👎 JavaScript loses a lot of features and is less editor friendly. We strongly recommend that you try TypeScript first.

📦 Layout

In version V2, the usual process for starting a new project is:

  1. Clone project
  2. Delete pages you don’t need
  3. To start developing

You won’t necessarily use most of the reference pages, but Layout is reserved 😁.

Pro Layout has a lot of great features, whether it is automatically generated menus, automatically generated bread crumbs. A variety of beautiful layout, even a new contact with the front end of students, can quickly build a framework for their own projects.

But power also means complexity, and to add insult to injury, we expose all the details of our code to every user. Although the Layout looks like just one UI, the logic is spread across multiple files. For a developer, it may be all about presentation, but to make a small change you may need to jump through several files and watch the data flow carefully. This is a big problem for developers. Not to mention the cumbersome upgrade method, almost no users will upgrade the Layout when the performance is normal.

To solve these problems, we removed Ant Design Pro Layout in V4. Now it’s reappearing as a package with almost all of the original features! It only takes a few lines of code to use:

import ProLayout from '@ant-design/pro-layout';

render(
  <ProLayout
    logo={<img src="https://demo.com/logo.png" />}
  	layout="sidemenu"
    navTheme="dark"
    fixSiderbar
    locale="zh-CN"
  />
, document.getElementById('root'));
Copy the code

Your code may be a long time old, but it doesn’t matter, you can access it quickly. And it’s only coupled to ANTD. This means it can support all scaffolding.

In terms of customisability we provide a lot of render methods, you can customize almost any block menu, header, footer and even title in Render. In TERMS of API is also close to ANTD mature program. If you are familiar with ANTD, it will work like a powerful ANTD component, with no up-start cost. If you want to try it right away, check out @ant-Design/pro-Layout here. Welcome to like. Or initiate PR.

🐱 components

Pro provides a range of components. In V4, we removed them, and they will gradually settle into Ant Design, where they will get better support, a better community, and a more robust API.

There are some that you can start using right now with Descriptions, PageHeader, Typography. These components can meet a wide range of page presentation requirements. For business-heavy components in Pro, we tend to install them using blocks.

🎯 Block

In V4, we divided Pro assets into two parts, Layout and Pages, and all interfaces are made up of these two parts. We componentized Layout to provide development efficiency, and blocks are our solution to improve the efficiency of Pages. Each block is a page that can carry its own state, localization, and even mock data and server. Umi based capabilities allow them to be easily and quickly integrated into scaffolding.

By the nature of blocks, your new projects will be very clean, with no dependencies, and no pages that you don’t need. This is what it looks like:

If you need pages in Pro, you can quickly add them via blocks. We’ve added a button to the Pro demo site, so when you want to use this page to your project, you can download the block to your project by clicking and copying the line below. It’s as simple as going to the mall to buy an item:

If you want it all (WOW!) You can run NPM Run fetch: Blocks in your project and our script will download all Pro blocks into your project for your demo.

As well as bringing benefits, blocks also bring problems, most notably the amount of redundant code, which will be the focus of our future work.

✨ Upgrade to V4

Ant Design Pro 4.0 is compatible with all features of 2.0, and there are no changes required to upgrade from 2.0 to 4.0. In Ant Design Pro 4.0, we separated Layout into a separate component. You can choose to replace it with the latest component.

npm i @ant-design/pro-layout --save
Copy the code

In the SRC /layouts directory, delete basicLayout. js and basiclayout. less. Replace with the new basicLayout.tsx.

If you modify the original BasicLayout, apply the changed logic to the replacement file.

🧩 Ant Design 4.0

In the meantime, we’re working hard on the next big release of Ant Design, with Ant Design 4.0 ** scheduled for Q4 2019 **🍻, where we plan to address some of the most criticized issues.

  1. For the future, ditch the old browser and React 15 and work with the upcoming React 17.
  2. Maximum backwards compatibility.
  3. Key components are refactored.
  4. Better performance and smaller size.

You can see the full roadmap in this Ant Design 4.0 article.

🥇 Looking to the future

Since the first release of @afC163 on October 29, 2017, Pro 2019 has changed a lot. The underlying framework has been changed to UMI, the code is organized in blocks, full embrace of TypeScript, It can be said that the scaffold is not the same as the original Pro, Ant Design has also released the 4.0 plan, and Ant Design Pro and Ant Design will continue to iterate in the future. No matter how the code changes, our original intention and vision will not change, to improve the development efficiency of each user, for each user to bring the most extreme development experience.

🌚 one more thing

With all major operating systems and browsers supporting dark mode. Ant Design Pro and Ant Design are also doing some development to support dark themes, this solution is not complete yet, if you want to try it, you are welcome to install it.

Special thanks from 🤝

Thanks to everyone who submitted errors, initiated PR, responded to questions, wrote documents, etc! A special thanks to the two community partners @Xiaohuoni @Imhele who are responsible for a large part of v4’s 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. 🎉