Interesting JavaScript Libraries born in ChinaChinese are not newbies in the JavaScript community. There is a number of interesting libraries born in China such as Amaze UI. In this article, we are taking a look at Ant.Design library, Dva library, and Echarts library.
Sep 15 2017 | by Anton Shaleynikov

The JavaScript community has been growing bigger, and the language is gradually becoming the most used programming language in the world.

The community's tentacles have spread to China, which has become a country to reckon with in the Information Technology industry. They have tried their hands at creating useful JavaScript libraries.

We are taking a look at JavaScript Libraries born in China. Only three libraries in this article, but this is not to say that the Chinese are newbies in the JavaScript community. There are other interesting libraries born in China such as Amaze UI.

However, for the purpose of this article; we are taking a look at:

  1. Ant.Design library
  2. Dva library
  3. Echarts library

These three libraries are at par with their competition and have been gaining the attention of the JavaScript community and the world at large. Let’s dive deep and see what the Chinese have for us:

Ant.Design 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.

The makers of Ant Design have made development easier, as it can be installed using JavaScript packages npm and yarn.

Simply type in the following into your terminal:

npm install antd --save

OR

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.

You can get to know more about the Ant.Design framework on its website, you can also view it on GitHub.

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.

See the Pen Ant-design by Dash Bouquet (@dashbouquetdevelopment) on CodePen.

DVA Library 

DVA is an elm-style framework built on popular JavaScript technologies such as redux, react-router and redux saga.

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.

This could be a chance to make a name for yourself in the open source community, if you could help with some of the translation, the JavaScript developer community would be grateful.

Regardless of its language difficulties, it can be installed easily using the npm package.

Simply type:

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.

See the Pen DVA by Dash Bouquet (@dashbouquetdevelopment) on CodePen.

ECharts Library

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.

Echarts is built by powerful Chinese company Baidu, and is purely written in JavaScript and based on zrender which is a lightweight canvas library from the company which helps with providing the 2d drawings you get to enjoy on Echarts.

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.

Echarts also has an extension which can be used by entrepreneurs who aren’t so great at using JavaScript called Echarts Datamatic.

See the Pen Echarts-population by Dash Bouquet (@dashbouquetdevelopment) on CodePen.

Wrapping It Up

These three libraries are quality, easy to use libraries; and you should hardly have issues using them.

js lib ch comp

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!

Latest news
News
Dashbouquet Team Heads to Websummit
This premier tech conference brings together the brightest minds in the industry!
Dashbouquet Team Heads to Websummit
News
5-Star Review on Clutch: A Testament to Our Exceptional Service
We're thrilled to share a glowing 5-star review from our client at N-Drip, a precision irrigation company. They praised our team's exceptional work, highlighting our seamless integration into their team and our dedication to delivering high-quality solutions.
5-Star Review on Clutch: A Testament to Our Exceptional Service
Software Development
Dashbouquet Development Recognized as a Clutch Global Leader for Spring 2024
Dashbouquet Development named a top B2B company for Custom Web and Mobile development services
Dashbouquet Development Recognized as a Clutch Global Leader for Spring 2024