Оглавление

    Наш гайд по архитектуре 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, напишите нам и мы свяжемся с вами в течение суток.