Наш гайд по архитектуре Flutter
Flutter — популярный бесплатный фреймворк для разработки мобильного интерфейса, созданный компанией Google. Он позволяет разрабатывать кроссплатформенные приложения, а значит, переиспользовать единый код в приложениях под Android и iOS. Благодаря этому разработчики могут создавать приложения высокого качества, с которыми комфортно работать пользователям различных платформ.
В этом материале мы подробно объясняем, как работает Flutter и из чего состоит архитектура мобильных приложений на основе этого фреймворка.
Flutter как работает: краткий обзор
С логикой языка программирования вроде Dart, созданного компанией Google в октябре 2011 года, всё понятно. Если нет, здесь мы подробно его разбирали. А сам Flutter как работает — он же не просто язык? Верно, это фреймворк, который использует собственный рендеринг, не зависящий от платформенного UI.
Flutter состоит из двух основных частей — фреймворка с UI библиотекой и SDK.
- Фреймворк — это UI библиотека виджетов, состоящая из переиспользуемых элементов пользовательского интерфейса, к примеру, слайдеров, кнопок и полей ввода данных. Эти элементы можно персонализировать под потребности заказчика.
- SDK — это набор средств разработки, с его помощью можно компилировать код в нативный машинный для Android и iOS.
Движок Flutter в основном написан на C++. Он отвечает за реализацию базового API (поддержку специальных возможностей, среду выполнения Dart-кода, формат графического текста и модульной архитектуры) инструментами нижнего уровня.
Flutter гайд: как устроен фреймворк под капотом
Если погрузится глубже, узнаем, что Flutter архитектура основана на трёх уровнях: framework, engine и embedder. Это обеспечивает высокую производительность и гибкость. Надеемся, наш Flutter гайд поможет разработчикам и продактам лучше понять логику построения приложения на базе Flutter.
С точки зрения операционной системы устройства Flutter-приложения комплектуются аналогично нативным. Слой embedder компилируется с ОС устройства и получает доступ к вводу данных и рендерингу. Кроме того, с помощью embedder код во Flutter можно интегрировать в виде модуля в уже существующее нативное приложение.
Flutter представляет собой многослойную систему с возможностью расширения. По сути, это последовательность независимых библиотек, каждая из которых связана со слоем под ней. Любую часть на уровне фреймворка можно заменить. Архитектура Flutter позволяет разработчикам контролировать каждый элемент UI и поведение приложения.
Разработчики работают с Flutter через фреймворк, написанный на языке Dart. В него входят инструменты для вёрстки, платформы и библиотеки. Снизу вверх слои расположены в следующем порядке:
- Основные сервисы и классы: анимации, жесты и отрисовка.
- Слой рендеринга: средства для вёрстки и построения каталога объектов рендеринга.
- Слой виджетов реализует модель реактивного программирования. Каждому классу в слое виджетов соответствует отрисовываемый объект в слое рендеринга. Помимо этого, слой виджетов позволяет задавать комбинации переиспользуемых классов.
- Библиотеки Cupertino и Material предоставляют набор элементов управления, который реализует дизайн-систему iOS или Material.
Компоненты архитектуры Flutter
Основной элемент во Flutter — виджет. Виджеты составляют основу компонентов архитектуры. С их помощью реализуются распознавание жестов и сложная анимация. Затем объект рендерится на графическом движке Skia, написанном на C/C++, а потом поступает команда ЦП и графическому процессору отрисовать объект на устройстве. Вот классический пример модульной архитектуры Flutter — простой stateful виджет.
class MyApp extends StatefulWidget { @override State
Состав виджета
Виджет состоит из блоков узкоспециализированного назначения, которые в совокупности могут произвести более сложный результат. Концепция виджетов используется и на уровне слоя виджетов: для отображения анимации и иллюстраций, форматирования, навигации, управления состояниями, применения тем и взаимодействия с пользователем.
На уровне слоёв анимации и рендеринга тоже есть виджеты. Кроме того, во 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, напишите нам и мы свяжемся с вами в течение суток.
