Webix review

Webix is an HTML5 and JavaScript framework for making and creating data-rich, cross-platform desktop and mobile web applications with advanced, straightforward, mobile friendly, responsive and rich free JavaScript UI component library. The library is lightweight, fast and easy to learn. Additionally, the library is appropriated under both open-source GNU GPLv3 and Commercial licenses, and comes in Standard and Pro releases. Webix is made by IT outsourcing organization XB Software, headquartered in Minsk, Belarus. XB uses Webix as a part of the arrangements they work for paying clients.

Webix as an enhanced and extended version of DHTMLX touch which was released in July, 2013. Dinamenta, UAB, the creator of DHTMLX, had coordinated touch support into its main dhtmlxSuite product, quit supporting DHTMLX Touch, and transferred development to XB Software.

Webix also has features that offers the following

• A lot of effortless UI widget customization

• Cross-platform compatibility

• The.js file is lightweight
• Reliable and comprehensive  documentation
• Backbone.js and AngularJS integration
• Use of HTML5 standards and CSS3 strategies
• jQuery integration
• An arrangement of ready to use skins
• Basic incorporation with server side
• Has full support for mobile and touch devices
• Boundless extensibility
• Offline support

What is Webix good for?

Whether you are an advanced or a beginner JavaScript developer, Webix is a simple and easy to learn JavaScript framework that has good all-around documentation and coherent API with comparative standards for different  UI widgets.

But why do we need to learn and use Webix? For one, Webix is very helpful in developing mobile and desktop web applications because it allows for the creation of fully-functional mobile and desktop web apps based on HTML5 principles that will work perfectly in all major browsers: Edge, IE8+, Apple Safari, Mozilla Firefox, Google Chrome and Opera.

One of the key advantages of using Webix is its ability to work on different platforms. The library incorporates not just the necessary tools for building desktop web applications but it also permits developers to utilize the same UI components to make usable mobile applications. The user interface of mobile applications created with Webix is improved for touch screens; all events are handled easily even on small screens.

Examples and code snippets

Now that you already know what Webix is and its advantages, let’s start developing our project. Just follow these steps that will help you get started on your own Webix based app.

Let's assume that you're already done downloading the library. The next step is to create an index.html page. Inside it, you should include the CSS and the JavaScript files:

<link rel="stylesheet" href="codebase/webix.css" />
<script src="codebase/webix.js"></script>

Alternatively, you can incorporate them using the Webix CDN: 

<link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" />
<script src="//cdn.webix.com/edge/webix.js"></script>

One reason to include the full library is the skin collection. 

In any case, for now let's deal with the initialization. You ought to place all your code inside the webix.ui() constructor. On the off chance that you need to make sure that your application will be executed after the page is completely loaded, use webix.ready(function() { ... }. Along these lines, your code should look like this.

webix.ready(function(){
   webix.ui({
       /* your code */
   });
});

Everything seems to be OK here so let's move on to making our design. For this, there will be no need to mess with HTML or CSS.

Webix offers two properties named cols and rows that can help you in making any layout you need:

webix.ui({
   rows: [
       {template: "Row One"},
       {template: "Row Two"}
   ]
});

After that, you can check the output of your program. In any case, let’s try joining nested columns and rows. Check the code below.

webix.ui({
   rows: [
       {type:"header", template:"Online mini-store"},
       {cols: [
           {rows: [
               {template:"Dress"},
               {view:"resizer"},
               {template:"Details", width: 250, height: 250}
           ]},
           {view: "resizer"},
           {rows: [
               {template:"Prices"},
               {template:"Design", height: 60}
           ]}   
        ]
       }
   ]
});

Remember we mentioned getting the full library instead of using the CDN service? You can find a group of skins inside it! And all you have to change the skin is a single line of code: 

<link rel="stylesheet" href="codebase/skins/touch.css" />

Check also another example below. 

Create a simple html-page. Specify HTML5 doctype for it.

<!DOCTYPE HTML>
<html>
   <head>
   <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css">
   <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript"></script>  
   </head>
   <body>
       <script type="text/javascript" charset="utf-8">
   /* place for UI configuration */
       </script>
   </body>
</html>

Define the UI configuration

webix.ui({
 rows:[
     { view:"template",
       type:"header", template:"My App!" },
     { view:"datatable",
       autoConfig:true,
       data:{
         title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5
       }
     }
 ]
});

Easy right? That's all there is to it. Just open the page in a browser and you have a working mini app.

Conclusion

As you can see, we just tackled using a very simple way to make an attractive responsive web application with Webix. The syntax is instinctive and the documentation is elegantly composed. Also, demos are available and easy to access. So feel free to use these Webix code snippets to help you dive straight into the action. Enjoy!