Анализ технологий веб-программирования для создания модулей визуализации и выгрузки данных информационных систем
Характеристика современных технологий и программных пакетов для веб-разработки. Преимущества использования фреймворка языка JavaScript-VueJS при построении динамических настраиваемых диаграмм, а также автоматическом формировании электронных таблиц.
Рубрика | Программирование, компьютеры и кибернетика |
Вид | статья |
Язык | русский |
Дата добавления | 08.02.2022 |
Размер файла | 19,1 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://allbest.ru
Анализ технологий веб-программирования для создания модулей визуализации и выгрузки данных информационных систем
Д.А. Данилин, Я.В. Зиновьев, К.М. Кузьмин
Аннотация
Рассматриваются существующие технологии и пакеты инструментов веб-разработки, способствующие быстрому и качественному созданию модулей графического представления и выгрузки данных информационных систем. Описываются преимущества использования фреймворка языка 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 наиболее прост в изучении.
Таблица 1
Сравнение JavaScript фреймворков Vue.js, React и Angular
Vue.js |
React.js |
Angular |
|
• Прост в изучении; • встроенная анимация; • возможность постепенного внедрения; • легок в использовании и сопровождении; • малый размер фреймворка; • использует Virtual DOM; • гибкая структура приложения; • односторонняя передача данных |
• Использует Virtual DOM; • компоненты простые для понимания за счет связывания JavaScript и HTML в JSX; • возможность рендеринга React на сервере; • односторонняя передача данных; • изобилие пользовательских средств отрисовки; • возможность нативной отрисовки |
• Жесткая структура приложения; • двунаправленное связывание данных; • модульная архитектура; • большое количество гайдлайнов; • активное использование TypeScript; • направленность на большие, комплексные приложения |
Одной из особенностей Vue.js является предоставление возможности изменения приложения без разрушения его архитектуры, благодаря чему достигается легкое внедрение и расширение функционала ПО. Для построения стандартного высокопроизводительного интерфейса может быть целесообразен выбор Vue.js в качестве замены сложных и объемных фреймворков. Говоря о разработке веб-приложений, нельзя не упомянуть об использовании 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).
Размещено на Allbest.ru
Подобные документы
Понятие информационных технологий, этапы их развития, составляющие и основные виды. Особенности информационных технологий обработки данных и экспертных систем. Методология использования информационной технологии. Преимущества компьютерных технологий.
курсовая работа [46,4 K], добавлен 16.09.2011Статические и динамические веб-сайты, их характеристика. Анализ возможностей применения языка PHP, системы управления базами данных (СУБД) MySQL, фреймворка CodeIgniter для разработки динамических веб-сайтов. Разработка шаблонов и главной страницы.
курсовая работа [2,8 M], добавлен 19.09.2012Случаи использования PHP фреймворка. Обзор современных фреймворков. Выбор фреймворка для разработки сайта. Поддержка баз данных и сообщества. Model View Controller архитектура. Скорость развития фреймворка. Наличие встроенных javascript-библиотек.
курсовая работа [1,8 M], добавлен 31.05.2012Основные черты современных информационных технологий. Цель применения информационных технологий - снижение трудоемкости использования информационных ресурсов. Использованные программные средства для разработки информационной системы для продажи книг.
курсовая работа [1,2 M], добавлен 27.06.2014Программная и техническая характеристика информационных систем предприятия. Требования к информационной и программной совместимости. Проектирование программного обеспечения с использованием специализированных программных пакетов. Разработка базы данных.
отчет по практике [1,3 M], добавлен 11.04.2019Рабочая область окна и структура MS Excel. Применение и возможности электронных таблиц, преимущества использования при решении задач. Ввод и редактирование данных в ячейках, копирование данных, построение диаграмм, профессиональное оформление документов.
реферат [2,2 M], добавлен 10.06.2010Определение сущности, функций, задач и видов информационных технологий. Характеристика информационных технологий обработки данных, управления, автоматизированного офиса и поддержки принятия решений. Анализ современных видов информационного обслуживания.
презентация [866,0 K], добавлен 30.11.2014Исследование возможностей и областей использования языка программирования JavaScript. Сравнительный анализ языков программирования JavaScript и PHP. Разработка интерактивного Web-приложения на примере теста по теме "Программирование на языке Delphi".
практическая работа [26,0 K], добавлен 04.02.2015Области применения и реализации информационных систем. Анализ использования Web-технологий. Создание физической и логической модели данных. Проектирование информационных систем с Web-доступом. Функции Института Искусств и Информационных Технологий.
дипломная работа [3,8 M], добавлен 23.09.2013Понятие, виды и принципы информационных технологий. Педагогические цели и методические возможности использования информационных технологий в обучении музыке. Классификация педагогических программных средств. Тенденции развития музыкальной педагогики.
реферат [221,8 K], добавлен 16.12.2010