DEV Community


Posted on • Updated on

JavaScript Library for newbies

Alt Text

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=”"></script>

<link rel=”stylesheet” type=”text/css” href=”">

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

<!DOCTYPE html>
<html lang="en">
    <script type="text/javascript" src=""> 
    <link rel="stylesheet" type="text/css" 
    <link rel="stylesheet" href="style.css">
    <title>My first page</title>
    <script src="ata.js"></script>
    <script src="script.js"></script>

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).


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



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

    { 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.

  1. The view:”label” creates static text and the label property shows the text title.
  2. Spacer.
  3. 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",
{view: "resizer"},

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:

  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.

autoConfig: true,     

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.



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:

width: 350, 
    { 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" },     
            { view:"button", id:"btn_add", minWidth:65, value:"Add new", 
            css:"webix_primary", click:addItem},                 
            { view:"button", id:"btn_clear", minWidth:65, value:"Clear", 



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

        height: 30, 
        template:"The software is provided by <a href='#'></a>. All 
        rights reserved (c)", 

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.


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.

Top comments (0)