days
0
-18
0
hours
-1
-7
minutes
-1
-7
seconds
-2
-3
search
Building enterprise-level web apps

Ant Design 4.0 rewrites components for easier web app designing

Sarah Schlothauer
ant design
© Shutterstock / frank60

Ant Design is a UI design system and React UI library written in TypeSript used for building enterprise-level web applications. It is written in TypeScript and used by large companies such as Alibaba, Tencent, and Baidu. Take a brief tour of Ant Design’s creation guidelines and design values and see what the newest additions to Version 4 bring to the table.

Ant Design is a UI design system and React UI library written in Typescript used for building enterprise-level web applications. Its newest release, Ant Design 4.0, is the result of collected feedback, developer contributions, and over a month of work.

Used by companies such as Alibaba, Tencent, and Baidu, Ant Design includes React components out of the box for easier app development.

Take a brief tech tour and see what the latest version brings to the table.

SEE ALSO: Ionic 5: Develop cross-platform apps with new, custom animations

Version 4.0 changes

Ant Design 4.0 released on February 28, 2020, adding new updates with only a few breaking changes.

The highlights introduced include:

  • Visual improvements: Base rounded corners are reduced from 4 pixels to 2 pixels for streamlined visual efficiency and cleaner visuals. Shadows also receive a visual upgrade and are now more consistent.
  • Dark theme: Change to the new color system by clicking the switch theme function.
  • New borderless style
  • Minimum React version upgraded: React 16.9 or newer required
  • Ended support for IE 9/10: All modern browsers and IE 11 (with polyfills) are compatible
  • Rewritten Form component: Simplify your code with a form instance by directly binding data through the name property of Form.Item
  • Smaller size: Reduced default package size and gzipped bundle size
  • Virtual scrolling component: View the live demo
  • New calendar: Rewritten date component introduces new DatePicker, TimePicker, and calendar with an optimized range selector
  • sticky style tables: New table style reduces performance consumption
  • New summary API
  • Discarded legacy icons

Refer to the 4.0 changelog for further information about all the new changes.

Ant Design overview

According to its README, the main features of Ant Design:

🌈 Enterprise-class UI designed for web applications.

📦 A set of high-quality React components out of the box.

🛡 Written in TypeScript with predictable static types.

⚙️ Whole package of design resources and development tools.

🌍 Internationalization support for dozens of languages.

🎨 Powerful theme customization in every detail.

Its design values prioritize design standards that encourage natural user behavior and an object-oriented approach. Ant Design aims to avoid complicated, messy designs and focuses on ensuring user certainty with consistent appearances.

Leverage libraries such as Ant Motion, a library for creating smooth, concise animation and motion.

Browse some of its cases and examples to see how businesses use it and be sure to read up on its design values and discover what design solutions it can provide.

Upgrade to v4

For previous Ant Design users, follow the migration guide and upgrade from antd 3.x to antd 4.x. Refer to the incompatible changes introduced in v4, as some incompatible APIs from v3 have been removed. You will need to upgrade to React 16.12.0 or newer in preparation.

New users can follow the getting started guide, complete with examples. Read the documentation for information about its components, such as buttons and vector icons.

Newcomers to the tool should also check out the list of Ant Design resources on GitHub and begin creating your own app with the help of tools, utilities, and theme templates.

Author
Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is an assistant editor for JAXenter.com. She received her Bachelor's degree from Monmouth University and is currently enrolled at Goethe University in Frankfurt, Germany where she is working on her Masters. She lives in Frankfurt with her husband and cat. She is also the editor for Conditio Humana, an online magazine about ethics, AI, and technology.

Leave a Reply

avatar
400