WEBIX JAVASCRIPT LIBRARY BLOG

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

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

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

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

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

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

В данной статье описываются самые значимые составляющие процесса разработки мобильных приложений. Чтобы рассмотреть их детально, создадим простое приложение “Список контактов”. Это стандартное приложение, которое позволяет пользователям создавать список контактов, находить нужные контакты и просматривать дополнительную информацию о них.

Загрузить полный исходный код готового приложения вы можете из репозитория на github. Смотрите также онлайн демо.

Еще совсем недавно функциональность drag-and-drop довольно редко использовалась в веб-приложениях. С появлением HTML5 нативный drag-and-drop стал популярным и легко доступным. Функциональность, которая ранее требовала много усилий при написании кода, теперь может быть добавлена с использованием всего нескольких строк HTML-кода. Разрабатывая библиотеку Webix, мы старались сохранить все функции и преимущества нативного drag-and-drop. В то же время,были добавлены новые возможности, которые будут полезными в разработке веб-приложений.

Drag-and-Drop компонентного уровня

В то время, как drag-and-drop в HTML5 фокусируется на HTML-элементе, drag-and-drop в Webix сконцентрирован на UI-компонентах. Например, попробуйте перетянуть элементы между Tree и DataTable в демо ниже:

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

Стандартный пакет Webix уже включает в себя JS файлы для интеграции с такими популярными решениями как Google Maps, FCK Editor, D3 charts и множество других. Однако, это всего лишь капля в море. Каждый день появляются новые JS библиотеки, и невозможно обеспечить поддержку всех их “из коробки”. Вместо этого, Webix позволяет создавать новую интеграцию для любой сторонней библиотеки, используя всего несколько строк. Давайте посмотрим, как это осуществляется.