Webix. Один за деньги, один смешной

Webix — это JavaScript и HTML5-фреймворк для разработки приложений с охватом данных с высокочувствительным интерфейсом. Это также позволяет создавать приложения для мобильных платформ. Библиотека распространяется как с открытым исходным кодом GNU GPLv3, так и с коммерческой лицензией, и поставляется в версиях Standard и Pro. Таким образом, вы можете развлекаться с ним бесплатно, и вы можете использовать его для обучения на первых шагах и для получения серьезных денег после создания собственной веб-компании. Это похоже на начало большой новой дружбы, не так ли?

Ключевые особенности Webix:

• Достигните  набора компонентов пользовательского интерфейса
• Куча  образцов , так что вы можете решить, стоит ли все-таки ваше время
• Полезные инструменты для веб-разработки:  Skin Designer ,  Form Builder ,  Code Snippet
• Онлайновая игровая площадка с исходным кодом , поэтому скачивать ее нет необходимости. Попробуй, потом купи!
• Простое обучение.  Думаю, это неплохой выбор для начинающих
• Я сказал, что Webix также  легкий  и  быстрый ? Нет? Ну, это так!

И, по традиции,  демо-страница .

Выглядит круто, но как мы можем получить это? Есть ли другая веб-форма? Неа! Просто выберите Стандартное издание на  странице загрузки,  и оно готово к работе! Наконец!

На данный момент, мои фавориты — это jQuery UI и Webix. Все функции выглядят одинаково до того, как мы попробуем их на практике, но это здорово, когда вы можете загрузить что-то полезное с веб-сайта разработчика, не тусуясь с ним. Это о веб-разработке! Не о формах!

Попробуй немного

Похоже, что все библиотеки предоставляют вам одинаковую функциональность. Виджеты здесь, полезные инструменты там. Но это только звучит так. А теперь, чтобы вы поняли, в чем разница между ними и почему вы предпочитаете одно другому, мы напишем некоторый код. Таким образом, вы увидите, как они себя ведут, какой из них проще использовать и что вы получите в результате своей работы. Чтобы было смешнее, мы организуем конкурс. Какая-то короткая дистанция для наших рамок. Посмотрим, какой из них быстрее. И под «быстрее» я имею в виду отсутствие кода. Код-менее Несс. Понял? И сейчас…

На старт внимание…

JQuery UI

Прежде всего, нам нужны данные для работы. Вот наш файл data.js, который мы создали для пользовательского интерфейса jQuery. Несколько папок с некоторым содержимым, поэтому посмотрим, как работают деревья. Некоторые данные в виде списка. И вы можете упорядочить этот список по названию, или по году, или по вашему желанию. Мы будем использовать одни и те же данные для всех наших проектов, поэтому лучше запомнить их:

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}
];

Ничего необычного здесь, так что давайте двигаться дальше.

Вот наш HTML-файл для пользовательского интерфейса jQuery:

<!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>

И вот, результат:

Что мы имеем здесь? Выглядит не так плохо. Но какая это была тяжелая работа! Просто проверьте файл HTML. Плагины, плагины везде! Мы использовали плагин дерева, плагин макета и плагин сетки. И мы даже не знаем, кто это разработал. Это правильно. Сторонние плагины, что означает, что вы должны быть очень осторожны с контролем версий. Потому что, кто знает, как ваши плагины будут работать после изменения версии jQuery UI.

Ext JS

Давайте продолжим с Ext JS. Здесь будут использоваться те же данные, поэтому нет необходимости повторять их снова.

И вот наш HTML-файл:

<!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>

Результат:

Что тут можно сказать? Выглядит аккуратно и аккуратно. И напоминает мне о Windows XP по некоторым причинам. Не знаю почему.

Но вот что я должен сказать. Ext JS — это не тот тип фреймворков, который вы должны использовать впервые. Большие уродливые конструкторы, неявный синтаксис. Каждые десять минут или около того вы будете читать документацию, пытаясь выяснить, в чем суть. Это мощно, да. Но это требует некоторого терпения на первых шагах.

Кендо UI

Следующий — это Kendo UI.

Вот наш HTML-код:

<!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>

Вот результат:

Не плохо, не плохо. И знаешь, что? Пользовательский интерфейс Kendo намного легче погрузиться в него с первых шагов. Но вам нужно работать со стилями, чтобы они выглядели аккуратно. Ну, никто не идеален.

Webix

Последний из них — Webix. А вот кое-что интересное для вас.

Проверьте этот код: 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>

Это все, что вам нужно для отображения ваших данных на экране. Раз, два, три… десять строк кода! Похоже, мы получили победителя! И вот как он выглядит:

Все поклонники Windows 8 теперь будут довольны.

Подведение итогов

Что мы можем сказать после нашего краткого обзора? Давайте подумаем об этом.

Ext JS и Kendo UI. Оба мощные. Нужно терпение

Похоже, что Ext JS и Kendo UI изначально создавались для коммерческого использования. Помните эти формы? Да, я тоже! И это не то, что обычно делают твои друзья. Больше похоже на большие компании. И я должен сказать, что использовать их впервые не очень приятно.

Если вы выберете  Ext Js , страница документации станет вашим спутником на протяжении всего пути. Но Ext JS тоже довольно мощный. Просто попробуйте!

С  Kendo UI  вы будете тратить свое драгоценное время на создание стилей практически для каждого элемента на странице. Но в этом есть что-то действительно захватывающее. Например, посмотрите на  эту страницу . Увидеть? Это виджет карты, так что вы можете создать свой собственный веб-сайт для путешественников с большой картой и возможностью отмечать ваши любимые страны, загружать свои фотографии путешествий, и … я не знаю, ваше воображение будет направлять вас дальше. И таких вещей становится все больше и больше. Попытайся!

Старый добрый jQuery, хороший старый Webix

Как насчет этих двух? Ну, это не так сложно, чтобы начать с ними. Проблем с загрузкой нет, поэтому они кажутся вам довольно дружелюбными. Но как насчет их использования?

JQuery UI . Это больно. Как я уже сказал, вам нужно будет добавить некоторые сторонние плагины, например, для создания чего-то более сложного, чем выбираемые списки. Управление версиями! Не забывайте о контроле версий, когда вы его используете!

Webix , как вы видите, самый быстрый из всех, если говорить о количестве кода. Десять строк чистого кода — это все, что нам нужно для отображения данных прямо на вашем экране. Никаких дополнительных плагинов, никаких стилей. Просто код. И вы можете проверить это  здесь  перед загрузкой. Это онлайн площадка для ваших экспериментов. Доступно 24 часа в сутки, 7 дней в неделю. Наслаждайтесь!

Но, учитывая, что в настоящее время jQuery является стандартом, мы должны сказать, что пользовательский интерфейс jQuery довольно важен для вас. Принимая во внимание все факты, мы можем сказать, что jQuery UI больше подходит для консерваторов, а Webix — для новаторов.

Ну вот и все на сегодня. Надеюсь, тебе понравилось. Увидимся!