However, for the purpose of this article; we are taking a look at:
- Ant.Design library
- Dva library
- Echarts library
Ant.Design popularly known as antd is a UI design framework built on the ReactJS library for developing web and React JS applications. It is owned by the Chinese company Ant Design and is built using Material Design principles.
Antd is a feature rich complete framework without so much complexity, that gives you the option of using directly with your React project. It, therefore, provides a set of high-quality React components that you would probably not have ever paid attention to:
- easy and powerful grid system,
- navigation components like steps, menu or breadcrumbs with react-router integration,
- big icon pack for all cases,
- great selection of data entity components like selectors, inputs or radio buttons,
- set of the modal windows like progress bar, spinner and alerts,
- And all of those components are easy to combine and tune or style as you want.
Ant.Design is written in TypeScript and works well in collaboration with other technologies, as it provides a npm, webpack, and dva front-end development workflow.
Simply type in the following into your terminal:
npm install antd --save
yarn add antd
It supports almost all of the modern browsers including the Internet Explorer. You can add Ant.Design to your browser, with the script and link tags using the antd global variable.
Also considering that it supports server-side rendering, and the Electron framework; anybody would find it enjoyable to work with this easy to use framework.
Considering that it is a Chinese library, language could tend to be a stumbling block. However, the issue is currently being tackled and is soon to be completely documented in English language.
It is a lightweight library, as it is built in less than 100 lines of code. It also has a command line interface for those who prefer it for navigation.
DVA follows in this path of being lightweight, as it has an easy learning curve, and is reasonably easy to use. Some other benefits include:
- its support for TypeScript
- availability of a plugin system
- support for the load model
- support for mobile and react-native
- availability of easy to understand APIs
The DVA library can be used to create web applications and works seamlessly with Ant.Design for its User Interface.
The major disadvantage of this library, is its lack of a user community caused by its pure documentation in Chinese with English speaking developers finding it difficult getting around it.
This is however made up for, as it is easy to learn, doesn’t have so many complexities and is precise with its functionalities. So, this should make language less of an issue.
Due to this, a few developers have been helping out with translating into English Language. If you come across any issues making use of this library, you could visit its GitHub repository; it's highly likely that your question has been raised already.
Regardless of its language difficulties, it can be installed easily using the npm package.
npm install dva
The command line interface is also easy to install using the npm package.
npm install dva-cli -g
Using the DVA CLI is beyond the scope of this article, however, you can learn to use it from its GitHub repository.
Here is one for the data scientists, data lovers, and data driven entrepreneurs.
Echarts library fully known as Enterprise Charts is a powerful charting, data visualization library for browsers, it offers an easy way of representing your numbers on your webpage making use of interactive and highly customizable charts.
Installing ECharts for use is very easy, install using the npm package:
npm install echarts --save
You can also get the file from here.
Unlike DVA JS, Echarts is properly documented in English and also has a documentation in Chinese as well.
This has encouraged the usage of the library, it has a large user community and you would easily get support anytime you get in trouble with making use of the language.
Of the many charting libraries out there, Echart is one of the most powerful; and is doing China proud.
Check out some examples of charts you can create with the library such as pie charts, bar charts, line charts and even candlesticks on the Echart website.
Wrapping It Up
These three libraries are quality, easy to use libraries; and you should hardly have issues using them.
The major problem however with Chinese libraries is the language barrier. The Echarts library is totally translated into English, the DVA library lacks quality translation but is being worked on; while the Ant.Design library is getting better, as a lot of developers are putting work into its translation.
As much as this is a barrier, it shouldn’t stop you from making use of them in your projects. Someone out there would most likely have come across the issues you have, and an answer in English should be available.
Share this article with other software developers, UI/UX professionals and data scientists out there, it may just be the library they have been searching for. Sub to DashBouquet news and stay tuned!
How to Speed up your Web App and Improve Website Performance
Optimization of site performance is a big deal. It involves multiple aspects to take care of and many of them depend on the site itself, its complexity and elements. However, there is also a set of common optimization methods that work for any site.
5 DevOps Tools to use
While an understanding of various concepts drives DevOps, there are different tools out there to make it easier to implement these concepts. In this article, you'll learn about these tools and hopefully, begin using them as an integral part of your software release/maintenance toolkit.
14 Frequently Asked Questions about ReactJS
If you've chosen to use React, or you are considering it, you probably have questions you need answers to. We have gathered some of the frequently asked questions about React and will answer them here. The questions are going to be grouped into six segments, each about various aspects of React.
01 / 14