React and Webix: Combining the Two Technologies

|

In this article, we’ll talk about two technologies designed to perform the same work: creating user interfaces. Our area of interest for today are the React and javascript frameworks by Webix. We’ll briefly describe their features that may become the reason for choosing one of them. We’ll also tell you about the use case that shows possible benefits of combining these frameworks within the same project.

React and javascript frameworks by Webix

Choosing the proper stack of technologies to use in your project is quite an important task. It defines the whole process of web development. Harmonious work of every single part of your website, from database management system to the user interface, is a sure recipe for success. But sometimes instead preferring one technology over the other, you can use various combinations of them. The aim is to achieve higher project flexibility.

Webix vs React

Let’s start with the feature that can help you divide those frameworks into the separate categories: the possibility of customization. From this point of view, React looks more attractive. You can modify the components you create with this framework with minimum efforts. Webix, on the other hand, doesn’t give such freedom to the imagination.

But do not rush to delete Webix from your list of favorite frameworks. It has its ace in the hole. In the case of a complex and high functional UI, this framework becomes a preferable choice. The reason is the collection of ready-to-use advanced UI components, such as TreeMap or DataTable. Of course, the React framework allows using such kind of components as well. But you’ll have to put up with the low level of functionality, comparing to the previous case.

From the features that we’ve described above follows a conclusion about the possible combinations of these frameworks that can be used during the development process. It’s more likely that you’ll use Webix in your React application rather than vice versa. Some out-of-the-box components can significantly simplify the work on your project. But there are not so much use cases when you can use React in your Webix project. Probably, the only reason of using such approach is the availability of the already created React components. They can suit your needs better that the possible Webix alternatives.

To help you better understand the potential benefits of using such duo of frameworks, we’ll describe a real life use case. The issues our developers faced and the solutions made to accomplish the required tasks don’t pretend to be a strict recipe of a successful project, but still, we hope you’ll find some food for thoughts.

Webix Application with React

Without going into the details, let’s describe our project. It is an application that consists of two parts: public part for the users and the closed one, made for the employees. The latter was supposed to be used for the administrative needs. It works similar to the typical content management system. As our designers created a bright and modern looked mockup for the public part of the application, it was decided to use React for it. For CMS, we decided to use Webix. Since there were no requirements to its appearance and all that the customer wanted to get was functionality, Webix with its ready-to-go components was a good choice. This decision saved money for the customer. There was no need to create required parts of CMS from scratch, which decreased the development time.

The next step was to build a time picker similar to the one used in Android. To better meet this requirement we used React. Besides the attractive interface, it turned out that the usability of this component was significantly higher comparing to the similar Webix component. Thus, the decision to add this React component to the CMS was made.

There was also a non-critical requirement to add a User Action History widget to the public part of the application. Sometimes it was pretty helpful for decision making, but sometimes not. Most of the users have never used it, but for some of them, it was indispensable. At the same time, it was important to create a full functioned widget with the possibility to sort and filter the list of actions. In another case there was no sense to implement such functionality. Following the customer’s intention to save time and avoid unnecessary losses, and keeping in mind requirements to functionality, we decided to use Webix DataTable as the basic component for the User Action History widget. Then we integrated the widget into the public part of the project made with React.

React and Webix: Live Demo

We hope that you get the general idea of the joint use of the Webix and React frameworks. For a better understanding of how the result of such combination can look like you can check the demo we prepared for you. It shows how the Webix DataTable in React application looks like.

React and JavaScript Framework Webix demo

We have uploaded the demo to the bitbucket for you, go and grab it.

Conclusions

Two heads are better than one and two technologies (such as React and Webix) that can replace each other in case of need are better than the need to put up with disadvantages of one of them. In the case of Webix and React, guided by the deep understanding of the inner structure of your tools, you can skillfully balance between the ability of deep customization and availability of advanced UI components that can be used out-of-the-box. But the best part is the possibility of “drift” of the components. You can simply add the React component to your Webix project, and vice versa. This ability opens new opportunities, makes your project more flexible and highly adaptive, helps save your time and money.

That’s it. What do you think about the article and our live demo, in particular? Share your thoughts.

give us a like
The following two tabs change content below.
Svetlana Gordiyenko

Svetlana Gordiyenko

XB Software marketing specialist proficient in digital marketing. She is passionate about web marketing and strives to create engaging, web-friendly content for IT audience across a variety of topics.