JavaScript Library for newbies
Tags: javascript, webdev
Published: 2020-02-18 15:14:57

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qwa773jdqhq9en0vaabq.png)

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 <a href="https://webix.com/">UI library Webix</a> to improve my skills. 

Arguements for:
<ul>
    <li>Quick interface creation</li>
    <li>Design-ready prototyping</li>
    <li>Proven UI practices</li>
</ul>

Arguements against:
<ul>
    <li>Limits of the declarative method of development</li>
    <li>Difficulties with deep customisation</li>
    <li>Licensing issues</li>
    <li>Integration issues</li>
</ul>

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.  

<h2><strong>Webix UI. First glance.</strong></h2>
I am not going to deepen in the reasons for choosing this library. I took into consideration the following triggers: 
<ul>
    <li>Regular release of new versions and updates</li>
    <li>Full documentation</li>
    <li>Technical suppor</li>
    <li>Materials for self-study</li>
    <li>Simplicity of exploration</li>
</ul>

To tell the truth I experienced a WOW effect. Only <a href="https://snippet.webix.com/qj7mifle">several rows of the code</a> 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. 

<h3><strong>Learning Webix - Task 1 </strong></h3>
I should create the web UI like the one on the screenshot below.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/aos6mn3rz2qrhqf31tkx.png">

Luckily Webix provides built-in CSS styles and default <a href="https://snippet.webix.com/qj7mifle">Material Design skin</a>. 

<h3><strong>Setting up working environment</strong></h3>
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.

<u>My index.html file:</u>

```html
<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 <u>script.js</u> file uses the data included in the data.js file.

```html
<!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 <u>data.js file</u>.

```javascript
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"}
  ];
```
<h3><strong>App layout</strong></h3>
I need 3 rows array. (Header / Main / Footer).

```javascript
webix.ui({
    rows:[
        {template:"Header"},
        {template:"Main"},
        {template:"Footer"}
    ]
});
```
<img src="https://dev-to-uploads.s3.amazonaws.com/i/7yjhj974kt1w9p8u0c1f.png">

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

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

<img src="https://dev-to-uploads.s3.amazonaws.com/i/536fsalehkju3u90bcmz.png">

<h3><strong>Header</strong></h3>

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

```javascript
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"}
]
```

<img src="https://dev-to-uploads.s3.amazonaws.com/i/yz3tvhxcqq8670dzfg69.png">

I create three columns with the cols array.
<ol>
    <li>The view:”label” creates static text and the label property shows the text title.</li>
    <li>Spacer.</li>
    <li>view:”button”. ( <strong>width</strong> and <strong>height</strong> set the button size).</li>
</ol>

Type:”icon” and icon:”wxi-user” provide me with the icon from the <a href="https://snippet.webix.com/honyfqgt">list.</a>

The CSS class “webix_transparent” makes my button transparent.

<h3><strong>List widget</strong></h3>

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 <strong>template:”List”</strong> with the following:

```javascript
{
    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 <strong>scroll:false</strong>.
The length of the list and its values are set with the <strong>data</strong> array .
To define custom styles we write the following:

```css
.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 <strong>.list_color{…}</strong> to set up the background color I need.

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

And here is the result:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/04z1c7eb4qif8opr0wuz.png">

<h3><strong>Table and external data-source </strong></h3>
I keep data in the data.js file. Now I need to inject this data in a form of a table instead of <strong>template:”Table”</strong> line.

```javascript
view:"datatable",     
id:"film_list",     
scroll:"y",     
autoConfig: true,     
data:small_film_set
```
This is how is works:
<ul>
<li><strong>view:”datatable”</strong> - creates a table;</li>
<li><strong>autoConfig:true</strong> - configures the columns based on the small_film_set;</li>
<li><strong>small_film_set</strong> - array defines the beginning;</li>
<li><strong>data:smal_film_set</strong> - shows the pathway to this array;</li>
<li><strong>scroll:”y”</strong> - removes the horizontal scroll preserving the vertical one.</li>
</ul>

Result:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/lhtuogm696dg2jdo86q3.png">

<h3><strong>Form</strong></h3>

I create the  <a href="https://docs.webix.com/api__refs__ui.form.html">Form Widget</a> 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:

```javascript
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:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/isi69zd1dk6zf19q3bqd.png">

<h3><strong>Finalization</strong></h3>

Now I need the footer. 
I replace the <strong>template:”Footer”</strong> line with:

```javascript
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 <strong>“center_text”</strong> css-class.

<h3><strong>Summary</strong></h3>

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.