JavaScript Library for newbies

I am a junior web developer, starting my career right now. Frankly speaking I am not a very helpful employee at the moment. Most of the time I study. Recently I have spent part of my free time studying the UI library Webix to improve my skills.

Arguements for:

Quick interface creation
Design-ready prototyping
Proven UI practices

Arguements against:

Limits of the declarative method of development
Difficulties with deep customisation
Licensing issues
Integration issues

I am convinced that the exploration of the new tool will come in handy in my career. I would like to learn your opinion on that.

Webix UI. First glance.

I am not going to deepen in the reasons for choosing this library. I took into consideration the following triggers:

Regular release of new versions and updates
Full documentation
Technical suppor
Materials for self-study
Simplicity of exploration

To tell the truth I experienced a WOW effect. Only several rows of the code create a ready-made application with the default content and nice design. 60+ widgets with many features are available in the GPL version.

I will try to figure out if it is really so cool in practice.

Learning Webix - Task 1

I should create the web UI like the one on the screenshot below.

Luckily Webix provides built-in CSS styles and default Material Design skin.

Setting up working environment

All I need is the following files: (index.html; script.js; data.js; style.css).
The style.css may be skipped.

Next I should inject the Webix library. I used the direct links to the Webix CDN files of the GPL version.

My index.html file:

<script type=”text/javascript” src=”http://cdn.webix.com/edge/webix.js"></script>

<link rel=”stylesheet” type=”text/css” href=”http://cdn.webix.com/edge/webix.css">

The script.js file uses the data included in the data.js file.

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"> 
    </script>
    <link rel="stylesheet" type="text/css" 
    href="http://cdn.webix.com/edge/webix.css">
    <link rel="stylesheet" href="style.css">
    <title>My first page</title>
</head>
<body>
    <script src="ata.js"></script>
    <script src="script.js"></script>
</body>
</html>

I put data content into the data.js file.

let small_film_set = [
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"},
    { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"},
    { id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"},
    { id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"},
    { id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"}
  ];

App layout

I need 3 rows array. (Header / Main / Footer).

webix.ui({
    rows:[
        {template:"Header"},
        {template:"Main"},
        {template:"Footer"}
    ]
});

And I need three columns in Main part (List / table / Form).

webix.ui({
    rows:[
        {template:"Header"},
        {cols:[
            {template:"List"},
            {template:"Table"},
            {template:"Form"}
        ]},
        {template:"Footer"}
    ]
});

Header

I have to create the Toolbar and the icon in the header row.

view:"toolbar",
css:"webix_dark",
cols:[
    { view:"label", label:"My app"},
    {},
    {height: 40, type:"icon", icon:"wxi-user",  view:"button", label:"Profile", 
    width:100, css:"webix_transparent"}
]

I create three columns with the cols array.

The view:”label” creates static text and the label property shows the text title.
Spacer.
view:”button”. ( width and height set the button size).

Type:”icon” and icon:”wxi-user” provide me with the icon from the list.

The CSS class “webix_transparent” makes my button transparent.

List widget

The List Widget is used to create the left-side menu. I will make it clickable with the select:true property, plus I will customize the style with the help of css:”list_color” class.

I change the template:”List” with the following:

{
    view: "list",
    id:"mylist",
    scroll:false,
    select:true,
    width:200,
    css:"list_color",
    data:[
        {value:"Dashboard",},
        {value:"Users"},
        {value:"Products"},
        {value:"Location"}
    ]
},
{view: "resizer"},
{template:"Table"},
{template:"Form"}

Now I have to disable the scroll with the scroll:false.
The length of the list and its values are set with the data array .
To define custom styles we write the following:

.list_color{
  background-color: #EEEEEE;
  font-weight: 500;
}
.list_color .webix_selected{
  background-color: #dddfe2;
}

To change the background color I have to specify the default element class after the title of our class. After that I use .list_color{…} to set up the background color I need.

{ view:”resizer”} is the draggable border between the List widget and the Table column.

And here is the result:

Table and external data-source

I keep data in the data.js file. Now I need to inject this data in a form of a table instead of template:”Table” line.

view:"datatable",     
id:"film_list",     
scroll:"y",     
autoConfig: true,     
data:small_film_set

This is how is works:

view:”datatable” - creates a table;
autoConfig:true - configures the columns based on the small_film_set;
small_film_set - array defines the beginning;
data:smal_film_set - shows the pathway to this array;
scroll:”y” - removes the horizontal scroll preserving the vertical one.

Result:

Form

I create the Form Widget with the view:”form” line. According to my task I need input fields and the buttons located in the elements:[ ] array.
Now I replace the template:”Table” line with:

view:"form", 
id:'film_form', 
width: 350, 
elements:[     
    { type:"section", template:"EDIT FILMS"},     
    { view:"text", name:"title", label:"Title" },     
    { view:"text", name:"year", label:"Year" },     
    { view:"text", name:"rating", label:"Rating" },     
    { view:"text", name:"votes", label:"Votes" },     
    {         
        margin:10,         
        cols:[                 
            { view:"button", id:"btn_add", minWidth:65, value:"Add new", 
            css:"webix_primary", click:addItem},                 
            { view:"button", id:"btn_clear", minWidth:65, value:"Clear", 
            click:clearForm}         
        ]     
    },     
    {} 
]

Result:

Finalization

Now I need the footer.
I replace the template:”Footer” line with:

cols:[ 
    {
        height: 30, 
        template:"The software is provided by <a href='#'>webix.com</a>. All 
        rights reserved (c)", 
        css:"center_text"
    } 
]

As you can see from the code, the template property allows setting HTML-tags alongside with the text. To center the text I use the “center_text” css-class.

Summary

At the moment I understand that the exploration of the library basis takes much time. I haven't received a "magical effect" of saving time so far, but I have to admit that most of the UI/UX job is done by the Webix itself and I am not distracted with trifle things.
I am planning to continue the exploration of this library and I would like to learn the opinion of more experienced developers on my career perspectives.