CC BY
85
ТЕХНИКА, ТЕХНОЛОГИЯ, УПРАВЛЕНИЕ
УДК 004.432
Д. А. Данилин, Я. В. Зиновьев, К. М. Кузьмин
АНАЛИЗ ТЕХНОЛОГИЙ ВЕБ-ПРОГРАММИРОВАНИЯ ДЛЯ СОЗДАНИЯ МОДУЛЕЙ ВИЗУАЛИЗАЦИИ И ВЫГРУЗКИ ДАННЫХ ИНФОРМАЦИОННЫХ СИСТЕМ
Аннотация. Рассматриваются существующие технологии и пакеты инструментов веб-разработки, способствующие быстрому и качественному созданию модулей графического представления и выгрузки данных информационных систем. Описываются преимущества использования фреймворка языка JavaScript-VueJS в совокупности с библиотеками ChartJS и SheetJS при построении динамических настраиваемых диаграмм, а также автоматическом формировании электронных таблиц. Кроме того, обосновывается целесообразность использования CSS-препроцессоров, а также сборщиков Webpack и NPM при разработке веб-приложений.
Ключевые слова: веб-программирование, JavaScript, front-end, Vue.js, Chart.js, SheetJS/js-xlsx, Webpack, выгрузка данных, модуль визуализации.
Визуализация данных и их выгрузка - один из этапов функционирования большинства информационных систем (ИС), основанных на тесном взаимодействии с человеком, предназначенных для формирования метрик, показателей, графиков. Говоря о современных ИС, ключевой задачей которых является представление данных, стоит отметить, что наиболее популярным способом доставки «продукта» до конечного пользователя является применение веб-технологий - связки HTML + CSS + JS. Распространенность данных технологий, обилие рынка труда разработчиков, работающих в данном стеке [1], повсеместное использование клиент-серверной архитектуры приложений и смещение фокуса внимания потребителей в сторону мобильных устройств [2] - все эти факторы также подтверждают целесообразность использования CSS, HTML и JS при работе над рассматриваемыми задачами.
Современный человек усваивает от 50 до 80 % информации посредством органов зрения. Представление данных в виде графиков повышает наглядность различных результатов, способствуя быстрому считыванию и запоминанию информации. Язык инфо-графики зачастую не требует специальных знаний, необходимых для понимания заложенной информации [3]. Ориентируясь на наиболее популярные типы графиков и типовые потребности пользователей, группой разработчиков был создан Chart.js -JavaScript библиотека, позволяющая предоставлять информацию в удобном для пользователей виде. Chart.js способен визуализировать данные посредством графиков при помощи технологии SVG. Являясь кроссбраузерным решением, которое имеет частичное аппаратное ускорение (с возможностью асинхронного рендеринга), Chart.js позволяет не загружать движок JavaScript на продолжительное время, сохраняя время отклика пользовательского интерфейса [4].
Не менее эффективным способом представления объемных типовых данных является использование таблиц. Такой подход позволяет легко упорядочивать, систематизи-
ровать и использовать для дальнейшей внесистемной обработки представляемые данные. Реализация выгрузки данных в виде таблиц возможна с применением библиотеки SheetJS/js-xlsx, которая обеспечивает сбор и преобразование данных в формат электронных таблиц. Данное средство акцентируется на надежности синтаксического анализа, совместимости функций форматирования с унифицированным представлением JS и совместимость браузера ES3 / ES5 с IE6. Js-xlsx соответствует общему формату электронных таблиц (CSF), что позволяет получать данные из определенной ячейки таблицы, выгружать данные в необходимом виде (расширении), использовать формулы, стилизовать выгружаемые таблицы. Библиотека SheetJS сочетает в себе принципы легкого, структурированного написания кода, обеспечивающего кроссплатформенность веб-ориентированного приложения [5].
Разработка удобных, эффективных и развивающихся программных решений требует внимания к ключевым процессам внутренней бизнес-логики, ставя на второй план работу над типовыми синтаксическими конструкциями. Это и обусловливает большую популярность различных фреймворков в настоящее время. Сегодня одним из популярных фреймворков языка программирования JS является Vue.js [6]. Он был спроектирован для упрощения разработки front-end части IT-проектов и был призван избавить программиста от написания однотипного кода. В основе Vue.js лежит компонентный подход. Компоненты позволяют расширить элементы, находящиеся в HTML-странице и обособить многократно используемый код в отдельные модули, с целью повторного взаимодействия и реализации наследования [7]. Таким образом, получается иерархическая структура компонентов. В концепции Vue.js используются принципы реактивного программирования - автоматическое обновление состояний представлений при обновлении соответствующих связанных данных. Реактивное программирование приносит с собой множество полезных нововведений, предоставляет возможность концентрации на взаимосвязи событий, для разработчика исключается необходимость постоянной поддержки программного кода с большим количеством деталей реализации. Код становится короче и проще. Появляется возможность реализации сложнозавязанного приложения, в котором изменение одного объекта может повлечь за собой некие заранее определенные действия (отправка данных на сервер, уведомление пользователей, формирование таблиц и т.д.).
Производя сравнение Vue.js с другими популярными решениями (табл. 1), такими как React.js и Angular, стоит отметить, что именно Vue.js наиболее прост в изучении. Одной из особенностей Vue.js является предоставление возможности изменения приложения без разрушения его архитектуры, благодаря чему достигается легкое внедрение и расширение функционала ПО. Для построения стандартного высокопроизводительного интерфейса может быть целесообразен выбор Vue.js в качестве замены сложных и объемных фреймворков.
Таблица 1
Сравнение JavaScript фреймворков Vue.js, React и Angular
Уие^ React.js Angular
• Прост в изучении; • встроенная анимация; • возможность постепенного внедрения; • легок в использовании и сопровождении; • малый размер фреймворка; • Использует Virtual DOM; • компоненты простые для понимания за счет связывания JavaScript и HTML в JSX; • возможность рендеринга React на сервере; • односторонняя передача • Жесткая структура приложения; • двунаправленное связывание данных; • модульная архитектура; • большое количество гайдлайнов;
Техника,технология, управление
Vue.js React.js Angular
• использует Virtual DOM; • гибкая структура приложения; • односторонняя передача данных данных; • изобилие пользовательских средств отрисовки; • возможность нативной отрисовки • активное использование TypeScript; • направленность на большие, комплексные приложения
Говоря о разработке веб-приложений, нельзя не упомянуть об использовании CSS препроцессоров. Препроцессоры представляют собой некие надстройки, добавляющие в CSS логику программирования. Таким образом, открывается возможность использования переменных, циклов, условий и других функций в каскадных таблицах стилей [8]. Препроцессоры имеют поддержку всего того функционала, который представлен в CSS. Они позволяют минимизировать временные затраты на стадии верстки веб-страницы. Препроцессоры избавляют программиста от необходимости систематического копирования фрагментов кода, тем самым оставляют больше времени на решение иных задач, возникающих при разработке продукта. Также они способствуют созданию «чистого», структурированного кода, в котором при необходимости легко реализуем рефакторинг. Кроме того, немаловажным преимуществом использования препроцессоров является их возможности в области автоматической расстановки вендорных префиксов. Одной из особенностей работы над веб-страницами является необходимость кроссбраузерной поддержки, т.е. разработки таких элементов приложения, которые будут одинаково отображаться в различных браузерах. Зачастую это достигается благодаря использованию «CSS hacks» либо вендорных префиксов. CSS хаки - это части кода, которые интерпретиро-ванно выполняются единственным, заранее определенным браузером. Использование «CSS hacks» признано плохой практикой, потому как код становится невалидным и сложно читаемым. Применение префиксов является более «чистым» и правильным способом. Каждое семейство браузеров имеет собственные префиксы, которые оказывают влияние только на элемент, находящийся в данном браузере, и пропускаются иными платформами.
Немаловажным этапом в работе над проектом является его сборка. Большой распространенностью и эффективностью отличается связка программных средств Node.js и Webpack. Использование данных инструментов позволяет не только упростить работу разработчиков и оптимизировать процесс сборки проектов, но и повысить надежность финального продукта. Node.js - это средство, позволяющее разрабатывать серверную часть на языке JavaScript, является кроссплатформенным и имеет множество возможностей, таких как эмиттеры событий, циклы событий, аддоны на С++ и др. Отдельного внимания заслуживает один из элементов Node.js-пакетный менеджер node.js package manager (npm). Npm позволяет легко устанавливать все необходимые библиотеки и зависимости между ними. Еще одним значимым преимуществом данного менеджера является автоматическое создание файла package.json, содержащего информацию о проекте: название, дату создания, версии библиотек и т.д. Такой подход широко применяется при параллельной работе над проектом несколькими специалистами, так как для передачи задействованных модулей в данном случае необходимо отправить только один файл, в котором описаны используемые зависимости. Webpack - сборщик, который позволяет поддерживать новые версии стандарта EcmaScript и компоновать все создаваемые package. json файлы в необходимое количество пакетов (bundles). Использование Webpack сборки способствует легкой настройке поддержки браузерами технологии ES6 (асинхронной подгрузки необходимых для взаимодействия модулей в случае работы пользователя с ними) [9].
Широкие возможности Webpack позволяют говорить о применении «модульности» не только к JavaScript, но и к CSS. Представленный подход позволяет разбивать любой файл на более удобные маленькие части, задействовать их вторично и т.д. Кроме того, Webpack имеет поддержку дополнительных функциональных возможностей (загрузчики, плагины), позволяющих внедрять различные операции на всех этапах сборки проекта. Эта особенность предоставляет возможность построения структурированного конвейера операций над исходными файлами.
Таким образом, решение задачи создания модулей визуализации и выгрузки данных различных веб-ориентированных (разработанных с использованием стека технологий HTML, CSS, JS) информационных систем может быть сильно упрощено и оптимизировано по времени при использовании фреймворка Vue.js, библиотек работы с графиками Chart.JS и электронными таблицами Sheet.js, а также SASS-препроцессоров и сборщиков Webpack и NPM.
Библиографический список
1. Developer survey results 2019. - URL: https://insights.stackoverflow.com (дата обращения: 01.05.2019).
2. Developer survey results 2019. - URL: https://insights.stackoverflow.com (дата обращения: 01.05.2019).
3. Большая книга веб-дизайна. - Москва : Терри Фельке-Моррис - ЭКСМО, 2017. - 599 c.
4. ChartJS - JavaScript - библиотека визуализации данных. - URL: https://habr.com/ru (дата обращения: 02.05.2019).
5. SheetJS js-xlsx. - URL: https://docs.sheetjs.com (дата обращения: 02.05.2019).
6. Javascript-фреймворки: тенденции 2019 года. - URL: https://habr.com/ru (дата обращения: 04.05.2019).
7. Vue.js - Прогрессивный JavaScript-фреймворк данных. - URL: https:// ru.vuejs.org (дата обращения: 05.05.2019).
8. Malinochkin, Denis. Less - путеводитель для новичков / Denis Malinochkin. - Published with GitBook, 2015. - 176 c.
9. Пособие по web-pack данных. - URL: https://habr.com/ru (дата обращения: 03.05.2019).
Данилин Дмитрий Андреевич, студент, Пензенский государственный университет. E-mail: timondimon98@gmail.com
Зиновьев Ярослав Вячеславович, студент, Пензенский государственный университет. E-mail: yaroslav005@bk.ru
Кузьмин Кирилл Максимович, студент, Пензенский государственный университет. E-mail: mr.kirilll12@mail.ru
Образец цитирования:
Данилин, Д. А. Анализ технологий web-программирования для создания модулей визуализации и выгрузки данных информационных систем / Д. А. Данилин, Я. В. Зиновьев, К. М. Кузьмин // Вестник Пензенского государственного университета. - 2019. - № 3 (27). - С. 76-79.
