WEBIX JAVASCRIPT LIBRARY BLOG

JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:

Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.

Одним из новейших и действительно классных API в настоящее время является WebSockets API. Данный интерфейс позволяет создавать приложения, работающие в режиме реального времени, где пользователи могут совместно работать, получать уведомления и обновления данных, всякий раз, когда данные изменяются. Данная статья призвана показать вам как можно создать простой веб-чат, используя Webix и WebSockets API.

Веб-чат — простейшее среди приложений, работающих в режиме реального времени. Вы можете взять исходный код на github.

В чем их польза

В HTML5 имеется множество способов размещения элементов на странице. Однако, во время создания веб-приложений, мы по-прежнему можем столкнуться с задачами, решить которые только с помощью чистого HTML и CSS невозможно. К примеру, существует проблема использования процентных и фиксированных значений в одной строке. Еще одна задача, не дающая покоя разработчикам, — это создание столбцов одной высоты. Довольно многообещающим решением таких проблем выглядит спецификация CSS Grid, однако, на данный момент она находится в стадии разработки и реализована только в Internet Explorer. Если же от лайаута (layout) вам нужно добиться большей гибкости прямо сейчас, вам помогут Webix Layouts.

Для чего это нужно

Среди современных веб-приложений часто встречаются достаточно сложные по структуре. Нередко при создании одной страницы могут использоваться данные из множества источников, часть из которых — это сторонние библиотеки или схожие приложения, находящиеся на другом сайте. И вот здесь появляется проблема. Страница, расположенная на одном домене, не может получить доступ к данным с другого домена.

Например, если ваша страница расположенная на http://app.mydomain.com попытается загрузить данные с http://data.mydomain.com — загрузка данных не выполнится. Любой браузер блокирует такой тип загрузки данных из соображений безопасности. Более того, запрос к другому порту, например к http://app.mydomain.com:5000, будет также заблокирован. Два URL, указывающие на один и тот же домен, но на различные порты воспринимаются как URL, указывающие на различные домены.

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