Three Killing UI Tools of 2016
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.
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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
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.
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 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.
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.
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.
Opinions expressed by DZone contributors are their own.