CC BY
362
DOI: 10.24412/2413-2527-2021-428-21-27
Разработка кросс-платформенных приложений на языке Dart при помощи фреймворка Flutter
Н. Калиневич, к.воен.н. Р. Г. Гильванов Петербургский государственный университет путей сообщения Императора Александра I
Санкт-Петербург, Россия [email protected], [email protected]
Аннотация. В статье приведено обоснование применения фреймворка Flutter для разработки кросс-платформенных приложений. Рассматривается фреймворк Flutter и язык Dart. Описана разработка кросс-платформенных приложений. Разбирается системная архитектура фреймворка Flutter. Рассмотрены свойства компилятора. Дается сравнение нативных и кросс-платформенных приложений, а также сравнение Flutter с другими фреймворками. В статье раскрываются проблемы разработки нативных приложений. Выяснены какие преимущества Flutter сделают его доминирующим в кросс-платформенной разработке приложений в ближайшие годы.
Ключевые слова: фреймворк Flutter, язык программирования Dart, виджеты, кросс-платформенная разработка, нативная разработка.
Введение
На сегодняшний день люди пользуются одновременно несколькими гаджетами, на которых установлены разные операционные системы (ОС). Из них, по данным StatCounter [1], около 39,46 % работают на Android, 31,51 % — на Windows, 17,38 % — на iOS. Отсюда происходит проблема разработки приложений под каждую операционную систему отдельно.
Чтобы оптимизировать процесс и не программировать мобильное приложение для каждой из операционных систем, можно прибегнуть к кросс-платформенной разработке.
Разработка кросс-платформенных приложений заключается в создании единого приложения, которое может работать на различных операционных системах, вместо разработки различных версий для каждой платформы.
Фреймворк Flutter
Flutter — это кросс-платформенный фреймворк с единой кодовой базой, работающий на языке программирования Dart. Запущенный только в 2018 году компанией Google, Flutter зарекомендовал себя как удобный набор инструментов, легкий для создания анимации и качественных компонентов пользовательского интерфейса. Несмотря на то, что Google недавно начал использовать кросс-платформу, Flutter предоставляет плавную анимацию и удобные элементы интерфейса [2].
Другими словами, это комплексное приложение Software Development Kit (SDK) в комплекте с виджета-ми и инструментами.
Он сочетает в себе простоту разработки с высокой производительностью. Это дает разработчикам простой способ создать и развернуть визуально привлекательные,
изначально скомпилированные приложения для мобильных (iOS, Android), Web и все с использованием единой кодовой базы.
Flutter доступен программистам, знакомым с объектно-ориентированными (классами, методами, переменными и т. д.) и императивными (циклами, условиями и т. д.) концепциями программирования.
Экосистема пакетов Flutter поддерживает широкий спектр аппаратных средств (камера, GPS, сеть, хранилище) и услуг (платежи, облачное хранение, аутентификация, реклама) [3].
Flutter отличается тем, что для создания мобильных приложений ему не нужно полагаться ни на технологию веб-браузера, ни на набор виджетов, поставляемых с каждым устройством. Кроме того, Flutter имеет только тонкий слой кода C/C++. Flutter реализует большую часть своей системы (композиция, жесты, анимация, фреймворк, виджеты и т. д.) в Dart (современный сжатый объектно-ориентированный язык), к которому разработчики могут легко обратиться для внесения изменений в код. Это дает разработчикам огромный контроль над системой, а также значительно снижает планку доступности для большинства систем. Примерно раз в три месяца Flutter поставляет обновления, которые улучшают стабильность и производительность [3].
Flutter включает в себя:
- оптимизированный движок 2D-рендеринга для мобильных устройств с отличной поддержкой текста;
- современный фреймворк в стиле React;
- большой набор виджетов, реализующих материальный дизайн и стиль iOS;
- API для модульных и интеграционных тестов;
- API взаимодействия и подключаемые модули для подключения к системе и сторонним SDK;
- Dart DevTools для тестирования, отладки и профилирования вашего приложения;
- инструменты командной строки для создания, сборки, тестирования и компиляции приложений.
Flutter framework поддерживает множество различных инструментов, включая Android Studio и Visual Studio Code. Он также обеспечивает поддержку создания приложений из командной строки. Dart DevTools, новый инструмент отладки, является более гибким. Виджет-инспектор помогает визуализировать и исследовать иерархию дерева, что используется для визуализации пользовательского интерфейса.
Системная архитектура Flutter построен на таких языках программирования, как C, C++, Dart и Skia ^D-движок рендеринга). Ви-джеты являются строительными блоками любого приложения Flutter и могут быть тематизированы, чтобы выглядеть как родные компоненты UI Android (Material) или iOS (Cupertino). Виджеты отображаются на холсте Skia с поддержкой продвинутой анимации и распознавания жестов (рис. 1).
Cupertino
Widgets
Rendering
Animation Painting Gestures
Foundation
Engine (С++)
Skia Dart Text
Рис. 1. Системная архитектура фреймворка
Движок Flutter содержит ключевые технологии Skia — 2D-графическую библиотеку рендеринга и язык Dart VM в конкретной платформе. Любая оболочка реализует соответствующие API платформы и обрабатывает события жизненного цикла приложения системы [4].
Использование языка Dart позволяет Flutter заранее скомпилировать исходный код к своему коду. Код движка C/C++, компилируется на Android NDK (Native Development Kit) или iOS LLVM (Low Level Virtual Machine). Обе части упакованы в проект Runner Android и iOS, в результате чего появляется apk- или ipa-файл соответственно. При запуске приложения любой рендеринг, ввод или событие делегируется компилированному движку Flutter и коду приложения. Необходимость упаковки движка с файлом apk- или ipa-приложения в настоящее время приводит к увеличению размера приложения до 4 MB.
Быстрый запуск и исполнение приложения — это преимущества компиляции исходного кода. Пользовательский интерфейс обновляется на 60 fps (в основном с помощью GPU), и каждый пиксель на экране принадлежит холстам Skia, что приводит к гладкому пользовательскому интерфейсу.
Компиляция в промежуточный код основана на концепции виртуальной машины (Virtual Machine, VM), которая представляет собой продвинутый интерпретатор, эмулирующий аппаратное обеспечение внутри программного обеспечения. Виртуальная машина упрощает портирова-ние языка для новых аппаратных платформ. В таком случае язык ввода для VM зачастую представляет собой промежуточный код. Например, код на языке программирования (скажем, на Java) компилируется в промежуточный код (байт-код Java), а затем исполняется на VM (JVM).
Язык программирования Dart
Dart — объектно-ориентированный язык. Все значения, которые используются в программе на Dart, представляют объекты. Dart не поддерживает множественное
наследование, то есть родителем производного класса может выступать только один базовый класс [5]. В то же самое время, как и в языке программирования Java или C#, класс может реализовывать множество интерфейсов. По своему синтаксису Dart очень похож на семейство языков C (C++, C#, Java, Kotlin и т. д.). Dart поддерживает null safety (нулевую безопасность), что позволяет избежать целого ряда труднообнаруживаемых null-ошибок.
Dart — однопоточный язык программирования, что накладывает ряд ограничений. Имеется возможность писать асинхронный код, но класса Thread здесь нет. Вместо него используется понятие Isolate. В отличие от обычного потока «изоляты» не разделяют общую память, а взаимодействовать между собой могут посредством сообщений [6].
У Dart имеется свой менеджер пакетов — pub, который позволяет устанавливать существующие в хранилище пакеты. В большинстве случаев нет надобности взаимодействовать с ним напрямую. Достаточно просто прописать в виде зависимости проекта пакет, который необходимо установить.
Среда выполнения и компиляторы Dart поддерживают комбинацию двух важных функций для Flutter: быстрый цикл разработки на основе JIT, который позволяет изменять форму и горячую перезагрузку с сохранением состояния на языке с типами, а также AOT-компилятор, который генерирует эффективный код ARM для быстрого запуска и предсказуемой производительности производственных развертываний [7].
JIT-компиляторы (англ. Just-in-Time — компиляция «точно в нужное время») используют метод компиляции во время работы программы, «на лету». Они существенно ускоряют цикл разработки, но программа может притормаживать и выполняться медленнее. С JIT-компилятором она запускается медленнее, потому что одновременно с выполнением кода ему нужно успеть проанализировать и скомпилировать его.
AOT-компиляторы (англ. Ahead-of-Time — заблаговременная компиляция) замедляют цикл разработки — программа компилируется перед исполнением, при этом получается исполняемый файл. Однако в результате AOT-компиляции разработчик получает программу, которая работает более предсказуемо, без перерывов на анализ и компиляцию во время выполнения. Такие программы запускаются быстрее, потому что они уже скомпилированы [7].
Функцию горячей перезагрузки (Hot Reload) используют только разработчики в debug-режиме. Hot Reload работает за счет ввода обновленных файлов исходного кода в работающую Dart VM. Это не только добавляет новые классы, но и добавляет методы и поля к существующим классам, а также изменяет существующие функции. Hot Reload позволяет моментально переносить все изменения из кода на запущенный эмулятор или подключенное устройство [8].
Виджеты — это объекты. Их много, и они пересоздаются с огромной скоростью при каждом изменении кода. Один виджет StatelessWidget может включать множество различных BuildContexts (описаний позиции виджета в дереве виджетов). StatefulWidget создает новый объект State для каждого BuildContext (рис. 2) [9].
Рис. 2. Жизненный цикл виджета
Сборка мусора в программировании — одна из форм автоматического управления памятью. Специальный процесс, называемый сборщиком мусора, периодически освобождает память, удаляя объекты, которые уже не будут востребованы приложениями.
В Dart используется продвинутая схема сбора мусора и выделение памяти на основе поколений объектов. Она особенно быстро выделяет память для большого количества объектов с коротким жизненным циклом. Это идеально для реактивных пользовательских интерфейсов вроде Flutter, где неизменяемое дерево виджетов пересобирается для каждого кадра.
Благодаря такому сборщику Flutter приятен для разработки пользовательских интерфейсов в декларативном стиле. Мы используем конструкторы, создавая объекты, и описываем с помощью них верстку. Причем сами видже-ты достаточно легковесны и представляют собой лишь информацию для отрисовки. Самой отрисовкой занимаются уже другие слои.
Преимущества применения Flutter
1. Единый пользовательский интерфейс и бизнес-логика на всех платформах.
В основном любой кросс-платформенный фреймворк обеспечивает способ обмена кодовой базой между целевыми платформами. Не существует других таких фрейм-ворков приложений, которые позволяют совместно использовать как код пользовательского интерфейса, так и сам пользовательский интерфейс.
Пример того, как в большинстве кросс-платформенных фреймворков выглядит визуализация пользовательского интерфейса можно видеть на рисунке 3.
Рис. 3. Визуализация пользовательского интерфейса
Для визуализации пользовательского интерфейса Flutter не нуждается в каких-либо компонентах пользовательского интерфейса для конкретной платформы Единственное, что нужно Flutter для отображения пользовательского интерфейса приложения — это холст, на котором можно рисовать (рис. 4).
Рис. 4. Пользовательский интерфейс приложения
Совместное использование пользовательского интерфейса и бизнес-логики, что возможно с Flutter, экономит
время, усилия и здоровье разработчика, не влияя на производительность конечного продукта.
2. Низкая стоимость разработки приложений.
Нативная разработка намного дороже, поскольку два кода должны быть написаны для двух разных платформ с отдельными функциями. Кроме того, разработка нативных приложений требует найма большего числа разработчиков и других специалистов (рис. 5).
Из опыта команд Surf, использование Flutter может сэкономить 45,6 % на разработке, 70,5 % на тестировании (с учетом использования автотестов) и 33,3 % на дизайне приложений. Однако проекты отличаются друг от друга: в одном можно сэкономить до 15 % бюджета, в другом — до 50 %. В результате Flutter приносит выгоды уже на стадии разработки [10].
Рис. 5. Количество разработчиков и специалистов, требующихся для разработки приложений
3. Сокращение времени разработки кода.
Разработка и поддержка нативных приложений требует значительных инвестиций. Это происходит потому, что разработчики должны адаптировать бизнес-логику, интерфейс и макет к особенностям каждой платформы. Таким образом, низкобюджетный Flutter становится все более популярным в высокотехнологичных бизнесах по сравнению с нативными технологиями (рис. 6).
Рис. 6. Статистика использования Flutter по сравнению с React Native
Flutter предоставляет разработчикам возможность создавать единый код для нескольких разных платформ, что значительно сокращает время и стоимость разработки. Разработчики быстро овладевают основами Flutter, поэтому нет необходимости нанимать опытных профессионалов. Что касается нативных технологий, разработчики должны написать два кода (для Android и iOS), что неизбежно занимает больше времени. По мнению экспертов Surf, разработка Flutter на 20-50 % быстрее, чем создание двух собственных приложений. Тем не менее, скорость также зависит от сложности интерфейса и ожидаемых функций.
Функция Hot Reload во Flutter, в свою очередь, позволяет видеть применяемые изменения почти мгновенно, даже не теряя текущего состояния приложения. И это именно то, что делает разработку приложения Flutter в несколько раз быстрее.
4. Сокращение времени на тестирование.
Пишется примерно на 50 % меньше автоматизированных тестов, потому что создаются одинаковые тесты для запуска
на обеих платформах, снижая требования к команде QA (англ. Quality Assurance — обеспечение качества) [11].
5. Уменьшение сроков вывода на рынок.
В большинстве случаев можно ожидать, что приложение Flutter потребует как минимум в два раза меньше часов по сравнению с тем же приложением, разработанным отдельно для Android и iOS. Основная причина предельно проста: не нужно писать код для конкретной платформы, чтобы добиться желаемых визуальных эффектов в приложении. Любой двухмерный пользовательский интерфейс может быть реализован во Flutter без взаимодействия с аналогом нативного приложения.
6. Более высокая производительность приложения.
В отличие от подхода большинства кросс-
платформенных фреймворков, Flutter не полагается на какие-либо промежуточные представления или интерпретации кода. Приложение Flutter встроено непосредственно в машинный код, что устраняет любые ошибки производительности процесса интерпретации.
Flutter использует Skia Graphics Library. Благодаря этому пользовательский интерфейс перенастраивается каждый раз, когда меняется вид. Большая часть работы выполнена на GPU (графическом процессоре), поэтому пользовательский интерфейс Flutter плавный и работает на 60 fps (кадры в секунду).
Кроме того, Flutter предоставляет декларативный API для создания пользовательского интерфейса, который заметно повышает производительность. Это наиболее очевидно, когда речь идет о визуальных настройках.
7. Пользовательский ¡цитированным интерфейс любой доступной сложности.
Одним из самых больших преимуществ Flutter является возможность настроить все, что вы видите на экране, независимо от того, насколько это сложно. Можно разработать гибкий пользовательский интерфейс и на собственных платформах, но объем требуемых усилий различается на порядок. Пример пользовательского интерфейса показан на рисунке 7.
Рис. 7. Пример простого пользовательского интерфейса
8. Простая реализация логики для конкретной платформы.
Помимо пользовательского интерфейса многие мобильные приложения в реальной жизни используют передовые функции уровня ОС, такие как получение координат GPS, связь по Bluetooth, сбор данных с различных датчиков, обработка разрешений, работа с учетными данными. Многие из них доступны при разработке приложения Flutter через готовый плагин, поддерживаемый Google.
Могут быть случаи, когда приложение полагается на функцию уровня ОС, которая еще не доступна в качестве плагина. Flutter предоставляет простой в использовании способ установления связи между собственным кодом платформы и Dart через каналы платформы (рис. 8).
Рис. 8. Пример функционирования каналов
9. Дизайн.
Flutter имеет собственный набор пользовательских ви-джетов, визуализируемых и управляемых графическим движком фреймворка (исходным кодом). Используются компоненты пользовательского интерфейса, отличные от типичных нативных приложений.
У приложений Flutter есть особенно удобный пользовательский интерфейс — решающее преимущество Flutter над React Native. Flutter был создан для того, чтобы можно было легко создать свои собственные виджеты или просто настроить существующий.
10. Широкий спектр готовых к использованию ви-джетов.
Большинство из них невероятно настраиваемы, что экономит время как никакой другой фреймворк ранее. В дополнение к многочисленным основным виджетам компоновки Flutter предоставляет большой набор виджетов Material и Cupertino, которые идеально имитируют поведение каждого языка дизайна (рис. 9) [12].
YOUR АРР
FLUTTER
Widgets Events
rendering Ч Canvas
Platform Channels
SERVICES
Location Audio
Camera
Bluetooth Sensors
Рис. 9. Процесс рендера виджетов
Недостатки применения Flutter
1. Сообщество разработчиков.
Ключевым преимуществом React Native над Flutter является более устоявшееся, более опытное сообщество разработчиков.
2. Библиотеки и поддержка.
Несмотря на то, что Google поддерживает Flutter, последний — все еще новый фреймворк. Это означает, что в существующих библиотеках не всегда возможно найти нужные функциональные возможности, так что разработчикам может понадобиться создать собственные пользовательские функции, что потребует времени [13].
3. Размер приложения.
Приложения, написанные на Flutter, больше нативных. Тем не менее, команда Flutter работает над уменьшением размера приложений, сделанных с помощью Flutter.
Заключение
Из всего сказанного можно сделать вывод, что кросс-платформенная разработка подходит для ситуаций, когда:
• продукт еще не имеет широкой известности, пользовательский спрос не сформирован и необходимо быстро вывести продукт на рынок;
• рынок сформирован, но бизнес хочет обогнать конкурентов и реализовать что-то новое;
• важна высокая скорость разработки сразу на две платформы;
• нужно сэкономить ресурсы.
Flutter отлично подойдет, если бюджет ограничен, а приложения несложные. Если же бюджет позволяет развернуться или архитектура приложения сложная, то лучше подойдет нативная разработка.
Литература
1. Operating System Market Share Worldwide // StatCounter. URL: http://gs.statcounter.com/os-market-share (дата обращения 04.12.2021).
2. Flutter. URL: http://flutter.dev (дата обращения 04.12.2021).
3. Windmill, E. Flutter in Action. — Shelter Island (NY): Manning Publications, 2020. — 368 p.
4. Flutter — новый взгляд на кроссплатформенную разработку / Google Developers // Habr. — 2018. — 18 октября. URL: http://habr.com/ru/company/google/blog/426701 (дата обращения 04.12.2021).
5. Dart Programming Language. URL: http://dart.dev (дата обращения 04.12.2021).
6. Balbaert, I. Dart Cookbook. — Birmingham: Packt Publishing, 2014. — 346 p.
7. Biessek, А. Flutter for Beginners: An introductory guide to building cross-platform mobile applications with Flutter and Dart 2. — Birmingham: Packt Publishing, 2019. — 512 p.
8. Payne, R. Beginning App Development with Flutter: Create Cross-Platform Mobile Apps. — New York: Apress Media, 2019. — 334 p. DOI: 10.1007/978-1-4842-5181-2.
9. Алеев, А. Быстрый старт Flutter-разработчика: Пошаговое пособие разработчика кросс-платформенных приложений. — [Б. м.]: Издательские решения, 2020. — 108 c.
10. Разработка мобильных приложений для Android и iOS // Surf. URL: http://surf.ru (дата обращения 04.12.2021).
11. Mainkar, P. Google Flutter Mobile Development Quick Start Guide: Get up and running with iOS and Android mobile app development / P. Mainkar, S. Giordano. — Birmingham: Packt Publishing, 2019. — 152 p.
12. Napoli, M. L. Beginning Flutter: A Hands on Guide to App Development. — Indianapolis (IN): Wrox (John Wiley & Sons), 2020. — 528 p.
13. Zammetti F., Practical Flutter: Improve your Mobile Development with Google's Latest Open-Source SDK. — New York: Apress Media, 2019. — 414 p. DOI: 10.1007/978-1-4842-4972-7.
DOI: 10.24412/2413-2527-2021-428-21-27
Development of Cross-Platform Applications in Dart Using the Flutter Framework
N. Kalinevich, PhD R. G. Gilvanov Emperor Alexander I St. Petersburg State Transport University Saint Petersburg, Russia [email protected], [email protected]
Abstract. The paper explains the use of the Flutter framework to develop cross-platform applications. The Flutter framework and Dart language are under consideration. Cross-platform application development is described. The system architecture of the Flutter framework is reviewed. The properties of the compiler are considered. It compares native and cross-platform applications and compares Flutter with other frameworks. The article discusses the problems of developing native applications. Find out what advantages Flutter will make it dominant in cross-platform application development in the coming years.
Keywords: Flutter framework, Dart programming language, widgets, cross-platform development, native development.
References
1. Operating System Market Share Worldwide, StatCounter. Available at: http://gs.statcounter.com/os-market-share (accessed 04 Dec 2021).
2. Flutter. Available at: http://flutter.dev (accessed 04 Dec 2021).
3. Windmill E. Flutter in Action. Shelter Island (NY), Manning Publications, 2020, 368 p.
4. Flutter — A New Look at Cross-Platform Development [Flutter — novyy vzglyad na krossplatformennuyu razrabot-ku], Habr [Habr]. Published online at October 04, 2018. Available at: http://habr.com/ru/company/google/blog/426701 (accessed 04 Dec 2021).
5. Dart Programming Language. URL: http://dart.dev (accessed 04 Dec 2021).
6. Balbaert I. Dart Cookbook. Birmingham, Packt Publishing, 2014, 346 p.
7. Biessek A. Flutter for Beginners: An introductory guide to building cross-platform mobile applications with Flutter and Dart 2. Birmingham, Packt Publishing, 2019, 512 p.
8. Payne R. Beginning App Development with Flutter: Create Cross-Platform Mobile Apps, New York, Apress Media, 2019, 334 p. DOI: 10.1007/978-1-4842-5181-2.
9. Aleev A. Quickstart a Flutter Developer: A Step-by-Step Guide for a Cross-Platform Application Developer [By-stryy start Flutter-razrabotchika: Poshagovoe posobie raz-rabotchika kross-platformennykh prilozheniy]. Ridero, 2020, 108 p.
10. Mobile App Development for Android and iOS [Raz-rabotka mobil'nykh prilozheniy dlya Android i iOS], Surf [Surf]. Available at: http://surf.ru (accessed 04 Dec 2021).
11. Mainkar P., Giordano S. Google Flutter Mobile Development Quick Start Guide: Get up and running with iOS and Android mobile app development. Birmingham, Packt Publishing, 2019, 152 p.
12. Napoli M. L. Beginning Flutter: A Hands on Guide to App Development. Indianapolis (IN), Wrox (John Wiley & Sons), 2020, 528 p.
13. Zammetti F. Practical Flutter: Improve your Mobile Development with Google's Latest Open-Source SDK. New York, Apress Media, 2019, 414 p.
DOI: 10.1007/978-1-4842-4972-7.
