Наш гайд по архитектуре Flutter
Flutter — популярный бесплатный фреймворк для разработки мобильного интерфейса, созданный компанией Google. Он позволяет разрабатывать кроссплатформенные приложения, а значит, переиспользовать единый код в приложениях под Android и iOS. Благодаря этому разработчики могут создавать приложения высокого качества, с которыми комфортно работать пользователям различных платформ.
В этой статье мы рассмотрим архитектуру мобильных приложений во Flutter и принципы, лежащие в основе этого фреймворка.
Основы архитектуры
Flutter состоит из двух основных частей — фреймворка с UI библиотекой и SDK.
- Фреймворк — это UI библиотека виджетов, состоящая из переиспользуемых элементов пользовательского интерфейса, к примеру, слайдеров, кнопок и полей ввода данных. Эти элементы можно персонализировать под потребности заказчика.
- SDK — это набор средств разработки, с его помощью можно компилировать код в нативный машинный для Android и iOS.
Во Flutter используется язык программирования Dart, созданный компанией Google в октябре 2011 года. Движок Flutter в основном написан на C++. Движок отвечает за реализацию базового API (поддержку специальных возможностей, среду выполнения Dart-кода, формат графического текста и модульной архитектуры) инструментами нижнего уровня.
С точки зрения операционной системы устройства Flutter-приложения комплектуются аналогично нативным. Слой embedder компилируется с ОС устройства и получает доступ к вводу данных и рендерингу. Кроме того, с помощью embedder код во Flutter можно интегрировать в виде модуля в уже существующее нативное приложение.
Flutter представляет собой многослойную систему с возможностью расширения. По сути, это последовательность независимых библиотек, каждая из которых связана со слоем под ней. Каждую часть на уровне фреймворка можно заменить.
Разработчики работают с Flutter через фреймворк, написанный на языке Dart. В него входят инструменты для вёрстки, платформы и библиотеки. Снизу вверх слои расположены в следующем порядке:
- Основные сервисы и классы: анимации, жесты и отрисовка.
- Слой рендеринга: средства для вёрстки и построения каталога объектов рендеринга.
- Слой виджетов реализует модель реактивного программирования. Каждому классу в слое виджетов соответствует отрисовываемый объект в слое рендеринга. Помимо этого, слой виджетов позволяет задавать комбинации переиспользуемых классов.
- Библиотеки Cupertino и Material предоставляют набор элементов управления, который реализует дизайн-систему iOS или Material.
Компоненты архитектуры Flutter
Основной элемент во Flutter — виджет. Виджеты составляют основу компонентов архитектуры. С их помощью реализуются распознавание жестов и сложная анимация. Затем объект рендерится на графическом движке Skia, написанном на C/C++, а потом поступает команда ЦП и графическому процессору отрисовать объект на устройстве. Вот классический пример модульной архитектуры Flutter — простой stateful виджет.
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyAppState()
}
}
class MyAppState extends State<MyApp> {
@override
Widget build (BuildContext context) {
return OneOrMoreWidgets;
}
}
Состав виджета
Виджет состоит из блоков узкоспециализированного назначения, которые в совокупности могут произвести более сложный результат. Концепция виджетов используется и на уровне слоя виджетов: для отображения анимации и иллюстраций, форматирования, навигации, управления состояниями, применения тем и взаимодействия с пользователем.
На уровне слоёв анимации и рендеринга тоже есть виджеты. Кроме того, во Flutter есть вспомогательные виджеты, к которым также применим подход объединения нескольких сущностей в одну.
Иерархия виджетов
Относительно друг друга виджеты находятся в композиционной иерархии. Каждый виджет находится внутри «родителя» и получает от него контекст. Такая иерархия сохраняется вплоть до корневого виджета. Кроме того, иерархия виджетов является расширяемой, чтобы можно было увеличить число возможных комбинаций.
В ответ на событие приложение обновляет свой UI, передавая фреймворку команду заменить виджет в иерархии на подходящий. Фреймворк, сравнив виджет и его замену, оперативно обновляет пользовательский интерфейс.
Классы и категории виджетов
Виджеты делятся на два основных класса: stateful и stateless. Если уникальные характеристики виджета меняются под влиянием различных факторов, он относится к классу stateful. Если у виджета нет состояния mutable и его свойства не меняются, он считается stateless.
Также виджеты во Flutter можно разбить на категории по типам доступных им фич:
- Виджеты форматирования
С их помощью можно собрать несколько виджетов в один. К наиболее популярным относятся Center, Column, Container, Row и Stack.
- Независимые от платформы/ базовые виджеты
С их помощью можно создавать любые пользовательские интерфейсы без привязки к платформе. Сюда входят text, image и icon.
- Платформоспецифичные виджеты
Виджеты, специфичные для Android или iOS. Android-специфичные виджеты называются Material виджетами, так как они используют принципы Material Design от Android OS. iOS-специфичные виджеты называются виджетами Cupertino. Они формируются в соответствии с принципами Human Interface от Apple.
- Виджеты поддержания состояний
Все виджеты во Flutter делятся на stateful и stateless.
Рендеринг во Flutter
Наверняка, вы задавались вопросом: как может кроссплатформенный фреймворк Flutter обеспечивать производительность, сопоставимую с нативом?
Давайте вспомним, как работают нативные приложения для Android. Для отрисовки используется Java код. Системные библиотеки Android передают компоненты, отвечающие за отрисовку, объекту Canvas. Его Android рендерит с помощью «холста» Skia.
Кроссплатформенные фреймворки стремятся убрать различия в представлении каждой платформы, используя уровень абстракций, созданный поверх нативных UI библиотек iOS и Android.
Код в приложении обычно написан на интерпретируемом языке вроде JavaScript, которому необходимо взаимодействовать с iOS системой при помощи Objective C или с Android на языке Java, чтобы отобразить UI. В результате приложение потребляет много ресурсов, особенно если логика приложения и UI часто взаимодействуют.
Flutter вместо системных библиотек виджетов UI использует собственный набор виджетов, таким образом сводя к минимуму число абстракций. Визуальная часть отрисовывается при помощи языка программирования Dart. Он компилируется в нативный код, который затем используется Skia для рендеринга.
Взаимодействие с кодом на других языках
Flutter предлагает разработчику большой выбор механизмов для интеграции. Он позволяет добавлять кастомный код для мобильных и десктопных приложений через канал платформы. Это простой механизм взаимодействия в исходном приложении кода, специфичного для платформы, и вашего кода на Dart.
Через канал можно обмениваться сообщениями между платформенным компонентом, написанным на языке типа Swift или Kotlin, и частью, написанной на Dart. Передаваемые данные сериализуются с Dart в стандартный формат, а затем десериализуются в эквивалентные данные на Kotlin или Swift.
Преимущества архитектуры Flutter
- Простота. Flutter позволяет создавать приложения проще и быстрей.
- Быстрая компиляция кода. С помощью Flutter можно вносить изменения в код и фиксить баги практически в реальном времени.
- Простое и быстрое создание MVP. Если вам нужно как можно скорее сделать мобильное приложение, Flutter — отличный выбор. Кроме того, разработка на нём в разы дешевле, так как вам не нужно писать разный код для двух мобильных приложений — iOS и Android.
- Удобная MVVP архитектура. Архитектура MVVP (Model-View-View-Model) становится альтернативой архитектурным паттернам Android. Она обеспечивает прозрачность интерфейс и упрощает тестирование, так как препятствует слиянию логики приложения и UI.
- Преимущества Open Source архитектуры. На сегодня для Flutter доступно 34 репозиториев на Github. Тысячи разработчиков по всему миру пользуются репозиторием Flutter на Github, поддерживают и дополняют его.
Особенности архитектуры Flutter в проектах Surf
У Surf самая большая в России команда разработчиков на Flutter. Мы реализовали на этом фреймворке успешные проекты для банков, фудтеха, e-commerce-приложения.
На старте работы с Flutter мы не могли решить, какой подход к архитектуре взять за основу: BLoC, Redux, Vanilla или MobX. В итоге, решили не отдавать предпочтение ни одному из них, но выстроить систему, которая позволит адаптировать фреймворк под специфические задачи нашей компании. Мы решили создать архитектуру, которая позволит нашим Android и Flutter разработчикам быстро обмениваться задачами и передавать их друг другу.
Для этого мы адаптировали паттерн MWWM (Model-View-View-Model) под Flutter архитектуру. Впоследствии мы заменили слово View на Widget, чтобы не было путаницы. Основное преимущество такого подхода в том, что он позволяет отделить вёрстку от логики, причём как от бизнес-логики, так и от логики слоя представления.
Конечно, в проектах мы используем и обычные виджеты Flutter. Сейчас наш стек технологий для проектирования архитектуры — это комбинация нескольких шаблонов, собранных в единый пакет, как показано на схеме ниже. В пакет входит инжектор, связующее звено между слоями и surf_mwwm. Этот подход мы использовали для всех своих проектов на Flutter.
Приложения на Flutter от Surf
Ригла — крупнейшая российская сеть аптек, которая представлена на рынке под тремя брендами: «Ригла», «Будь здоров» и «Живика». У каждого из них своя целевая аудитория и ценовая политика.
Клиент хотел разработать отдельные приложения под Android и iOS для каждого бренда — итого, 6 приложений. Команда Surf написала единую кодовую базу на Flutter и на её основе реализовала приложения для всех трёх брендов. Это позволило заказчику сэкономить 40% бюджета разработки. Проект мы выполнили за пять месяцев, а первый релиз для бренда «Ригла» вышел всего через три месяца.
Surf разработал приложение Росбанка — это первый мобильный B2B банк на Flutter в Европе и второй в мире. Приложение помогает бизнес-клиентам банка решать в несколько тапов разные финансовые задачи: оплачивать налоги, сохранять и отправлять реквизиты, отслеживать и оплачивать счета.
The Hole — это приложение для видеостриминга, которое Surf разработал для продюсерской компании Medium Quality. Заказчик — крупнейший паблишер российского YouTube, выпускающий множество разнообразных шоу с суммарной аудиторией 16,2 миллионов пользователей и 920 миллионами просмотров. Приложение транслирует контент, который удобно смотреть на мобильном устройстве (многие шоу сняты вертикально, а горизонтальные видео обрезаются автоматически).
Разработка на Flutter помогла клиенту сэкономить около 40% бюджета по сравнению с нативной разработкой. При этом фреймворк смог обеспечить плавность работы UI и анимаций перехода между экранами, что особенно важно для видеостримингового сервиса.
Мы разработали для KFC Digital Successful Routine (DSR) — ERP-систему, которая автоматизировала финансовую аналитику и управление бизнес-процессами. Вся информация теперь оцифрована и хранится на сервере, а значит, компания может вести статистику, строить отчеты и отслеживать показатели в реальном времени. Она стала удобным инструментом для менеджеров самых разных уровней. Например, менеджеры смен могут заполнять чек-листы, контролировать приход и уход сотрудников и ставить им задачи онлайн. Такая автоматизация рутины экономит им 10 часов в неделю.
Один из основных модулей DSR — это система дашбордов и отчетов по операционным показателям работы ресторана, которые необходимы менеджменту для анализа текущей ситуации и принятия оперативных решений. Платформа агрегирует все чеки из ресторанов KFC в режиме реального времени. На их основе строятся графики и отчеты для руководителей.
Подведём итоги
- Архитектура Flutter представляет собой расширяемую многослойную систему и и использует независимые библиотеки.
- Приложение на Flutter состоит из виджетов.
- Flutter обеспечивает производительность приложения, сопоставимую с нативными.
- Преимущества Flutter: это достаточно простой в использовании фреймворк, у него есть активное сообщество на Github. Кроме того, архитектура Flutter позволяет быстро собрать MVP.
У Surf самая большая в России команда разработчиков на Flutter. Мы реализовали на этом фреймворке успешные проекты для банков, фудтеха, e-commerce-приложения. Если вы хотите разработать приложение на Flutter, напишите нам и мы свяжемся с вами в течение суток.