Публикация научных статей.
Вход на сайт
E-mail:
Пароль:
Запомнить
Регистрация/
Забыли пароль?

Научные направления

Поделиться:
Статьи из раздела:
ПРИМЕНЕНИЕ НЕЙРОННЫХ СЕТЕЙ В МОБИЛЬНОМ ПРИЛОЖЕНИИ ДЛЯ ДИАГНОСТИКИ АРТРИТА КИСТЕЙ РУК

Эпидемическое моделирование с использованием клеточных автоматов

Статья опубликована в №39 (ноябрь) 2016
Разделы: Информационные технологии
Размещена 25.10.2016. Последняя правка: 24.10.2016.
Просмотров - 4075

Разработка библиотеки функций для реализации оконного интерфейса на языке JavaScript

Амелькин Владимир Владимирович

магистрант

Калужский государственный университет им.Циолковского

Физико-Технологический Институт

Виноградский Вадим Геннадиевич, заведующий кафедрой Информатики и информационных технологий Калужского государственного университета, кандидат педагогических наук, доцент член-корреспондент Академии информатизации образования РФ


Аннотация:
Статья посвящена frontend-разработке модуля оконного интерфейса для системы управления содержимым (CMS), предоставляющей инструменты создания корпоративного портала в локальной вычислительной сети организации на основе web-технологий. Проведён анализ существующих оконных библиотек, а также представлены некоторые материалы созданной библиотеки с описанием её особенностей.


Abstract:
The article is devoted to the frontend-develop of a window interface module for the content managing system (CMS) providing the tools for a web-based corporate portal creating in a local area network of organization. The analysis of the existing window libraries is given. Some materials of the library created are given including the description of its characteristic.


Ключевые слова:
Фронтэнд; web; HTML; CSS; JavaScript; JSON; MVC; MDI; CMS

Keywords:
Front-end; web; HTML; CSS; JavaScript; JSON; MVC; MDI; CMS


УДК 004.415

Язык JavaScript в контексте разработки сложных пользовательских интерфейсов является весьма удобным и лаконичным инструментом. На уровне frontend-разработки он позволяет реализовывать проекты любой сложности, какие бы задачи ни ставил перед web-программистом дизайнер или разработчик UI (User Interface). С каждым годом JavaScript приобретает всё большую популярность и распространяется далеко за пределы web среды. Он широко используется в прикладном программном обеспечении, офисных приложениях, web-редакторах, для создания мобильных приложений (Palm webOS), виджетов и даже является составной частью операционных систем, как, например, в eyeOS. При разработке web-приложения, в частности, при создании CMS, предоставляющей широкий спектр удобных инструментов, как для web-мастера, так и для конечного пользователя, необходимость использования данного языка очевидна.

В процессе проектирования системы управления содержимым для создания и поддержки корпоративных порталов появилась необходимость в организации frontend-интерфейса по способу MDI (Multiple Document Interface). Подобная реализация предоставит иной уровень взаимодействия пользователя с системой по сравнению с использованием более классического подхода к организации рабочего пространства в web-документе. Среди полезных возможностей данного метода можно отметить:
  • простоту навигации и быстрый переход между разделами;
  • одновременное отображение нескольких разделов;
  • динамическую организацию рабочего пространства.
Но кроме плюсов, у подхода существуют также и слабые стороны, которые касаются реализации способа MDI в рамках web-документа. Одним из  главных недостатков можно считать возможное падение производительности подобной системы при одновременной работе нескольких открытых окон (разделов сайта), при условии, что с каждого из них выполняется асинхронный запрос к серверу. Для её улучшения необходимо оптимизировать запросы, распределять и четко контролировать поток данных между клиентом и сервером. Кроме этого, существенным минусом может явиться отсутствие преимущества многооконного режима при работе приложения на экранах с разрешением 1024х768 и ниже. В этом случае, среднее по размеру окно может занять практически всю видимую рабочую область, закрыв собой прочие окна и элементы, затруднив навигацию и быстрое переключение между разделами. Отчасти эту проблему можно решить с помощью принципов адаптивного дизайна, подстраивая способ отображения и размеры элементов документа под его фактические размеры. Также, применение адаптивной технологии позволит комфортно работать в системе с мобильных устройств, обладающих ещё меньшим графическим разрешением.
Другие особенности и описания набора функций в подробной форме представлены в техническом задании (ТЗ) разрабатываемой CMS. Однако стоит отметить, что при составлении ТЗ, в соответствии с современными нормами и тенденциями, были поставлены следующие задачи:
  • обеспечить кроссплатформенность, кроссбраузерность, а также адаптивную верстку;
  • провести оптимизацию производительности;
  • минимизировать стоимость разработки;
  • организовать удобство сопровождения кода;
  • реализовать web-конструктор окон.
В настоящее время существует некоторое количество библиотек, предоставляющих функционал для реализации оконного интерфейса. Есть некоторая вероятность, что среди них окажется библиотека, подходящая для решения задач данного проекта. Для того, что бы проверить это, необходимо провести поиск и анализ существующих библиотек. На основании задач проекта к свойствам возможного кандидата при поиске предъявляются следующие требования:
  • поддержка адаптивного дизайна для мобильных устройств;
  • кроссбраузерность;
  • оптимальный набор необходимых компонентов и небольшой размер исходных файлов;
  • свободная лицензия;
  • активная поддержка и разработка;
  • загрузка содержимого из файла JSON по средствам AJAX.




Таблица 1

 

Сбор данных осуществлен с помощью поисковой системы Google по запросам: “javascript оконный интерфейс”, “оконная библиотека javascript”, “оконный интерфейс с помощью javascript”. Было найдено шесть библиотек, названия и свойства которых представлены в таблице 1. В результате анализа свойств выяснилось что, выбранные библиотеки, выполняя визуализацию окон в web-документе, обладают достаточно мощным функционалом, но, в то же время, не отвечают некоторым из вышеуказанных требований. Практически все современные библиотеки реализации окон на JavaScript входят в состав больших фреймворков, а это значит, что вместе с необходимыми функциями они содержат множество компонентов, использование которых в данном проекте не предполагается. Лишний код занимает дополнительное место на жестких дисках сервера и в оперативной памяти компьютера, на котором запущен клиент. К таким фреймворкам из списка можно отнести jQuery UI, W2UI и Qooxdoo. ExtJS являясь так же многофункциональным фреймворком, кроме этого, имеет коммерческую лицензию и его использование оправдано в основном в больших проектах. Что касается WinLIKE и Windoo, их разработка прекратилась более 9 лет назад, соответственно они утратили свою актуальность и, возможно, их функционирование будет не достаточно корректно и оптимизировано в современных браузерах, так как с момента последнего обновления этих библиотек движки браузеров претерпели множество обновлений, сменилось несколько редакций спецификации языка JavaScript.
По результатам анализа принято решение о разработке собственной оконной библиотеки на языке JavaScript, которая сможет отвечать заявленным требованиям и предоставит оптимальный инструментарий для реализации оконного интерфейса.
Архитектура проекта, представленная на схеме (рис.1), разработаная на основе шаблона Model-View-Controller (MVC), имеет отклонение от классической модели MVC в виде дополнительного блока обозначающего DOM-элементы - объекты визуализации web-документа.

Рис.1

Библиотека предоставляет возможность динамического создания перемещаемых окон на странице браузера. Визуальная основа окна состоит из блочных тэгов div. На рисунке 2 приведена схема такого окна:

Макет

Рис.2

Описание элементов представлено в CSS-стиле с обозначением класса. Этим же способом элементы идентифицируются в html документе:
  1. Основной элемент - div.window;
  2. Заголовок окна - div.head;
  3. Элементы управления - div.controls;
  4. Содержание окна - div.body.
Внутренний элемент div.body содержит тэг form,  позволяющий манипулировать данными. Окно создается, используя свойства, полученные из JSON-объекта:

Рис.3

Хранение свойств и содержимого макета окна в формате JSON позволит в дальнейшем реализовать web-конструктор, предоставляющий инструменты для визуального создания и редактирования окон портала, созданного на основе разрабатываемой CMS.

Альфа-версия библиотеки способна обеспечить минимально требуемый функционал. Размер исходного кода вместе с таблицей каскадных стилей составляет 15Kb. В процессе дальнейшей разработки планируется добавить дополнительные функции отображения и контроля элементов интерфейса, необходимость внедрения которых будет продиктована задачами проекта.

Создание новой библиотеки функций в противовес использованию уже существующих решений позволило обеспечить ряд значимых преимуществ. Следует отметить что, методика программирования библиотеки сходна с методикой основного проекта разработки CMS, а это, в свою очередь,  позволит вести разработку и поддержку проекта в рамках одной парадигмы. Кроме того, библиотека имеет небольшой объём исходных файлов, не содержит лишнего кода и неиспользуемых компонентов, обеспечивает кроссбраузерность (по средствам библиотеки jQuery), реализует функции загрузки свойств и содержимого окна из JSON-объекта, визуализирует объекты с учетом адаптивной вёрстки, позволяющей пользователю комфортно работать в системе с любых мобильных устройств.

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

Библиографический список:

1. Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера. – 4-е изд., перераб. и доп. / Н.А.Прохоренок, В.А.Дронов. – СПб.: БХВ-Петербург,2015. – 768 с.: ил. – (Профессиональное программирование)
2. Ташков П.А. Веб-мастеринг на 100 %: HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка. — СПб.: Питер, 2010. — 512 с.: ил. — (Серия «На 100%»).
3. Османи Э. Разработка Backbone.js приложений . — СПб.: Питер, 2014. — 352 с.: ил. — (Серия «Бестселлеры O’Reilly»).
4. Свободная лицензия [Электронный ресурс] // Википедия, 2016. URL : https://ru.wikipedia.org/wiki/Свободная_лицензия (дата обращения: 13.10.2016)
5. Оконный интерфейс [Электронный ресурс] // Википедия, 2016. URL: https://ru.wikipedia.org/wiki/Оконный_интерфейс (дата обращения: 13.10.2016)




Рецензии:

27.12.2016, 8:40 Бондарь Иван Михайлович
Рецензия: В работе Амелькина В.В. "Разработка библиотеки функций для реализации оконного интерфейса на языке JavaScript" приведен вариант разработки программного обеспечения для оконного интерфейса. В последние десятилетия интерес к освоению программирования в России существенно снижен. Курсы программирования исчезают их университетских программ обучения студентов, что приводит к существенной зависимости пользователей вычислительной техники от иностранных разработчиков программного обеспечения. Поэтому разработка подобных отечественных программных приложений является весьма актуальной, так как позволяет снизить зависимость отечественных пользователей от иностранных разработчиков как прикладного так и системного программного обеспечения. Полагаю, что статья может быть рекомендована к публикации



Комментарии пользователей:

Оставить комментарий


 
 
▲
Вверх