АНАЛИЗ ФРЕЙМВОРКОВ ДЛЯ РАЗРАБОТКИ СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ

ИНФОРМАТИКА, ВЫЧИСЛИТЕЛЬНАЯ ТЕХНИКА И УПРАВЛЕНИЕ

АНАЛИЗ ФРЕЙМВОРКОВ ДЛЯ РАЗРАБОТКИ СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ

Сергачева Марина Александровна Михалевская Карина Анатольевна

Нижегородский государственный Технический университет им. Р.Е. Алексеева г. Нижний Новгород

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

Существует множество фреймворков, которые регулярно обновляются и совершенствуются. И выбрать наиболее подходящий фреймворк оказывается нетривиальной задачей.

На начальном этапе создания проекта будет целесообразно произвести анализ, который поможет выбрать подходящую технологию. Фреймворк — это платформа, определяющая структуру веб-приложения. Его функционал позволяет осуществить взаимодействие веб-ресурса с сервером.

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

Данный принцип можно наблюдать при создании одностраничных веб-приложений, электронной коммерции, облачных сервисов и многих социальных сетей. Так, переход пользователя из одного раздела в другой осуществляется мгновенно. Перегрузки страницы не происходит, так как неизменно остается каркас - постоянная часть проекта.

Преимущества использования фреймворка:

• фреймворки являются полностью бесплатными и имеют открытый исходный код;

• использование встроенных шаблонов помогает создавать проекты более высокого качества, при этом задействуется меньше строчек кода;

• высокая скорость разработки, которая достигается за счет открытого доступа к документации и множества форумов.

За реализацией проектов на классическом JS и HTML скрывается много трудностей, что приводит к появлению большого числа фреймворков на рынке. Но наиболее популярными среди веб-разработчиков остаются Angular, React и Vue (рис. 1).

Рис. 1. Популярные фреймворки

Angular

Angular — это кроссплатформенный фреймворк, разработанный компанией Google. Он придерживается строгой иерархии и представляет собой большую инфраструктуру для комплексных решений. Часть серверной службы фреймворка переносится на клиентскую сторону, что уменьшает нагрузку на сервер [11.

К дополнительным преимуществам Angular следует отнести:

• доступную документацию;

• мощные инструменты для разработки;

• поддержку сообщества;

• актуальность;

• стабильность.

Слабой стороной фреймворка является высокий порог вхождения, поскольку нужно быть знакомым с подмножеством языка JS - TypeScript (рис.2).

Solution Explorer - Folder View » ^ x Û ! - 5 6 if -

Search Solution Explorer - Folder Viev P w * Û ionk-test-app-rnaster CC\.Users\l

ml app

TS appxomponentts

app.html Ts app,module,ts D app.scss

P  imgs

IS angular-calendar.css tJ models

Ts CalendarEvefitts ts EventAction.ts ts EventColor.ts Û pages J 0 calendar

calendarhtml TS calendar.module.ts D calendarscss

inde*.html ¿J manifestjson U service-worker.ji Q .edrtorconfig D ,giiignore D contigjiml oT ionitconfïg.json ¿J packagejson

caleridar.html irvdexhtml calendar.ts -ь x calendar.module.ts

ionic-test-app-master

CalendarPage

* Generated class for the CalendarPage page.

* See https://ionicframework. com/docs/components/ffnavigaticri for more info on

* Ionic pages and navigation. */

@IonicPage() B@Component({

I selector: 'page-calendar', : templateUrl: 'calendar.html', .})

Brxport с 1 a s s CalendarPage implements Onlnit {

public date: Date = new Date(Date,now());

days_label: Array<stririg> = [

'Mon', 'Tue', 'Wed', 'Thür', 'Fri', 'Sat', 'Sun'

];

constructor(public navCtrl: NavController, public navParams: NavParams) { }

public colors: any = { red: {

primary: '#ad2121', secondary: '#FAE3E3'

},

blue: {

Рис. 2. Пример кода на TypeScript

Другой проблемой становится регулярный выход новых версий - в 2020 году был представлен Angular 9 [2]. То есть необходимо систематически совершенствовать знания для работы с данным фреймворком. Также за большие возможности, предусмотренные в Angular, приходится платить нагрузкой на производительность.

React.js

Сильные стороны React:

• поддержка Facebook;

• высокая скорость работы;

• большое community;

• кроссплатформенность;

• разработка UI на основе отдельных компонентов;

• технология Virtual DOM (высокая производительность).

import React from "react";

const ProductList = ({ products }) => {

return (

<ul>

{products.map(product => ( <11 key={product.td}>

<span>{product.name}</span> <a href="#">Add to Cart</a>

</li> ))}

</ul>

export { ProductList };

Рис. 3. Реализация компонента React

Однако необходимость в сторонних библиотеках для работы делает процесс разработки запутаннее. Отсутствуют стандарты в написании кода на HTML и CSS, что есть у его конкурентов - Angular и Vue.JS. Приходится прибегать к дополнительным плагинам, поскольку не все стандартные браузеры поддерживают этот фреймворк [4].

Имеется доступ к управлению низкоуровневым функционалом, но для новичков это скорее минус. Поэтому React подходит для более опытных разработчиков. Vue.js

Примечательно то, что за созданием данного инструмента стоит всего один талантливый разработчик - Эван Ю. Из-за чего большими корпорациями данный инструмент воспринимается с долей скептицизма. Тем не менее Vue.js пользуется спросом среди китайских компаний, в частности всем известная Xiaomi.

Данный фреймворк преимущественно отвечает за представление, тем самым позволяя упростить взаимодействие с другими проектами и библиотеками. Кроме того, Vue.js больше подходит для небольших проектов [61.

Сильные стороны:

• скорость;

• небольшой вес;

• лаконичность;

• приверженность стандартам HTML, CSS;

• поддержка TS, JSX;

• низкий порог входа.

Слабыми местами являются недостаточно большое community и отсутствие структуры. Однако репутация Vue.js со временем растет.

] Project » €) "Г О —

Ш vue-youtube /Documents/proji

Ш и library root

Ш public

¿imain.js

¿i registerServiceWorker.js

£3 .browsersllstrc ä .gitignore

babel.conf ig.js if, package.json j" package-lock.json postcss.conftg.js 11 README.md Uli External Libraries  с Scratches and Consoles

</ul> </template>

<script> export default { props: { users: { type: Array, required: true

}

}

}

</script>

<style lang="scss"-

^ Enter a new file name:

list-style: no UserForm.vuel

}

</style>

Рис. 4. Создание нового файла в Vue

Вывод

Существуют ключевые факторы, помогающие выбрать наиболее подходящую технологию:

Табл.1

Сравнение фреймворков по ключевым факторам

Фреймворк Скорость Следование стандартам Поддержка community Разработана Порог входа Комплексность проекта

Angular *** да да Google высокий *****

React **** нет да Facebook средний ****

Vue ***** да нет Эван Ю *** низкий ***

Если в проекте имеются такие технологии, как TypeScript или JSX, то стоит остановиться на Angular и React. Однако для проекта, который пишется с нуля или изменяется, однозначно подходит Vue.js без ущерба производительности.

Все рассмотренные выше фреймворки являются популярными среди frontend-разработчиков и продолжают развиваться, уверенно занимая ведущие места на рынке веб-разработки. Из графика можно заметить, что на данный момент по популярности Vue вырвался вперед, немного опережая React.

1W12/2012 ОЯ13Л014 12/13/2015 07Л4У2С17

Рис. 5. График популярности фреймворков на GitHub

Список литературы

1. Django, 2019. Как работают веб-приложения. [В Интернете] Available at: https://habr.com/ru/post/450282/ [Дата обращения: 12 март 2020].

2. Martin, S., 2019. JS-фреймворки для фронтенд-разработки. [В Интернете] Available at: https://habr.com/ru/company/ruvds/blog/476286/ [Дата обращения: 10 марта 2020].

3. Neil, P., 2019. Что лучше выбрать в 2020 году — React или Vue?. [В Интернете] Available at: https://habr.com/ru/company/ruvds/blog/470413/ [Дата обращения: 15 март 2020].

4. techrocks, р., 2019. Самые популярные фреймворки и языки программирования. [В Интернете] Available at: https://techrocks.ru/2019/07/20/most-popular-frameworks-and-languages-in-startups/ [Дата обращения: 12 март 2020].

5. Минин, В., 2019. React или Vue или Angular. Что Выбрать? (Про Каждый Отдельно). [В Интернете] Available at: https://www.youtube.com/watch?v=Nm8GpLCAgwk&t=607s [Дата обращения: 16 март 2020].

СОСТОЯНИЕ РАЗВИТИЯ ИНТЕЛЛЕКТУАЛЬНЫХ ТРАНСПОРТНЫХ СИСТЕМ

В КАЗАХСТАНЕ

Серик Алгожаевич Кульмамиров,

Научный руководитель -доцент, к.т.н., академикМАИН Алия Абдрахмановна Есбергенова,

магистрант

Казахстанско-Британский технический университет (КБТУ),

г. Алматы, Казахстан

STATE OF DEVELOPMENT OF INTELLIGENT TRANSPORT SYSTEMS IN KAZAKHSTAN

Serik Algozhaevich Kulmamirov,

associate Professor, Ph. D., academician Aliya Abdrakhmanovna Yesbergenova,

master student

Kazakh-British technical University (KBTU), Almaty, Kazakhstan

Аннотация. Статья посвящена актуальной для Казахстана теме проблем развития интеллектуальных транспортных систем (ИТС) в РК. Эта тема связана с пониманием роли и места автоматизации элементов логистики. Представлены результаты моделирование транспортных потоков.