CC BY
104STUD NET
СРАВНЕНИЕ ЭФФЕКТИВНОСТИ ИСПОЛЬЗОВАНИЯ РАЗЛИЧНЫХ СОВРЕМЕННЫХ ФРОНТЕНД-ФРЕЙМВОРКОВ В КОРПОРАТИВНЫХ ПРИЛОЖЕНИЯХ
COMPARISON OF EFFICIENCY OF USING VARIOUS FRONTEND FRAMEWORKS IN CORPORATE APPLICATIONS
УДК 004.051 DOI: 10.24411/2658-4964-2020-1068
Зиатдинов Адель Радикович, 2 курс, факультет «Дизайна и программной инженерии», Казанский Национальный Исследовательский Технологический университет, Россия, г. Казань
Ziatdinov Adel Radikovich, undergraduate, 2 year, faculty of "Design and software engineering", Kazan National Research Technological University Russia, Kazan
Аннотация: Статья посвящена анализу использования различных современных фронтенд-фреймворков при разработке IT-решений. Фронтенд разработка является перспективным направлением в современном информационном мире, так как является фасадной частью приложения. Умение красиво и удобно представить свой бизнес продукт - одна из основных целей при разработке любого корпоративного решения. Основными критериями оценки служат: экономическая составляющая, трудоемкость интеграции, UI, UX. Также немаловажным фактором служит наличие объемной документации по API. В данной статье представлено сравнение по всем указанным пунктам, а так же анализ сильных и слабых сторон той или иной библиотеки.
Annotation: The article is devoted to the analysis of the use of various modern front-end frameworks in the development of IT solutions. Frontend development is a promising area in the modern information world, as it is a facade part of the application. The ability to beautifully and conveniently present your business product is one of the main goals in the development of any corporate solution. The main evaluation criteria are: the economic component, the complexity of integration, UI, UX. Also an important factor is the availability of extensive documentation on the API. This article presents a comparison of all these points, as well as an analysis of the strengths and weaknesses of a particular library.
Ключевые слова: фронтенд, фреймворк, сравнение, UI, UX, стоимость, документация.
Keywords: frontend, frameworks, UI, UX, costs, documentation.
В условиях динамически развивающихся технологий появляется все больше различных библиотек, ориентированных на предоставление пользователю максимально красочного и динамичного пользовательского интерфейса, а также удобства работы с ним. Именно это несут в себе такие понятия как UI (сокр. User interface = пользовательский интерфейс) и UX (сокр. User experience - пользовательский «опыт»). Для покрытия данной потребности на рынок выходит все больше наборов библиотек (или же -фреймворков), ориентированных на предоставление максимально широкого функционала для разработки «лицевой» части приложения. Основные библиотеки тесно связаны с такими технологиями как JavaScript (или же ECMAScript), HTML, CSS [1]. Задача любого бизнеса, или же, если говорить точно, корпоративного продукта - предоставить максимально удобный и привлекательный внешний интерфейс пользователю, так как по статистике именно плохо проработанный концепт дизайна, неудобная навигация, раздражающие всплывающие окна и прочие элементы пользовательского интерфейса являются основной причиной отказа пользователей от использования того или иного продукта.
Также стоит отметить, что некоторые компании не пользуются услугами популярных фронтенд фреймворков, а разрабатывают собственные движки для написания UI части приложения. Такой подход наиболее оптимален с точки зрения трудоемкой эффективности, так как собственная разработка целиком и полностью может быть кастомизированна именно вами, равно как и скорость исправления ошибок будет зависеть целиком от вашей компании, а не стороннего сервиса. Однако, данный подход требует значительных экономических ресурсов, поэтому к нему в основном прибегают, такие компании-гиганты как Google, Uber, Yandex. Многие из них в последующем открывают общедоступное API для компаний более малых и зарабатывают на монетизации транзакций по их сервису.
Анализу этих сервисов и будет посвящена данная статья, а также рассмотрим подробнее современный рынок фронтенд-услуг для более широкого понимания выбора корпоративных решений и критериев их отбора для конкретного продукта.
Первым, что интересует руководителей при выборе того или иного сервиса, естественно, является ценообразование [2]. Здесь стоит отметить -
большинство современных библиотек являются open-source проектами, что означает их доступность для бесплатной разработки сайтов непосредственно на них же. При всем этом данные продукты могут порадовать вас качеством, популярностью и очень обширной документацией. В этой статье мы будем рассматривать только бесплатные библиотеки - Angular, React, Vue, так как их платные альтернативы, к примеру, EXT.Js, имеют больший порог вхождения и постепенно утрачивают свою популярность.
Вторым пунктом рассмотрим вышеотмеченную популярность. Этот аспект является очень важным, так как он несет под собой такие вещи, как: широкое комьюнити, из которого вытекает LTPS самого проекта, иначе говоря, пользуясь популярными фреймворками, вы более уверены в том, что какие-либо внутренние ошибки или поддержка самой библиотеки может быстро прекратиться. Не существует открытых источников по анализу популярности той или иной библиотеки, поэтому будем оперировать данными наиболее популярных сервисов в IT-среде. Начнем с крупнейшего российского агрегатора вакансий - HeadHunter.com. Вот распределения процента вакансий по той или иной библиотеке:
1. React 79%
2. Angular 20%
3. Vue.js 0,8%
4. без уточнения среды 0,2%
Как мы видим, наиболее востребованы специалисты React.
Проанализируем также крупнейшее IT комьюнити - StackOverflow, где даются уже несколько другие цифры: 67% голосов отданы React, тогда как за Angular «проголосовало» 42% программистов.
Однозначным победителем по популярности оказался React, однако стоит учитывать, что по большей части это связано с использованием его в таких крупных проектах как Facebook, Instagram. К примеру, несмотря на такую статистику, больше всего звездочек на GitHub (крупнейшая репозитарная система, звездочка - оценка пользователя за понравившийся проект) имеет Vue.js, хотя специалисты данной области, как мы видим, на рынке не востребованы.
Следующим немаловажным критерием является UI и UX выбираемого сервиса (интерфейс и дружелюбность к пользователю). В данном разделе сложно выделить определенных победителей, каждый сервис предоставляет высокий уровень качества и детализации [3].
Рассмотрим интерфейс на примере нескольких наиболее популярных библиотек (React, Angular, Vue).
Рисунок 1. React app
Рисунок 2. Angular app
Научно-образовательный журнал для студентов и преподавателей «StudNet» №9/2020
I AVuejs Hello World
G В Secure | https:Wcodepen.io/flaviocopes/pen/YLoLOp?editors=1010
A Vue.js Hello World S
a pen by Flavio Copes
Pen Settings
Save Fork О Settings (PI Change View
HTML CSS JavaScript JavaScript Preprocessor
Add script as a modu le Q
O Add type="module" on the Pen's <script> tag
Add External Scripts/Pens Q
Any URL!s added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
Q External Resource search...
Recent:
react-router-dom.js
https://unpkg.com/vue
https://unpkg.com/vue
|щллгойсрсшшшсгттг1п1сфсшак0
Quick-add: —
Public ^H^B Private 013
B^Wue!js
i
Hello World
PEN DESCRIPTION
Explain what's going on in your Pen here. This text is searchable, so it can also help others find your work. Remember to credit others where credit is due. Markdown supported.
COM MA SEPARATED, MAX OF FIVE
Рисунок 3. Vue app
Нельзя не заметить одно солидное преимущество React-приложений -они одни из немногих имеют открытую интеграцию с крупнейшим инструментом разработки пользовательских интерфейсов - Figma.com.
Стоит отметить, что наиболее сложно охарактеризовать React интерфейс, так как он может быть очень обособленным.
Интерфейс Angular приложений более легко поддается описанию - здесь преобладает синий и красный цвета, все компоненты выглядят строго, и имеют четкие границы.
Vue приложения же, напротив - направлены на более молодежные продукты. Темные тона, более изящные изгибы компонентов, более динамическая анимация - все это отталкивает многие серьезные корпоративные решения.
Однако, стоит отметить, что все вышеупомянутые приложения имеют одно неоспоримое свойство - стандартный интерфейс данных приложения -все они прекрасно настраиваются, и в обычной ситуации не представляется возможности для моментального понимания исходной библиотеки, с помощью которой было разработано то или иное приложение.
В части интеграции все сервисы имеют удобное API, интегрируемое с любым языком программирования серверной части, здесь кого-то выделять не имеет смысла.
Последнее, на что стоит обратить внимание при выборе фронтенд фреймворка - наличие обширной документации. В данной ситуации сложно отметить отдельную библиотеку, так как каждая предоставляет обширное описание предоставляемого API. Можно отметить лишь более удобное, на взгляд автора данной статьи, описание предоставляемого функционала у React [4] - сказывается опыт большой компании.
Подводя итоги проведенного исследования, можем отметить, что каждый фронтенд фреймворк имеет свои преимущества и недостатки -большинство современных фреймворков имеют бесплатный доступ, а также обширную документацию. Каждый из них отлично справляется с рендерингом пользовательской части. Однако, как мы увидели в данном исследовании, наиболее популярным и перспективным на данный момент, несомненно, является React - он удобен как для использования в корпоративных решениях, так и для изучения начинающего разработчика, в связи с нехваткой кадров по данной технологии.
Использованные источники:
1. Мэтт, Ф. Angular. Сборник рецептов/ Ф. Мэтт. - Москва: Вильямс, 2018. - 466 с.
2. Фаулер, М. Архитектура корпоративных приложений/ М. Фаулер. -Москва: Вильяме, 2006. - 544 с.
3. Полякова Е.И. Учебный курс адаптивного веб-дизайна [Электронный ресурс] / Е.И. Полякова- Электрон. текстовые дан. - Новосибирск: [б.и.], 2008. - Режим доступа: https://cyberleninka.ru/article/n/uchebnyy-kurs-adaptivnogo-web-dizayna, свободный.
4. Официальная документация API REACT : сайт Facebook Inc. [Электронный ресурс]. URL: https: //ru.reactj s.org/
Used sources:
1. Matt, F. Angular. Collection of recipes / F. Matt. - Moscow: Williams, 2018 .-- 466 p.
2. Fowler, M. Architecture of corporate applications / M. Fowler. - Moscow: Williams, 2006 .-- 544 p.
3. Polyakova E.I. Training course of adaptive web design [Electronic resource] / E.I. Polyakova - Electron. text data - Novosibirsk: [b.i.], 2008. - Access mode: https://cyberleninka.ru/article/n/uchebnyy-kurs-adaptivnogo-web-dizayna, free.
4. Api react official documentation: Facebook Inc. website [Electronic resource]. URL: https://ru.reactjs.org/
