Операционные системы реального времени и технологии разработки кроссплатформенного программного обеспечения: в 3 ч. Часть 3

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ 

РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное автономное

образовательное учреждение высшего образования

«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

Инженерно-технологическая академия

Д. А. БЕСПАЛОВ

С. М. ГУШАНСКИЙ

Н. М. КОРОБЕЙНИКОВА

ОПЕРАЦИОННЫЕ СИСТЕМЫ РЕАЛЬНОГО 
ВРЕМЕНИ И ТЕХНОЛОГИИ РАЗРАБОТКИ 

КРОССПЛАТФОРМЕННОГО ПРОГРАММНОГО

ОБЕСПЕЧЕНИЯ

Учебное пособие

в трех частях

Часть 3

Ростов-на-Дону – Таганрог

Издательство Южного федерального университета

2021 

 

 

УДК 004.451(075.8)
ББК  32.973.26-018.1я73

Б534

Печатается по решению кафедры вычислительной техники

Института компьютерных технологий и информационной безопасности

Южного федерального университета
(протокол № 2 от 25 сентября 2020 г.)

Рецензенты:

профессор кафедры высшей математики Инженерно-технологической

академии Южного федерального университета,

доктор технических наук, профессор Г. В. Куповых

профессор кафедры естествознания и безопасности жизнедеятельности

Таганрогского института им. А. П. Чехова (филиал) ФГБОУ ВО «РГЭУ (РИНХ)»,

доктор технических наук, профессор В. И. Божич

Беспалов, Д. А.

Б534
Операционные системы реального времени и технологии разработки 

кроссплатформенного программного обеспечения : учебное пособие : в 3 ч. / 
Д. А. Беспалов, С. М. Гушанский, Н. М. Коробейникова ; Южный федеральный университет. – Ростов-на-Дону ; Таганрог : Издательство Южного федерального университета, 2021.

ISBN 978-5-9275-3366-4
Часть 3. – 214 с.
ISBN 978-5-9275-3628-3 (Ч. 3)
Данное учебное пособие продолжает серию пособий для студентов дневной и за
очной форм обучения, обучающихся по направлениям 09.03.01, 09.04.01 – Информатика и вычислительная техника. Также может быть полезно студентам и магистрантам, 
обучающимся по смежным специальностям. Данное учебное пособие раскрывает принципы разработки кроссплатформенных приложений на языке высокого уровня с применением современных инструментов и библиотек, а также показывает в деталях все существующие подходы к созданию стандартных веб-приложений, реактивных веб-приложений, серверных приложений, а также настольного и мобильного программного 
обеспечения с применением таких инструментов, как JavaScript, HTML CSS, ReactJS, 
NodeJS, ElectronJS и React Native.

Учебное пособие разработано на кафедре вычислительной техники ИКТИБ ЮФУ.

УДК 004.451(075.8)

ББК 32.973.26-018.1я73

ISBN 978-5-9275-3628-3 (Ч. 3)
ISBN 978-5-9275-3366-4

© Южный федеральный университет, 2021
© Беспалов Д. А., Гушанский С. М., 

Коробейникова Н. М., 2021

© Оформление. Макет. Издательство 

Южного федерального университета, 2021

 

 

Содержание

3

СОДЕРЖАНИЕ

ВВЕДЕНИЕ ……………………………………………………………
6

1. ВАЖНОСТЬ РАЗРАБОТКИ КРОССПЛАТФОРМЕННЫХ
РЕШЕНИЙ ……………………………………………………………..
7

2. ЖИЗНЕННЫЙ ЦИКЛ КРОССПЛАТФОРМЕННЫХ  
ПРИЛОЖЕНИЙ ……………………………………………………….
12

2.1. Введение ………………………………………………………...
12

2.2. Основные этапы жизненного цикла кроссплатформенного 
приложения ………………………………………………………….
12

2.3. Зарождение проекта ……………………………………………
15

2.4. Проектирование, макетирование приложения ………………..
16

2.5. Разработка ………………………………………………………
22

2.6. Стабилизация …………………………………………………...
22

2.7. Развертывание и распространение …………………………….
23

Выводы ………………………………………………………………
24

3. ЯЗЫК JAVASCRIPT ……………………………………………….
25

3.1. Введение ………………………………………………………...
25

3.2. Особенности языка ……………………………………………..
25

3.3. Основные типы данных и объекты языка …………………….
30

3.4. Операции с данными ……………………………………………
39

3.5. Управляющие конструкции ……………………………………
42

3.6. Организация функций и их вызовов …………………………..
47

3.7. Объекты JavaScript ……………………………………………...
56

3.8. Исполнение и отладка программного кода ……………………
73

4. ИНСТРУМЕНТАЛЬНЫЕ СРЕДСТВА РАЗРАБОТКИ ………...
78

5. РАЗРАБОТКА КЛАССИЧЕСКИХ ВЕБ-ПРИЛОЖЕНИЙ ……..
87

5.1. Введение ………………………………………………………...
87

5.2. Подготовка приложения ………………………………………..
87

5.3. Процесс разработки …………………………………………….
87

Заключение …………………………………………………………..
94

6. РАЗРАБОТКА СЕРВЕРНОГО РЕШЕНИЯ ……………………...
95

 

Содержание

4

6.1. Введение ………………………………………………………...
95

6.2. Подготовка приложения ………………………………………..
96

6.3. Установка базы данных ………………………………………...
99

6.4. Процесс разработки …………………………………………….
102

Заключение …………………………………………………………..
118

7. РАЗРАБОТКА ПРИЛОЖЕНИЙ ДЛЯ ПЕРСОНАЛЬНЫХ 
ЭВМ ……………………………………………………………………
119

7.1. Введение ………………………………………………………...
119

7.2. Подготовка приложения ………………………………………..
119

7.3. Процесс разработки …………………………………………….
121

Заключение …………………………………………………………..
124

8. РАЗРАБОТКА РЕАКТИВНОГО ВЕБ-ПРИЛОЖЕНИЯ ………..
125

8.1. Введение ………………………………………………………...
125

8.2. Подготовка приложения ………………………………………..
126

8.3. Процесс разработки …………………………………………….
129

Заключение …………………………………………………………..
155

9. РАЗРАБОТКА МОБИЛЬНОГО ПРИЛОЖЕНИЯ ………………
156

9.1. Введение ………………………………………………………...
156

9.2. Подготовка приложения ………………………………………..
156

9.3. Процесс разработки …………………………………………….
167

Заключение …………………………………………………………..
185

ЗАКЛЮЧЕНИЕ ………………………………………………………..
186

СПИСОК ЛИТЕРАТУРЫ ……………………………………………
187

ПРИЛОЖЕНИЯ ……………………………………………………….
189

Приложение А ……………………………………………………….
189

Файл index.html ……………………………………………………
189

Файл style.css ………………………………………………………
191

Приложение Б ……………………………………………………….
195

Файл package.json …………………………………………………
195

Файл server.js ………………………………………………………
195

Файл ./configuration/index.js ………………………………………
197

Файл ./routes/todo.route.js …………………………………………
197

Содержание

5

Файл ./controllers/todo.controller.js ……………………………….
198

Файл ./services/todo.service.js ……………………………………..
199

Файл ./schemas/todo.schema.js ……………………………………
200

Приложение В ……………………………………………………….
202

Файл App.js ………………………………………………………..
202

Файл ./views/MainView.jsx ………………………………………..
202

Файл ./utils/api.js …………………………………………………..
203

Файл ./configuration/index.js ………………………………………
203

Файл ./components/TodoLost.jsx ………………………………….
203

Файл ./components/TodoElement.jsx ……………………………...
204

Файл ./components/TextInput.jsx ………………………………….
205

Приложение Г ……………………………………………………….
208

Файл ./App.js ………………………………………………………
208

Файл ./components/TodoInput.js …………………………………..
209

Файл ./components/TodoList.js ……………………………………
211

 

Содержание

6

ВВЕДЕНИЕ

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

Кроссплатформенные приложения используются в самых разных 

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

Данное учебное пособие раскрывает принципы разработки крос
сплатформенных приложений на языке высокого уровня с применением современных инструментов и библиотек, а также показывает в деталях все 
существующие подходы к созданию стандартных веб-приложений, реактивных веб-приложений, серверных приложений, а также настольного и 
мобильного программного обеспечения с применением таких инструментов, как JavaScript, HTML CSS, ReactJS, NodeJS, ElectronJS и React Native.

В каждом разделе пособия показан процесс подготовки решения, 

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

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

 

 

1. Важность разработки кроссплатформенных решений

7

1. ВАЖНОСТЬ РАЗРАБОТКИ 

КРОССПЛАТФОРМЕННЫХ РЕШЕНИЙ

В основе разработки кроссплатформенных приложений лежит один 

принцип: «разрабатываешь один раз, запускаешь везде». В современном 
мире программных продуктов, стоимость услуг разработчиков и само 
время разработки конечного решения постоянно растет. В самом распространенном варианте, компании, желающей внедрить программное решение на всех доступных платформах, приходится держать штат из дизайнеров интерфейсов, разработчиков приложений для настольных систем, разработчиков веб-приложений и серверов, разработчиков для платформ Android и iOS. Это безумно дорого и долго. Среднее время выхода приложения с учетом всех особенностей платформ и созданием нативных решений 
исчесляется многими месяцами. Современный темп жизни накладывает 
ограничения: кто быстрее апробировал новую идею и быстрее внедрил продукт на рынок – тот и выиграл. Поэтому многие компании отдают предпочтение именно кроссплатформенной разработке, как минимум на этапе создания прототипа приложения и его апробации на рынке в реальных условиях. На это уходят основные инвестиции, а уже после получения дохода 
от самого приложения – нанимают соответствующий персонал разработчиков и то в том случае, когда кроссплатформенное решение не удовлетворяет жестким условиям и ограничениям (например, по скорости, надежности или особенностям интерфейса).

Кроссплатформенные же приложения пишутся сразу для нескольких 

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

Первый заключается в том, что на этапе подготовки приложения к 

публикации он превращается в нативный для определённой платформы с 
помощью транспилера. Фактически один кроссплатформенный язык программирования “переводится” на другой.

Второй – в том, что к получившемуся коду добавляется определён
ная обёртка, которая, работая уже на устройстве, на лету транслирует вызовы из неродного кода к родным функциям системы.

Предполагается, что большая часть такого кода может переноситься 

между платформами. Это, например, могут быть алгоритмы для обработки 

 

1. Важность разработки кроссплатформенных решений

8

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

Например, меню типа “гамбургер” одинаково используется на всех 

платформах (веб и мобильные), так что внесение изменений в структуру 
меню отразится сразу на всех вариантах реализации.

В связи с этим можно четко выделить преимущества кроссплатфор
менного подхода к разработке современных приложений:

•
относительно низкая стоимость разработки;

•
относительно высокая скорость разработки;

•
возможность задействовать одних и тех же разработчиков для всех 

платформ;

•
возможность задействовать уже существующий внутренний ре
сурс компании для подключения новых платформ.

Конечно, есть некоторые недостатки:

•
некоторые элементы интерфейса сложно создать с полностью на
тивным видом – у каждой системы свои требования к дизайну элементов 
интерфейса и это следует учитывать;

•
некоторые аппаратные устройства работают по-разному на различ
ных платформах;

•
сильная зависимость от фреймворков, так как именно они обра
зуют связующее звено между кроссплатформенной логикой и слоем платформы. Кроссплатформенная среда лишь транслирует запросы к системным вызовам и интерфейсам в понимаемый ею, системой, формат, и потому на этом этапе возможны как сложности с пониманием, так и возникновение ошибок внутри самого фреймворка;

•
средняя или низкая скорость работы. Нативная программа будет 

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

В этом случае единственным верным вариантом является следова
ние принципу равновесия: скорость разработки против стоимости, скорость работы против универсальности, переносимость бизнес-логики против нативного кода.

1. Важность разработки кроссплатформенных решений

9

Кроссплатформенная разработка тоже имеет свою историю [3].
Сначала были Cordova + HTML5. Это одно из самых популярных 

направлений в кроссплатформенном программировании и на текущий момент. Его так же часто по-народному называют PhoneGap. Фактически создаётся мобильный сайт, который “оборачивается” небольшим платформенным кодом, транслирующим вызовы от системы к приложению и обратно. Все недостатки и достоинства выражены тут как нигде ярко. Вы можете использовать веб-разработчиков (HTML, CSS и JavaScript как основные технологии) и за месяц или даже пару недель сделать первую версию 
приложения за относительно небольшие деньги. Да, она будет подтормаживать в работе, возможно, в ней будет не совсем точная геолокация, но 
она будет работать на всех устройствах и позволит вам, как минимум, протестировать спрос со стороны клиентов на мобильных устройствах.

Теперь, как развитие этой технологии появились PWA (Progressive

Web Applications). Это новая технология от компании Google – те же самые 
веб-приложения, но за счёт использования определённых технологий 
(в первую очередь это так называемые Service Worker – работающие в фоновом режиме JavaScript скрипты и Web App Manifest – описание веб-приложения в понятном для мобильной системы виде). Они без обёртки из 
PhoneGap могут работать практически как нативные, устанавливаясь на домашний экран смартфона в обход магазина приложений. Могут работать в 
офлайне, с пуш-уведомлениями и с нативными функциями: сейчас такие 
оболочки имеют практически все современные мегапроекты: ВКонтакте, 
Facebook и так далее. В основном PWA распространены на оерационной 
системе Android, так как компания Apple жестко против возможности распространения приложений вне их собственного магазина AppStore.

Учитывая все недостатки HTML5-решений, многие компании со
здали инструменты, которые позволяют писать код на одном, не нативном, 
языке, а он потом транслируется в нативный. Так решаются сразу две проблемы одновременно: кодовая база получается одна, а приложения получаются максимально близки к нативному.

Здесь речь идет о технологиях, описанных во второй части данного 

учебного пособия: Xamarin, React Native, Ionic и Flutter.

Напомним, что Xamarin – это платформа компании Microsoft. Для 

разработки используется стандартный (для Enterprise-разработки) язык 

1. Важность разработки кроссплатформенных решений

10

программирования С#, кроссплатформенная среда разработки – Visual Studio. На выходе получаются нативные приложения для iOS, Android и Windows с некоторой общей кодовой базой (shared). Расплачиваться здесь придется относительно большим разрмером приложения. React Native – это 
платформа от Facebook – приложения пишутся на JavaScript или Typescript
и с использованием CSS-подобных стилей.

Интерфейс получается “родной”, а код интерпретируется уже на 

платформе, что придаёт ему нужную гибкость. Здесь имеется одна тонкость: React Native немного не похож на классический React, поэтому доучиваться веб-программисту все-таки придется. Кроме того, React сам по 
себе мало что может – его преимущества в дополнительных инструментах 
(расширениях) типа Redux, Sage и так далее [4]. Ionic стабильно захватил 
свой сегмент рынка любителей разрабатывать приложения, имея все необходимое “из коробки”. Достаточно запутан и громоздок с точки зрения 
начинающего программиста, но жестко структурирован, обеспечивает особенный, строгий подход к разработке, но расплачиваться также приходится 
громоздкостью конструкций и размером приложения. Flutter – продукт 
компании Google. Имеет несколько другой подход в отличие от React/Ionic/Xamarin. Он не превращает исходный код в нативный, который 
выполняется платформой, а на самом деле рисует окно на экране смартфона и отрисовывает все элементы сам. В качестве языка используется 
“фирменный” Dart, который Google создал как усовершенствованную версию JavaScript. У этого есть как преимущества (например, внешне идентичные интерфейсы), так и недостатки (например, перерисовка интерфейса 
требует определённых затрат памяти и процессорного времени). Платформа быстро развивается и Google вкладывает в это много сил и средств. 
Но по сравнению с Flutter даже React Native кажется вполне устоявшейся и 
впечатляющей экосистемой.

Нельзя не упомянуть Electron – технологию разработки нативных при
ложений для рабочих станций и персональных ЭВМ на языке JavaScript. По 
своей сути это тот же сайт, но обернутый в браузер и нативный контейнер, 
запускаемый как отдельное приложение. При помощи него даже простой 
сайт на HTML+CSS3+JavaScript можно превратить в правдоподобное приложение ПЭВМ, запускаемое на ОС Windows, Linux и MacOS.