Over a million developers have joined DZone.

Three Killing UI Tools of 2016

DZone 's Guide to

Three Killing UI Tools of 2016

In this article, we’ll check three tools which allow you to build online applications that can replace existing office packages.

· Web Dev Zone ·
Free Resource

One of the main tendencies related to the modern technologies is the migration of software from desktop to the web. The obvious benefit of such approach is the possibility to access the required services from any of your devices from all around the world. There’s no need to install software and regularly update it. All you need is the internet connection. Cloud solutions allow you to store your files safely and share them, which can be especially convenient if you use multiple devices for work.

In this article, we’ll check three tools which allow you to build online applications that can replace existing office packages. It’s hard to say whether they can be a full replacement for popular software, but these tools are definitely worth spending some time on them, if you intend to devote yourself to creation of online office applications.

One for Text, One for Tables, and One for the Images

Well, let’s take a look at our tools. We decided to select technologies of different kinds to give you the opportunity to choose something for yourself:

  • Draft.js, a React framework for building text editors
  • Webix SpreadSheet, a widget that allows you to create Excel-like tables. This one is the part of the Webix framework
  • D3.js or Data-Driven Documents. A JavaScript library for manipulating documents based on data

The listed tools require different levels of JavaScript experience and each one has its own philosophy.

For example, Draft.js is React-based, which makes it pretty hard to use, if you’re unfamiliar with ReactJS, since the latter uses the JSX language.

As for Webix, it is a framework that allows you to build user interfaces with ease, but doesn’t provide you with the possibility of deep customization.

Finally, D3.js gives you really splendid possibilities for data visualization, but requires time and efforts to learn its basics before creating something.

To understand what option suits your needs better, let’s talk about them in more detail.


Image title

The React framework has become pretty popular lately. According to the thorough developer survey that was made by Stack Overflow, React is one of the most trending and the most payable among the front-end technologies. There are a couple of reasons behind such popularity. Virtual DOM, one-way data flow, isomorphic JavaScript, the possibility of deep customization, code reuse – all these features allow significantly improve performance and reduce the time for cross-platform development.

But all these features have their price. Even if you have some JavaScript experience, you can’t just dive into React and start creating applications. React components are typically written in JSX, a JavaScript extension syntax that allows quoting HTML and using HTML tag syntax to render subcomponents. You’ll have to spend some time to get used to this approach.

What is more, if you decide to use third-party UI libraries with React, you should remember that in case they don’t have Virtual DOM support, you won’t get all the advantages of this technology. It’s better to choose the libraries that were initially designed to work with React. But don’t be upset. It only looks like an insurmountable obstacle. The fact is that there are plenty of React tools for all occasions. Just check this wiki page and you’ll find dozens of them.

One of such tools that we want to discuss today is Draft.js. This framework was created to provide you with the possibility to build rich text editors with cross-browser support. Using Draft.js, you can combine available building blocks for creating applications of different levels of complexity, from a simple notepad to advanced text editors. You can check a demo on this page.

To install required files, you should use npm. Check this documentation page to see the overview (video is also available) and learn the basics. Also, you can find a well-described documentation there.

Webix SpreadSheet

Image title

Webix is a collection of UI components that you can use for building responsive cross-platform user interfaces. There’s a wide variety of components from a checkbox to charts and data components available together with a set of useful features.

However, this framework doesn’t allow you to customize existing components as deep as React does. But if your goal is fast creation of user interfaces, Webix may become a reasonable choice. To use this framework in your project, you should add the required CSS and JavaScript files to the page, or use the package manager such as NuGet or Bower.

To add Webix SpreadSheet to your page, you’ll have to add two more files. Minimum necessary efforts which are required for initialization of this widget include defining the type of a view that you want to create and the data source. Besides the basic functionality, this widget allows you to customize the toolbar, load and save data, export data to PDF, Excel, and PNG formats, etc.

Here’s the demo page that can help you understand how a basic application can look like. To learn more about this tool, you can check this documentation page.


Image title

Text editors and tables are essential tools for creating information of different kinds. But for better understanding, it may be pretty useful to visualize the data that you’ve created. There are various frameworks that use JavaScript, HTML5, CSS3, SVG as the core technologies for building such kind of apps. And one of the most famous of such frameworks is D3.js.

This library provides an unlimited range of ways of data visualization using the possibilities of modern browsers to full extent. You can transform documents based on data into colorful

diagrams and charts, static and interactive ones, etc.

D3.js is free and open-source, so there are almost no restrictions on how you can use it in your projects. But we should admit that it has a steep learning curve and out-of-the-box charts are not available. It means that you should have enough time to get a satisfying result. To decide if it worth it, you can check the D3.js gallery.


The diversity of existing tools leads to even greater diversity of online office packages since you can always combine different frameworks according to your needs.

They can be lightweight enough to run on mobile devices or extremely advanced to replace existing desktop solutions. It is up to you to decide what to choose for your future application.

ui components ,ui controls ,javascript libraries ,react framework ,react.js ,text editor ,spreadsheet

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}