CC BY
257УДК 004.4'22
ОБЗОР СОВРЕМЕННЫХ ФРЕЙМВОРКОВ И ИНСТРУМЕТОВ, ИСПОЛЬЗУЕМЫХ
ДЛЯ РАЗРАБОТКИ WEB-ПРИЛОЖЕНИЙ
Байнов Артем Маратович, студент, Кривоногова Анастасия Евгеньевна, студент, Николаев Алексей Сергеевич, студент; Казанский государственный энергетический университет, Казань, РФ Богомолова Ольга Игоревна, старший преподаватель, Казанский национальный исследовательский технологический университет,
Казань, РФ
В настоящее время активно развиваются технологии web-программирования. В данной статье выполнен обзор одних из самых популярных фреймворков и инструментов, предназначенных для разработки web-приложений в условиях современных стандартов. Были изучены плюсы и минусы каждого из них.
Ключевые слова: web-технологии; фреймворк;разработка web-приложений; Angular; JQuery; React; Vue.js.
REVIEW OF MODERN FRAMEWORKS AND INSTRUMENTS USED FOR THE DEVELOPMENT OF WEB-APPLICATIONS
Bainov Artem Maratovich, student, Krivonogova Anastasia Evgenievna, student, Nikolaev Alexey Sergeevich, student; Kazan State Power Energy University, Kazan, Russian Federation Bogomolova Olga Igorevna, senior lecturer; Kazan National Research Technological University, Kazan, Russian Federation
Currently, web-programming technologies are being actively developed. This article provides an overview of some of the most popular frameworks and tools designed to develop web applications in modern standards. The pros and cons of each of them were studied. Keywords: web-technologies; framework; web-application development; Angular; JQuery; React; Vue.js.
Для цитирования: Обзор современных фреймворков и инструметов, используемых для разработки web-приложений / А.М. Байнов, А.Е. Кривоногова, А.С. Николаев, О.И. Богомолова // Наука без границ. 2020. № 1(41). С. 19-23.
В настоящее время крайне сложно представить крупную компанию без собственного web-приложения. Вместе с интересом организаций растёт количество библиотек и фреймворков, нацеленных на облегчение разработки высококачественных web-приложе-ний с использованием одного языка программирования. Стоит отметить,
что на текущий момент одним из самых лидирующих является JavaScript. Это объясняется тем, что современный пользователь неохотно устанавливает дополнительные программы, желая получить результат здесь и сейчас.
Фреймворки стали неотъемлемой частью web-разработки, так как стандарты приложений постоянно моди-
фицируются и, как следствие, растет сложность технологии. Использование готовых инструментов и библиотек, одобренных тысячами разработчиков по всему миру, является разумным подходом для создания многофункциональных и интерактивных web-приложений. Выбор фреймворка - задача несложная, но при выборе стоит учесть, что у каждого имеются свои плюсы и минусы. На данный момент самыми популярными являются: Angular, JQuery, React, Vue.js.
1. Angular можно считать лучшим фреймворком для веб-приложений. Он однозначно лидирует среди продуктов компании Google для разработчиков. Его предшественник - AngularJS - был впервые выпущен в 2009 г. и полностью переписан в 2016 г.
Благодаря поддержке TypeScript Angular является хорошим вариантом для разработки громоздких веб-приложений. Благодаря таким функциям языка, как двустороннее связывание и внедрение зависимостей, обеспечивается высокая производительность конечного продукта при меньших усилиях во время разработки.
Angular используется для разработки мобильных и веб-приложений. В дополнение к стандартному использованию одностраничного приложения с соответствующей библиотекой, такой как, например, Universal, возможно создание многостраничной версии. Что касается мобильной разработки, Google предоставил пользователям специальную платформу Ionic, нацеленную на создание и поддержку Native и Progressive приложений.
Основные преимущества фреймворка Angular, повышающие скорость и производительность, - это синтаксис шаблона и инструменты командной
строки (CLI) для быстрого создания прототипов. Angular лучше всего подходит для написания одностраничных приложений, но его также используют и для разработки крупных корпоративных веб-приложений.
2. jQuery - это библиотека для манипулирования DOM деревом, которая упрощает использование JavaScript на сайте. JavaScript является языком выбора для создания динамических и интерактивных веб-страниц. jQuery берет сложный код, который потребуется для выполнения вызовов AJAX или манипулирования DOM, и объединяет их в простые методы, которые можно вызывать с помощью одной строки JavaScript.
Вот некоторые из ключевых технических функций, которые доступны в библиотеке jQuery:
- HTML / DOM манипулирование,
- Манипулирование CSS,
- AJAX / JSONP,
- Обработка событий,
- Эффекты и анимация.
jQuery не делает никаких предположений о стеке веб-технологий и может использоваться в сочетании с другими платформами, включая AngularJS. На самом деле AngularJS построен на основе реализации jQuery, называемой jqLite.
Поскольку jQuery не имеет реальной структуры, разработчик имеет полную свободу создавать проекты по своему усмотрению. Также отсутствие структуры означает, что разработчику легче попасть в ловушку «спагетти-кода», что может привести к путанице в крупных проектах без четкого направления проектирования или поддержки кода. В таких ситуациях большую помощь может оказать AngularJS.
Обмен данными с сервером может
осуществляться с помощью метода jQuery Ajax. Несмотря на то, что ранние версии jQuery не были предназначены для создания мобильных приложений, в настоящее время для этих целей применяется фреймворк jQuery Mobile. Данный инструмент помог расширить границы использования jQuery, адаптировавшись к современным требованиям, но все еще уступает React и Vue. Еще одним ключевым моментом является то, что jQuery обладает постоянной поддержкой разработчиков, в частности - своевременное обновление версий фреймворка, внедрение новых библиотек и плагинов, которые помогают найти нужное решение во время работы над проектом. Основным преимуществом jQuery, по сравнению с другими фреймворками и библиотеками, является совместимость со всеми браузерами (кросс-бра-узерность).
3. ReactJS, разработанный компанией Facebook, является библиотекой с открытым исходным кодом, направленной на создание пользовательских интерфейсов мобильных и web-при-ложений. React представил концепцию виртуального DOM, которая считается одной из наиболее значительных преимуществ ReactJS [3]. Благодаря характеристике виртуального DOM (Document Object Model), React отличается исключительной производительностью. С точки зрения уровня сложности, React является одним из самых простых в освоении, особенно по сравнению с Angular. React приобрел известность благодаря архитектуре на основе компонентов, которую другие платформы начали использовать гораздо позднее. Такой структурный подход позволяет сравнительно быстро и просто создавать интерфейс.
Стоит отметить, что библиотека направлена не только на создание пользовательского интерфейса одностра-ничного веб-приложения (SPA), но и на мобильную разработку. Платформа React Native - это фреймворк, нацеленный на разработку кроссплатформен-ных высококачественных приложений для iOS и Android. Преимуществами данного инструмента являются: виртуальный DOM, разнообразие совместимых модулей (Browserify, RequireJS, ECMAScript 6 и другие), установленные компоненты, однонаправленный поток кода, Redux. Недостатками выступают плохая документация и сложность понимания кода.
4. Vue.js. Это еще одна прогрессивная JavaScript-инфраструктура с открытым исходным кодом для создания пользовательских интерфейсов, аналогичная React. Особенностью Vue.js является его адаптивность, интеграция в проекты, так как другие библиотеки JavaScript очень просто интегрируются с Vue [4]. Также Vue. js поддерживает декларативный рендеринг с использованием синтаксиса шаблона для предоставления данных в DOM, благодаря которому становится производительным и гибким. Еще одной важной особенностью является то, что данный фреймворк имеет значительно меньший размер по сравнению с React и Angular. Разработчики Vue преследовали цель сделать его упрощенным, легким в обучении, подробно документированным и постоянно развивающимся, поэтому он подходит для начинающих специалистов.
Структура Vue.js имеет широкое назначение: от веб-приложений до мобильных устройств и PWA (Progressive Web Applications). Подобно React, он подходит для различных типов проек-
тов: от простых одностраничных приложений до более сложных и динамичных. Для разработки мобильных приложений в основном используют Weex Framework. За исключением высокой производительности и простоты, которые являются его основными функциями, Vue поддерживает множество компонентов, которые легко внедряются в проект.
Из плюсов можно выделить плавную интеграцию между приложениями, производительность по сравнению с другими платформами, подробную документацию, не требует специальных знаний HTML и JavaScript. Из минусов - закрытое развитие сообщества.
Проведенные исследования позволяют сделать вывод о многообразии доступных инструментов для веб-разработки. Выбор и оценка структуры зависят от того, какую проблему необходимо решить. Например, для создания простого одностраничного при-
ложения подойдёт Angular, для более требовательных - React.
JQuery и Angular не могут конкурировать с React и Vue [5]. Несмотря на то, что они не следуют современным тенденциям, у них есть свои преимущества, особенно у JQuery, который до сих пор широко используется. Когда речь идёт о большом количестве рабочих мест с высокой зарплатой, на слуху разработчики React и Angular. Пока это вопрос времени, но, когда Vue достигнет своего уровня, ситуация может кардинально измениться. Vue уникален, похож на Angular, но гораздо проще и является хорошим выбором для начинающих. Согласно статистике популярности Vue догоняет Angular и React ввиду того, что данный фреймворк не был создан крупными компаниями. Этот фактор важен для оценки качества конечного инструмента.
СПИСОК ЛИТЕРАТУРЫ
1. Фримен Адам. Angular для профессионалов. Руководства. - Изд. Питер. 2018. -С. 800.
2. Антон Шевчук. jQuery для начинающих. Учебник. Программирование. - Издательский дом. Питер, 2016. - С. 156.
3. Бэнкс Алекс. React и Redux. Функциональная веб-разработка. Программы. - Издательский дом. Питер, 2018. - С. 336.
4. Эрик Хэнчетт. Vue.js в действии. Профессиональная литература. - Издательский дом. Питер, 2018. - С. 304.
5. Веб-фреймворки: введение для новичков [Электронный ресурс]. - Режим доступа: https://tproger.ru/translations/web-frameworks-how-to-get-started/ (дата обращения: 07.12.2019 г.).
REFERENCES
1. Freeman Adam. Angular dlya professionalov. Rukovodstva [Angular for professionals. Guides]. Izd. Piter, 2018, p. 800.
2. Anton Shevchuk. jQuery dlya nachinayushchih. Uchebnik. Programmirovanie [jQuery for beginners. Textbook. Programming]. Izdatel'skij dom. Piter, 2016, p. 156.
3. Benks Aleks. React i Redux. Funkcional'naya veb-razrabotka. Programmy [React and Redux. Functional web development. Programs]. Izdatel'skij dom. Piter, 2018, p. 336.
4. Erik Henchett. Vue.js v dejstvii. Professional'naya literature [Vue.js in action. Professional literature]. Izdatel'skij dom. Piter, 2018, p. 304.
5. Veb-frejmvorki: vvedenie dlya novichkov [Web frameworks: introduction for beginners]. Available at: https://tproger.ru/translations/web-frameworks-how-to-get-started/ (accessed 07 December 2019).
Материал поступил в редакцию 19.01.2020 © Байнов А.М., Кривоногова А.Е., Николаев А.С., Богомолова О.И., 2020
