Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

(Un)Fantastic four. Four ways to fantastically good-looking web applications

DZone's Guide to

(Un)Fantastic four. Four ways to fantastically good-looking web applications

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

(Un)Fantastic four. Four ways to fantastically good-looking web applications

It seems to be pretty easy to create a good-looking web page. Even your neighbor has one or two of them. It’s for sure! For approximately two decades of World Wide Web existence hordes of web developers are trying to improve the way of how you interact with the Global Network. And how it interacts with you through different technologies such as JavaScript, for example. But looking at almost every single website you visit day by day, you may ask yourself: “What the heck? Is it just me or do they indeed look like newspapers? That’s silly! Nobody reads them anymore!” Well, your grandpa, maybe. But we here, in 21st century, prefer more exciting way of living. And more interactive way of web surfing, of course. In this article we will introduce four JavaScript UI libraries to you, which were created for you to turn the world (world of web applications in this particular case) into a better place. Our libraries have some special powers, so you can choose which one to use. You can try them for free. So, what are we waiting for?

The chosen four

At first, let’s take a look at what they are.

  • jQuery UI is basically a set of GUI widgets, effects, and themes, which are built on top of the jQuery (not a typo. It’s actually starts with lowercase ‘j’) JavaScript library. You might heard of this one, if you ever tried to get a job as a JavaScript programmer. It’s kinda standard in JavaScript world nowadays.
  • Ext Js. Never heard this name before? Don’t be upset. It was originally designed like some kind of Yahoo UI extension. I mean, come on! Everyone heard about Yahoo!
  • Kendo UI. Sounds cool , doesn’t it? Except for being the JavaScript framework, kendo is also a modern japanese martial art, which descended from swordsmanship called kenjutsu and uses bamboo swords called shinai and protective armour (bogu). This one is pretty much my favorite from now on. “I’m a kendo master!” Just pronounce it! Sounds good for your future employer, sounds good for the ladies! Seems like you can kill two birds with one stone!
  • And now, last but not least. Meet Webix, which is created for developing cross-platform data-rich web applications with highly responsive user interfaces. I’m not kidding. Wiki-pageconfirms it.

Let’s take a look at basic features in more detail, so you could choose from which one you should start from.

Creatures’ Features

jQuery UI. It’s jQuery. You know, for UI

jQueryUI logo

As we said before, jQuery UI is a set of UI widgets, animated visual effects, and themes, which are implemented with jQuery, CSS and HTML. And it’s free to use! So, nothing stands between you and your code awesomeness!

Key features:

  • Interactions. Allows you to create draggable, dropable, resizable, selectable, and sortable objects
  • Widgets. Their names speak for themselves: autocomplete, datepicker, dialog, progressbar, and many more.
  • Effects. Color animation, toggle on and toggle off, hide and show, and some others.
  • Utilities. There are two of them: Position utility for you to control objects positioning and Widget Factory, which you can use to (surprise!) create your own widgets.

You can see a list of all available features here, on Development page. Each of them contains description, source code, and a demo, so you can see what it’s all about.

Source code is available from the main page, so it’s pretty easy to get started with it.

Ext JS. Want to have some fun? Not a problem. But fill our questionnaire first!

Ext JS Logo

With Ext Js you can build interactive web-applications, using such things as Ajax and DOM scripting.

Ext JS includes a set of GUI-based form controls (such called widgets), which you can use within web application. These widgets are:

  • Text field and textarea controls for users to insert some data
  • Date fields with a pop-up date-picker
  • Numeric fields
  • List boxcombo boxesradio, and checkbox colntrols, so you can make your user an offer he can’t refuse
  • HTML editor control
  • Grid control
  • Tree control
  • Tab panels
  • Toolbars
  • Sliders
  • And much more of useful stuff

Looks like this framework allows you to control every single object within your web-page. Sounds great, huh? Looks great too! Visit Ext JS demo page, if you don’t believe me.

And here’s the place, where drama begins! To get Ext JS framework, you first need to fill a web form on the download page. Oh, man! What’s this? I mean, come on! I’m a code ninja! Why should I do something like this? Do I look like an accountant? Well, whatever.

Kendo UI. Discipline will turn you into a kendo master

Kendo UI logo

Let’s move along with Kendo UI. Kendo is based on jQuery and you can notice how everything is interconnected in this fancy world. It seems like there is some kind of web-developing melting pot. Various frameworks and technologies such as DOM, Ajax, jQuery and many others combine together to form new ones with basic features renewed and supplemented. Think about this conception at your daydream time. But, for now, let’s return to our frameworks. Where was I? Kendo UI, right. So, Kendo is some kind of collection of different User Interface widgets, placed in one powerful set of tools. Kendo’s home page looks promising. Just check it out! More than 70 User Interface widgets. More than you need for your entire life! Well, almost. But project is developing, so who knows.

Key features are:

  • Angular JS integration
  • Twitter Bootstrap support
  • Mobile-friendly. Touch support, easy mobile rendering
  • Built in, customizable themes

But what I like the most is Kendo’s demo page. You can find dozens of examples there, each for particular task: navigation elements, scheduling tools (calendar or kick-ass online scheduler), and my favorite so far - barcode widget. It allows you to create, for example, a QR Code and place everything you want into it. Such a good offer for those of you, who fell in love with secret messages! And this is just a couple of examples. But, according to the rule “Better to see once…”, you better go and check it by yourself.

Next part is getting the source code to your computer. Fully-functional 30-day trial is availablehere. And I have some bad news for you, folks. Again. Before get it, you need to create an account. Yeah, right. Another web form! At least, you can use your social network account this time. Well, that’s better!

Webix. One for money, one is funny

enter image description here

Webix is a JavaScript and HTML5 framework for developing data-reach applications with high responsive interface. It allows you to build mobile platform applications as well. The library is distributed under both open-source GNU GPLv3 and Commercial licenses, and comes in Standard and Pro editions. So, it’s free to make fun with it and you can use it for learning at your first steps and for raising some serious money after you create your own web company . It looks like beginning of a big new friendship, doesn’t it?

Webix key features are:

  • Reach UI components set
  • Bunch of samples, so you can decide if it is worth of your time after all
  • Useful web developing tools: Skin DesignerForm BuilderCode Snippet
  • On-line source code playground, so there is no need to download it, actually. Try it, then buy it!
  • Easy learning. Guess, it’s quite good choice for beginners
  • Have I said that Webix is also lightweight and fast? No? Well, it is!

And, by tradition, demo page.

Looks cool, but how can we get it? Is there another web form? Nope! Just choose Standard edition on the download page and it’s ready to go! At last!

At this point, my favorites are jQuery UI and Webix. All the features look the same before we try them in practice, but it’s great when you can download something useful from developer’s web site without messing around. It’s about web development! Not about forms!

Try some

It sounds like all the libraries provide you the same functionality. Widgets here, useful tools there. But it only sounds like that. And now, for you to understand what’s the difference between them and for why you should prefer one to the others, we’ll write some code. Thus, you’ll see how they behave, which one is easier to use and what you’ll get as a result of your work. To make it funnier, we’ll organize a competition. Some kind of short distance run for our frameworks. We’ll see, which one is faster. And by “faster” I mean it’s codelessness. Code-less-ness. Got it? And now…

Ready… Steady…

jQuery UI

First of all, we need some data to work with. Here’s our data.js file, which we created for jQuery UI. Some folders with some content, so we’ll see, how trees are working. Some data in form of a list. And you can arrange this list by the Title, or by the Year, or how you want it to do. We’ll use the same kind of data for all of our projects, so it’s better for you to remember it:

treeData = [
    {id: "1", open: true, name: "Music"},
    {id: "2", pId: 1, open: true, name: "Jimi Hendrix"},
    {id: "2_1", pId: 2, name: "1967 - Are You Experienced?"},
    {id: "2_2", pId: 2, name: "1967 - Axis: Bold As Love"},
    {id: "2_2", pId: 2, name: "1968 - Electric Lady Land"},
    {id: "3", pId: 1, open: true, name: "Georgy Sviridov"},
    {id: "3_1", pId: 3, name: "Petersburg a Vocal Poem"},
    {id: "3_2", pId: 3, name: "A Russia Flying Away"},
    {id: "4", pId: 1, open: true, name: "God is an Astronaut"},
    {id: "4_2", pId: 4, name: "2005 - All Is Violent, All Is Bright"},
    {id: "4_2", pId: 4, name: "2007 - Far from Refuge"},
    {id: "4_2", pId: 4, name: "2010 - Age of the Fifth Sun"},
    {id: "5", pId: 1, open: true, name: "Nikolai Rimsky-Korsakov"},
    {id: "5_1", pId: 5, name: "Scheherazade"}
];

gridColumns = [
    {
        name: "title",
        label: "Title"
    },
    {
        name: "year",
        label: "Year"
    },
    {
        name: "votes",
        label: "Votes"
    },
    {
        name: "rating",
        label: "Rating"
    },
    {
        name: "rank",
        label: "Rank"
    }
];

gridData = [
    {id: 1, title: "The Shawshank Redemption", year: 1994, votes: 678790, rating: 9.2, rank: 1},
    {id: 2, title: "The Godfather", year: 1972, votes: 511495, rating: 9.2, rank: 2},
    {id: 3, title: "The Godfather: Part II", year: 1974, votes: 319352, rating: 9.0, rank: 3},
    {id: 4, title: "The Good, the Bad and the Ugly", year: 1966, votes: 213030, rating: 8.9, rank: 4},
    {id: 5, title: "My Fair Lady", year: 1964, votes: 533848, rating: 8.9, rank: 5},
    {id: 6, title: "12 Angry Men", year: 1957, votes: 164558, rating: 8.9, rank: 6}
];

Nothing extraordinary here, so let’s move along.

Here’s our HTML file for jQuery UI:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Data explorer</title>

    <!--JQUERY-->
    <script src="sources/jquery-1.11.2.js"></script>

    <!--JQUERY UI-->
    <script src="sources/jquery-ui.js"></script>
    <link type="text/css" href="sources/jquery-ui.css">

    <!--LAYOUT-->
    <script src="sources/jquery.layout-1.4.1.js"></script>

    <!--TREE-->
    <script type="text/javascript" src="sources/zTree/js/jquery.ztree.core-3.5.js"></script>
    <link rel="stylesheet" type="text/css" href="sources/zTree/css/zTreeStyle/zTreeStyle.css">

    <!--GRID-->
    <script type="text/javascript" src="sources/jqGrid/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="sources/jqGrid/js/i18n/grid.locale-en.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="sources/jqGrid/css/ui.jqgrid.css" />

    <script src="data.js"></script>

    <style>
        body {
           margin: 0px;
        }

        #fileExplorer {
            width: 100%;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
        }

        #grid {
            font-family: Helvetica;
            font-size: 120%;
        }

        header {
            width: 100%;
            height: 15%;
            background-color: #3498DB;
            color: white;
            font-size: 20px;
            line-height: 45px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<header>My App!</header>
<div id="fileExplorer">
    <div class="ui-layout-west">
        <div class="ztree" id="tree"></div>
    </div>
    <div class="ui-layout-center">
        <table id="grid"></table>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#fileExplorer').layout({ applyDefaultStyles: true });

        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId"
                }
            }
        };
        $.fn.zTree.init($("#tree"), setting, treeData);
        $("#grid").jqGrid({
            datatype: 'local',
            data: gridData,
            colModel: gridColumns
        });
    });
</script>

</body>
</html>

And now, the result:


What do we have here? Looks not so bad. But what a hard work it was! Just check the HTML file. Plugins, plugins everywhere! We used tree plugin, layout plugin, and grid plugin. And we don’t even know, who developed it. That’s right. Third-party plugins, which means you should be very careful with version control. Because, who knows how your plugins will work after you change jQuery UI version.

Ext JS

Let’s continue with Ext JS. The same data will be used here, so there’s no need to repeat it again.

And here’s our HTML file:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="sources/ext-5.1.0/build/ext-all.js"></script>
    <link rel="stylesheet" href="sources/ext-5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css"/>
    <script src="data.js"></script>
    <style>
        body {margin: 0px;}
    </style>
</head>
<body>

<script>
    var tree = Ext.create('Ext.tree.Panel', {
        width: 220,
        height: "100%",
        region: 'west',
        collapsed: false,
        resizable: true,
        store: Ext.create('Ext.data.TreeStore', {root: treeData}),
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
            }
        }
    });

    var gridStore = Ext.create('Ext.data.Store', {
        fields: ["title", "year", "votes", "rating", "rank"],
        data: {'items': gridData},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: gridStore,
        columns: gridColumns,
        width: "100%"
    });

    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: "100%",
        height: 300,
        title: 'My App!',
        layout: {
            type: 'hbox',
            pack: 'start',
            align: 'stretch'
        },
        items: [tree, grid]
    });
</script>

</body>
</html>

Result:


What can we say here? Looks neat and accurate. And reminds me of Windows XP for some reason. Don’t know why.

But here’s what I got to say. Ext JS is not a kind of frameworks you should use for the first time. Big ugly constructors, implicit syntax. Every ten minutes or so you will be reading the documentation, trying to find out what it’s all about. It’s powerful, yes. But it requires some patience at the first steps.

Kendo UI

Next one is Kendo UI.

Here’s our HTML code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Data explorer</title>
    <link href="sources/KendoUI/styles/kendo.common.min.css" rel="stylesheet">
    <link href="sources/KendoUI/styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="sources/KendoUI/styles/kendo.default.min.css" rel="stylesheet">
    <link href="sources/KendoUI/styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="sources/KendoUI/styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="sources/KendoUI/js/jquery.min.js"></script>
    <script src="sources/KendoUI/js/angular.min.js"></script>
    <script src="sources/KendoUI/js/kendo.all.min.js"></script>
    <script src="data.js"></script>
    <style>
        body {
           margin: 0px;
        }

        #fileExplorer {
            width: 100%;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
        }

        #header {
            width: 100%;
            height: 15%;
            background-color: #3498DB;
            color: white;
            font-size: 20px;
            line-height: 45px;
            padding-left: 20px;
        }

        #content {
            width: 100%;
            height: 85%;
        }

        #tree .k-sprite {
            background-image: url("sources/KendoUI/examples/content/web/treeview/coloricons-sprite.png");
        }

        #tree .folder {background-position: 0 -16px;}
        #tree .file {background-position: 0 -48px;}

    </style>
</head>
<body>

<!--<div id="fileExplorer"></div>-->

<script>
    $(document).ready(function() {
        var layout = new kendo.Layout(
            "<div id='fileExplorer'>" +
                "<header id='header'>My App!</header>" +
                "<section id='content'>" +
                    "<div id='tree'></div>" +
                    "<div id='grid'></div>" +
                "</section>" +
            "</div>"
        );
        layout.render("body");

        $("#content").kendoSplitter({
            panes: [
                {collapsible: true, size: "220px"},
                {collapsible: false},
                {collapsible: true, size: "220px"}
            ]
        });

        $("#tree").kendoTreeView({
            dataSpriteCssClassField: "sprite",
            dataSource: treeData
        });

        $("#grid").kendoGrid({
            columns: gridColumns,
            dataSource: gridData
        });
    });
</script>

</body>
</html>

Here’s the result:


Not bad, not bad. And you know what? Kendo UI is much more easier to dive into it from the first steps. But you’ll need to work with styles hardly to make it look neat. Well, nobody’s perfect.

Webix

Last one is Webix. And here’s something interesting for you.

Check this code out:v

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="sources/webix.js"></script>
    <link rel="stylesheet" href="sources/webix.css"/>
    <script src="data.js"></script>
</head>
<body>
    <script type="text/javascript">
        webix.ui({
        rows:[
            { type:"header", template:"My App!" },
            { cols:[
            { view:"tree", data:treeData, gravity:0.3, select:true },
            { view:"resizer" },
            { view:"datatable", autoConfig:true, data:gridData }
            ]}
        ]
        })
    </script>
</body>
</html>

That’s all you need to render your data on the screen. One, two, three… ten lines of code! Seems like we got a winner! And this is how he looks like:


All the Windows 8 fans will be pleased now.

Summing-up

What can we say after our brief overview? Let’s think about it.

Ext JS and Kendo UI. Both powerful. Patience needed

It seems that Ext JS and Kendo UI were primarily created for commercial use. Remember those forms? Yeah, me too! And this is not what your friends normally do. More like big companies. And using both of them for the first time is not a big pleasure, I should say.

If you choose Ext Js, documentation page will become your companion all along the way. But Ext JS is pretty powerful as well. Just give it a try!

With Kendo UI you will waste your precious time to create styles for almost every element on the page. But there is something really exciting about it. For example, look at this page. See? It’s a map widget, so you could create your own web site for travelers with a big map, and possibility to mark your favorite countries, and upload your travel photos, and… I don’t know, your imagination will guide you further. And there’s more and more of such type of things. Try it!

Good old jQuery, good new Webix

What about these two? Well, that’s not so hard to get start with them. There are no problems with downloading, so they seems to be pretty friendly to you. But what about using them?

jQuery UI. It’s painful. As I said, you will need to add some third-party plugins to create something more sophisticated than selectable lists, for example. Version control! Don’t forget about version control, when you use it!

Webix, as you can see, is the fastest one of them all, if we are talking about code amount. Ten lines of pure code is all we need to render data right on your screen. No extra plugins, no messing with styles. Just code. And you can test it here before downloading. It’s online playground for your experiments. Available 24 hours a day, 7 days a week. Enjoy!

But keeping in mind that jQuery is a standard nowadays, we should say that jQuery UI is rather important for you to know. Assuming all the facts, we can say that jQuery UI is more for conservators and Webix is for innovators.

Well, that’s all for today. Hope, you liked it. See ya!

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}