It has been 8 months since the last release of Pro. We keep updating, but most of them are focused on bug fix. During this time we have encountered many pain points using Pro and are also thinking about how to solve these problems. At the same time, the entire front-end industry is also changing. With the complexity of the business, the micro-front end has come to the fore. Hundreds of pages like Alibaba Cloud’s console will have more and more collaborative projects. Serverless is in the ascendant, and the cloud on the front end is still being explored with new challenges every day.
V4 is our latest attempt to meet the challenge. We bring TypeScript, Layout component, blocks and move components from Pro to Ant Design. At the same time, we also brought new ways to create projects, significantly reducing redundant code.
🚀 Quick Start
Create a new empty folder as the project directory and execute follow command in it:
yarn create umi // or npm create umi
Choose ant-design-pro:
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.
The Ant Design Pro scaffolding will be installed automatically.
✨ Upgrade to v4
Ant Design Pro 4.0 is compatible with all the features of 2.0, and there is no need to make any changes to upgrade from 2.0 to 4.0. In Ant Design Pro 4.0, we striped the Layout into separate component. You can choose to replace it with the latest one.
npm i @ant-design/pro-layout --save
Under the src/layouts directory, remove BasicLayout.js and BasicLayout.less. Replace it with the new version of BasicLayout.tsx.
If you modified the original BasicLayout, remember to apply the changed logic to the replaced file.
🏆 TypeScript
In v4, both scaffolding and blocks are refactored with TypeScript. TypeScript is incredibly effective for development, and a good ecology can greatly reduce the time of your query API. It can also eliminate the wrong parameters, or misspelling variable names. Even better, because of its powerful type of expressiveness, you can read an old project more easily. Because the type can be used as a document under certain circumstances.
The greater advantage of TypeScript is that it simplifies the difficulty of refactoring. TypeScript’s static type checking will make you more productive when you take over a less robust legacy code. Refactoring can cause type errors that can be discovered at development time. For example, upgrading antd@2 to antd@4, if you don’t have TypeScript, it’s hard to imagine how much psychological pressure you have to take when you go online.
We hope that one day when you take over the project, you will find that it uses Pro’s scaffolding to make you feel at ease. You can get started quickly, develop quickly, and use the same abstract model and code style. To do this better, TypeScript is an essential part.
For non-Typescript users, we also provide an additional version of JavaScript. You can choose JavaScript scaffolding when you initialize your project.
👎 JavaScript loses a lot of features and is not friendly enough for editors. We strongly recommend that you give priority to using TypeScript.
📦 Layout
In the v2 version, the process for starting a new project is generally:
- Clone project
- Delete unused pages
- Start development
Most of the reference pages are not necessarily used, but Layout is definitely reserved 😁.
Pro’s Layout has a lot of great features. For example, automatically generated menus, breadcrumbs and a variety of beautiful layouts. Even a new to the front end developer can also quickly build a framework for his project.
But the power is also cumbersome. Even worse, we exposed all the code details to every user. Although Layout seems to be just a UI, the logic is spread across multiple files. For developers, may only focus on the display effect, but in order to modify a small place may need to jump in several files, but also need to carefully observe the flow of data. 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.
In order to solve these problems, we extracted the layout in v4. Now it re-debuts as a package, retaining almost all of its original features! Just use a few lines of code:
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'));
Maybe your code has been in shape for a long time, but it doesn’t matter, you can also access it quickly. And it is only coupled with antd. This means it can support all scaffolding.
In terms of customizability, we provide a very large number of render methods. You can almost customize render any block menu, header, footer or even title. In terms of api, it is close to the mature solution of antd. If you are familiar with antd, it will be used like a powerful antd component without the cost of getting started.
If you want to try it immediately, look here @ant-design/pro-layout. Welcome to like, spit or initiate PR.
🐱 Component
A range of components are available in v2. But in v4, we removed them and moved to antd gradually. In antd, they get better support, a better community, and a more robust api.
There are some components you can start using right now, such as Descriptions, PageHeader, Typography. These components can meet a very large number of page display needs. For those components which are heavily business-oriented, we tend to use blocks for installation
🎯 Block
In v4 we split Pro’s assets into two pieces, Layout and Pages. All interfaces are composed of these two parts. We’ve componentized Layout to provide development efficiency, and blocks are our solution for Pages. Each block is a page that can take its own state, localize, and even mock data and server. Umi-based capabilities allow them to be easily and quickly integrated into scaffolding.
Due to the feature of the block. Your new project will be very concise, with no extra dependencies, and no bunch of pages you can’t use. It looks like this:
If you need a page from Pro, you can add it quickly via the block. In Pro’s demo site we have added a button. When you want to use this page into your project, you can download this block into your project by clicking and copying the following line of code. It’s as simple as going to the mall to buy a product:
If you want it all (wow!), you can run in your project, and our script will download all the Pro blocks to the project for your presentation.npm run fetch:blocks
Blocks also cause problems while bringing benefits. The most significant is the amount of redundant code, which will be the focus of our future work.
🧩 Ant Design 4.0
We expect to release the Ant Design 4.0 release in Q4 this year 🍻. The main objectives are:
- facing the future
- Maximum backward compatibility
- Faster and smaller
- You can see detailed expansion instructions here.
🥇 Looking to the future
Since the release of the first version of @afc163 on October 29, 2017, there have been many changes to the Pro in 2019.
The underlying framework was modified to umi, the code organization was changed to block, and the TypeScript was completely embraced.
It can be said that the Pro has changed dramatically.
Ant Design also released the 4.0 plan, as a huge version upgrade, 4.0 will solve some of the problems that have been criticized. Includes From rewrites, more new components, more powerful performance, and so on.
Ant Design Pro and Ant Design will continue to iterate in the future. But no matter how the code changes, our initial intentions and vision will not change. That is to bring the most extreme development experience and improve the development efficiency for each user.
🌚 one more thing
Most browsers already support dark mode. Ant Design Pro and Ant Design are also do some work on the dark theme. Current solution may not reach the expect, but you can still have a try.
🤝 Special Thanks
Thanks to everyone who found bugs, initiated PR, replied to questions, and wrote documentation! Special thanks to the two community partners , who have undertaken a large part of the v4 development work. @xiaohuoni @imhele
If you have any problems using Ant Design Pro, feel free to submit a question on GitHub.
Thank you for reading, please install and try. 🎉
Oldest comments (0)