CC BY
259ИНФОРМАТИКА, ВЫЧИСЛИТЕЛЬНАЯ ТЕХНИКА И УПРАВЛЕНИЕ
АНАЛИЗ ФРЕЙМВОРКОВ ДЛЯ РАЗРАБОТКИ СОВРЕМЕННЫХ ВЕБ-ПРИЛОЖЕНИЙ
Сергачева Марина Александровна Михалевская Карина Анатольевна
Нижегородский государственный Технический университет им. Р.Е. Алексеева г. Нижний Новгород
Аннотация. В данной статье рассмотрены популярные фреймворки, используемые для разработки современных веб-приложений. Проведен анализ ключевых факторов наиболее популярных фреймворков в настоящее время.
Ключевые слова: веб-приложение, разработка, фреймворк, разработка веб-сайта, инструменты для разработки, кроссплатформенность, javascript, typescript.
Язык JavaScript уверенно набирает популярность среди frantend-разработчиков. С помощью него можно реализовывать интересные решения интерфейсов, создавать интерактивные и эргономичные сайты, а также разрабатывать веб-приложения более просто и понятно.
Существует множество фреймворков, которые регулярно обновляются и совершенствуются. И выбрать наиболее подходящий фреймворк оказывается нетривиальной задачей.
На начальном этапе создания проекта будет целесообразно произвести анализ, который поможет выбрать подходящую технологию. Фреймворк — это платформа, определяющая структуру веб-приложения. Его функционал позволяет осуществить взаимодействие веб-ресурса с сервером.
На веб-сайтах, которые написаны без использования фреймворка, первоначальный контент хранится на сервере. Поэтому при загрузке нового материала на сайт требуется перезагрузка страницы. Преимуществом же фреймворка являются неизменные блоки, которые сохраняются от одной конфигурации к другой. Это позволяет добиваться мгновенной обратной связи с пользователем при добавлении нового контента.
Данный принцип можно наблюдать при создании одностраничных веб-приложений, электронной коммерции, облачных сервисов и многих социальных сетей. Так, переход пользователя из одного раздела в другой осуществляется мгновенно. Перегрузки страницы не происходит, так как неизменно остается каркас - постоянная часть проекта.
Преимущества использования фреймворка:
• фреймворки являются полностью бесплатными и имеют открытый исходный код;
• использование встроенных шаблонов помогает создавать проекты более высокого качества, при этом задействуется меньше строчек кода;
• высокая скорость разработки, которая достигается за счет открытого доступа к документации и множества форумов.
За реализацией проектов на классическом JS и HTML скрывается много трудностей, что приводит к появлению большого числа фреймворков на рынке. Но наиболее популярными среди веб-разработчиков остаются Angular, React и Vue (рис. 1).
Рис. 1. Популярные фреймворки
Angular
Angular — это кроссплатформенный фреймворк, разработанный компанией Google. Он придерживается строгой иерархии и представляет собой большую инфраструктуру для комплексных решений. Часть серверной службы фреймворка переносится на клиентскую сторону, что уменьшает нагрузку на сервер [11.
Благодаря строгой типизации языка TypeScript, который используется на Angular, разработка становится удобнее и проще для понимания. При компиляции код переводится в JavaScript, то есть TS необходим только на этапе разработки.
К дополнительным преимуществам 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 (tsconfig project)
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 - это библиотека функций с открытым исходным кодом, которая используется для разработки пользовательских интерфейсов [3]. Стоит отметить, что данный инструмент будет считаться полноценным фреймворком лишь с подключением сторонних JavaScript библиотек.
Сильные стороны 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 — это прогрессивный JavaScript фреймворк с открытым исходным кодом, который может использоваться и как библиотека. Он прост в освоении, в отличие от вышеупомянутых фреймворков, при этом по производительности не уступает React.
Примечательно то, что за созданием данного инструмента стоит всего один талантливый разработчик - Эван Ю. Из-за чего большими корпорациями данный инструмент воспринимается с долей скептицизма. Тем не менее 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
Вывод
Все чаще для создания современных веб-проектов разработчики прибегают к использованию JavaScript фреймворков. Прежде чем сделать выбор в пользу одного из фреймворков, необходимо уточнить требования, проанализировать преимущества каждого из инструментов.
Существуют ключевые факторы, помогающие выбрать наиболее подходящую технологию:
Табл.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
Аннотация. Статья посвящена актуальной для Казахстана теме проблем развития интеллектуальных транспортных систем (ИТС) в РК. Эта тема связана с пониманием роли и места автоматизации элементов логистики. Представлены результаты моделирование транспортных потоков.
