Implementation Of Ant Design In React-JS

Introduction

This article focuses on the importance of Ant design frameworks in the current web development world and their advantages. This is done with the help of react js along with Material UI. There are many other frameworks but Ant design stays in the ever-growing technology with a huge scope of improvement in the web world. Ant Design was introduced for the low learning curve that helps us to get started fast and achieve rapid results. Since April 2015, so many products of Ant Financial follow Ant Design specifications, included with multiple business lines and more than eighty applications. Designed for enterprise-class complex UIs, used by both professional and non-professional designers. Ant Design is a React UI library that has a plethora of easy-to-use components that are useful for building elegant user interfaces.

For a website to be successful, it requires a User Interface. A User Interface is a location/space on a website where a user interacts. The user interface (UI) is a critical component of creating an engaging website. A good User Interface Design combines visual design, interaction design, and information architecture cohesively to interact with it. During the Development of a Website, a developer must focus on design as much as other things. To meet the expectation of clients, every business started its websites and mobile applications. This led to a huge increase in the creation of websites. With growing competition, the quality of a website should be improved with different languages, platforms, and frameworks.

In 2013, Facebook launched a framework for frontend design. React Js is one of the most famous front-end frameworks used by many developers. It also introduced VMS means Mode-View-Controller for design. In M-V-C (Model View Controller) design, it consolidates the view (V) layer. It is supported by a Network of individual designers and Facebook, Instagram, and associations. With an increase in resources to use the internet for people, there has been a need for an online place for every business. There has also been an increase in mobile usage which also led to mobile-specific applications and websites.

When we compare popular React component libraries and evaluate each based on popularity, developer experience, readability, documentation, and bundle size. Ant Design is one of them. In Type-Script Ant Design built in a UI library. It's great for building React apps quickly since it has a set of high-quality React components and offers robust support for browsers and server-side-rendering.

Steps to Install Ant Design

To see Ant Design in action, install it with one of the following commands: By using npm or yarn to install first, it not only makes development easier but also allows you to take advantage of the rich ecosystem of Javascript packages and tooling in advanced level.

yarn add antd
     Or
npm install antd

Use modularized antd

antd supports ES modules tree shaking by default for the JS part.

TypeScript

antd provides a built-in typescript definition, don't install @types/antd.

Company using Antd

Ant Financial
Alibaba
Tencent
Baidu
Koubei
Meituan
Didi
Eleme

Resources for Ant Design

Based on resources, design guidelines, best practices, and tools to help designers produce high-quality and productive product prototypes.

Design Values, resources, and Patterns
Visualization and Illustration
Articles and Sketch Toolbox

Different Form Frontend Implementation

React is used to express a library of components that embody our design language. There is a Different community that is implementing now ant design system in other front-end frameworks as per needs to meet the user’s needs.

Ant Design of React
NG- ZORRO – Ant Design for web and mobile Angular
Ant design of Vue
Ant Design of Blazor
Scan UI Toolkit for Ant Design
Enter (ClohureScript)

Usage

import { Button, DatePicker } from 'and';
const App = () => (
  <>
    <Button type="primary">CLICK ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

After this imported style manually after this code

import 'antd/dist/antd.css'; 
or
import 'antd/dist/antd.less'

With some properties Ant Design assembles up against other React component libraries,

Popularity

56.4k stars on GitHub and over 341,000 downloads per week on NPM; used by multinational companies such as Alibaba, Baidu, and others. This can be determined with the help of GitHub stars and forks. As there is more number of stars and forks tells how many people are using it all these things mandatory.

Documentation

Well-written and beginner-friendly; we can copy the source code of a given component to better preview it on Code Pen, Code Sandbox, or Stack Blitz. Several contributors, in turn, reveal the pace at which bugs can be resolved and the framework can be developed. Technology must have good support if there is any chance to grow and sustain in the industry

Bundle size (minified)

antd 2.2MB. Here, Bundle size becomes important when a user has a low-speed internet connection. So this parameter and analysis can be considered based on the target customers. If it is for enterprise-based web pages then It doesn't matter but if target users are mobile-based then this must be a concern while using any libraries.

As we can see, Ant Design is very popular, especially in China, and its documentation is comprehensive as well as featured. However, the bundle is quite big compared to other React components libraries in case of differentiation between them. All libraries work accordingly.

We can also clone Ant design locally by using Command Prompt

$ git clone  from [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Example

After installation of the ant design we can create a card component by using this code in a simple form

import React from 'react';
import 'antd/dist/antd.css';
import { Card, Button } from 'antd';
 const AntDesign = () => (
    <Card style= {{width: 300}}>
    <h3>Ant Design card</h3>
       <p>Lorem  ipsum dolor sit  amet, consectetur adipiscing elit, tempor incididunt ut labore et dolore magna aliqua </p>
       <Button type="primary">Read more</Button>
    </Card>
 );
export  default  AntDesign;

Summary

Based on the analysis, it can be concluded that Ant design has more Users and Material UI is nearly as popular as Ant design whereas Grommet has a very low number of users.

In other words, we can say that Ant design is another react js UI framework backed by Alibaba corporation. Based on data comparing it is known to be the second most used UI framework for reacting. Like other libraries, It has good community support and is well documented. Ant design specified their design value in the official documentation which helps the designer in opting for a more user-prone design and stress less about thinking. They have a large component base with features ranging from normal buttons to data visualizations. This gives ant an edge over other frameworks and libraries. It supports other front-end frameworks other than reacting like Angular and Vue.

But there is a bit of an issue with bundle size as it is on the heavier side which might affect the users with low internet speeds. It has support for multiple languages which will help developers from countries whose first language is not English. It also has powerful theme customization features.

As the online population increase, there is a huge scope for this field. So it can be expected to develop leaps and bounds and many new libraries may arise giving developers more options to choose from. It is safe to say it can be a more difficult job to choose a library rather than to develop with it.