Ant Design 4.0 is in progress!

Recap

It has been 16 months since December 2017 when Ant Design 3.0 was released. We fixed plenty of bugs and added lots of new features(changelog) within 4289 commits, 138 releases, 7675 issues & PRs, that brought us 25375 stars in GitHub. We also released Ant Design Pro 4.0. Support for TypeScript, blocks, and abstraction of layouts. We want to thank every contributors and your contribution makes Ant Design better and better.

At the same time, we released Ant Design Pro 4.0. Support TypeScript, Block and Provides Layout component.

At this moment, we are thinking: Ok then, what's next? What can we do to make Ant Design going further?** It is the time to plan for the Ant Design 4.0**! 🍻

Following is the detail plan about 4.0. We may adjust some of them since it's still in planning.

🌓 About Compatibility

We will remove deprecated props in 4.0, which means deprecated props will be no longer supported. If you're not getting any warning from latest 3.x, it will be seamless to upgrade. Otherwise, there will be hal year maintenace phase for 3.0 after 4.0 is released.

We know it's troublesome to do upgrades. We're planning to provide compatible package to handle this:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

This package will be available till the end of 3.x maintenance phase.

Use latest React API

We have provided React 15 support for a long time. But it seems not necessary from social feedback (There are nearly 0% of issues about React 15), since React has strong compatiblity. To support React 15, we use new API very carefully. This will be not a problem after 4.0 anymore:

• Provides Hooks api for related component
• Support Concurrent mode (Still preparing, will continue adjust in 4.0)
• Embrace React 17(wow！~)

Stop IE9/10 support

Ant Design 3.0 spends lots of effort to support old IE. But according to the industry statistics, usage of IE9/10 get lower and lower with Windows upgrade. We will stop support IE 9/10 in 4.0 (but still support IE 11), which means newer browser feature support will be possible.

Other compatible update

• Less 2.x upgrade to Less 3.x
• Icon adjustion
• Mention deprecated

📦 Reduce size

Optimize icon size

We use svg icon (why svg?) after  antd@3.9.0 . We use string name to map the icon, which can not load on demand. We import all the icon file into antd which makes bundle size large. We will handle this in 4.0.

Old Icon usage way will be** deprecated**:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Will use import single Icon instead in 4.0 :

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

You can still use compatible way in old way.

Remove Draft.js

We use Draft.js in Mention component to confirm popup location, but only a small part functionality of it is used. It seems over cost. We plan to remove Draft.js in 4.0,  and use other light solution instead. At the same time, to distinguish with origin Mention component in 3.0, a new component Mentions will be introduced to avoid api conflict. Also, it supports compatible way:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Performance optimization

We get few performance issue for large data set from community. We'll make sure some optimization will be done here.

Virtual scrolling

Virtual scrolling is a common way to do performance optimization. We're planning to support this natively in components. It may not finish immediately in 4.0 release. Will integrate step by step.

Refactor Animation

We did some hack with animation in the past. It works well in most case. We plan to use much pure React way instead of hack one. This update will be in silence, nothing will affect you.

🧩 Components Optimization

We've add many components in 3.0, and will continue in 4.0. These components will come from business scenario, Ant Design Pro and social requirement.  New components process will be same as Ant Design 3.0, we will put related design file in PR and collect it in the official website. Release in each minor version.

Besides, we plan to refactor some key components to make easier to use. Includes but not only:

Form

Form is one of the most usage component. We notice that social have many comments on the API design.
 We wish to simplify the API in 4.0:

• Form will include data store. No need to use Form.create() anymore.
• Fom.Item will include field bind. No need to use getFieldDecorator anymore.
• Form.Item will keep the value, but the validator will be disabled when field removed.

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

In the real world, we meets lots of communication between forms (usually in detail configuration). We want to make it easier:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

If you want to follow Form progress, you can see here.

Table

In the past, we received lots of Table feedback. We know that expand and scroll props not works well together. This time, we will focus to fix it. Besides, we will do much on the Table optimization. And easy way to do the layout：

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

We also plan to add Summary Footer to support summary row.

New DatePicker

Current DatePicker statifies most requirement. But from community discussion, we can dig it more. We will provide rest year picker and ranger picker (discuss). And also, we will update the DatePicker design style to enhance user experience.

🚀 Continue updating

Besides content above, we also plan to do some continue updating. These will keep updating in 4.0 to enhance development and user experience.

🧶 Improve accessibility

Ant Design 3.0 has limited support for accessibility, we plan to adjust the dom structure and add more aria mark to enhance the screen reader experience. Besides, we also prepare to optimize key board interaction.

🎯 Developer API standard

We find some  API naming style is little different with others. It's not a problem for Typescript developer, but it's hard to remember otherwise.
Thus, we will create a naming standard document which includes current APIs and related naming rules. In new feature, will follow the naming rule to avoid API naming conflict. Also, we welcome community opinions about this in PR.

💼 React Strict Mode

If you tried wrap antd component with <React.StrictMode> , you will get warning. We've already replace some components with new life cycle method. This work will continue in 4.0.

💡 Improve developer experience

In the past, we found that some issue comes repeatedly. These issues somehow are usage question. We think we can do something on this (actually already start in 3.0). In development environment, we will warning unexpected status (like invalidate Moment object, prefix/affix adjustment cause dom structure change, etc.). We believe that console is the first place to focus when meet problem. Provides proper tips can help to find the problem. At same time, we will summary other questions into FAQ of each Component document. From the side of maintenance, we can't help on each usage question, but they do exist, particularly with new come developers. FAQ may help to save lots of searching time. If you have interest on this, welcome to help enhancing developer experience with us.

🐱 Design Resource

Ant Design is not only a component library. Design is the support power. We will sync update the design resource (Sketch component package, Kitchen tools, Design Token, etc.).  We will also adjust current component style to enhance user experience.

Milestones

Here is our milestones plan. We will create related issue on Github. And also welcome social contributor:

Q2

• Mark related API as Deprecated and remove from document.
• Low level component warn update.

Q3

• Create antd 4.0 branch and update the document.
• Components development.

Q4

• Release Ant Design 4.0.

Welcome aboard

We will keep you posted during the developing process. Content above may not be final. Thought/advice from community will be more than welcome! Let's make Ant Design 4.0 better!