Технология Flutter для кроссплатформенной разработки

Фреймворк Flutter
Flutter ‒ это портативный набор инструментов Google для пользовательского интерфейса, позволяющий создавать красивые, скомпилированные в естественных условиях приложения для мобильных устройств, веб-сайтов и настольных ПК из единой кодовой базы. Flutter работает с существующим кодом, используется разработчиками и организациями по всему миру, и является бесплатным и открытым исходным кодом [2].
Выбор языка для фреймворка
При разработке Flutter использовались четыре основных параметра для оценки языка программирования и были учтены пожелания и потребности авторов, разработчиков и конечных пользователей. Было выявлено, что разные языки удовлетворяют некоторым требованиям, но Dart получил высокие оценки по всем параметрам оценки и отвечает всем поставленным требованиям и критериям.
Среды исполнения Dart и компиляторы поддерживают сочетание двух важных функций Flutter: быстрый цикл разработки на основе JIT, который позволяет изменять формы и выполнять горячие перезагрузки с сохранением состояния в языке с типизацией, а также компилятор Ahead-of-Time, который выдает эффективный код ARM для быстрого запуска и прогнозирования производительности производственных развертываний.
Критерии, по которым оценивался язык программирования для Flutter:
• Производительность разработчика. Одно из главных преимуществ Flutter заключается в том, что он экономит технические ресурсы, позволяя разработчикам создавать приложения для iOS и Android с одной и той же кодовой базой. Использование высокопроизводительного языка еще больше ускоряет процесс разработки и делает Flutter более привлекательным.
• Объектная ориентация. Для Flutter нужен был язык, который подходит для проблемной области Flutter: создание визуального пользовательского интерфейса. В отрасли накоплен многолетний опыт построения сред пользовательского интерфейса на объектно-ориентированных языках. Хотя можно было использовать не объектно-ориентированный язык, это означало бы заново изобретать велосипед, чтобы решить несколько сложных проблем. Кроме того, подавляющее большинство разработчиков имеют опыт объектно-ориентированной разработки, что облегчает обучение разработке с помощью Flutter.
• Предсказуемая, высокая производительность. С Flutter предоставляется возможность разработчикам создавать быстрые и гибкие пользовательские интерфейсы. Чтобы достичь этого, необходимо иметь возможность запускать значительное количество кода конечного разработчика в каждом кадре анимации. Это означает, что нужен язык, который обеспечивает высокую производительность и предсказуемую производительность, без периодических пауз, которые могут привести к пропущенным кадрам.
• Быстрое распределение. Платформа Flutter использует поток функционального стиля, который сильно зависит от базового распределителя памяти, эффективно обрабатывая небольшие, кратковременные выделения. Этот стиль был разработан на языках с этим свойством и не работает эффективно на языках, которые не имеют такой возможности [2].
Рендеринг пользовательского интерфейса
За исключением некоторых случаев (cм. ниже) ни один код Flutter Framework не выполняется без запуска рендеринга Flutter Engine.
Исключения:
• Gesture / Жест (событие на стекле)
• Сообщения платформы (сообщения, которые создаются устройством, например, GPS)
• Сообщения устройства (сообщения, которые относятся к изменению состояния устройства, например, ориентация, приложение, отправленное в фоновом режиме, предупреждения памяти, настройки устройства…)
• Future или http-ответы
Всё в конечном итоге преобразуется в пиксели, которые будут отображаться на экране, и Flutter Framework преобразует Widgets, которые мы используем для разработки приложения, в визуальные блоки, которые будут отображаться на экране. Данные визуальные части соответствуют объектам, называемым RenderObject, которые используются для:
• определения некоторой области экрана с точки зрения размеров, положения, геометрии, а также с точки зрения «rendered content»
• определения зон экрана, на которые могут повлиять жесты (касания пальцев)
Render Tree
Набор всех RenderObject формирует дерево, называемое Render Tree. В верхней части этого дерева (root) мы находим RenderView, которое представляет общую поверхность для объектов Render Tree и является специальной версией RenderObject [3]. Визуально мы могли бы представить все это так, как показано на рисунке 4.

Рисунок 1 ‒ Render Tree
При запуске Flutter приложения сначала вызывается функция main(), который в конечном итоге вызовет метод runApp(Widget app). Во время вызова метода runApp() Flutter Framework инициализирует интерфейсы между собой и Flutter Engine. Эти интерфейсы называются bindings (прим: привязки). Привязки предназначены для того, чтобы быть связующим звеном между фреймворком и движком Flutter. Только с помощью привязок можно обмениваться данными между Flutter Framework и Flutter Engine. Каждая привязка отвечает за обработку набора конкретных задач, действий, событий, сгруппированных по области деятельности [3].
Со стороны разработчика, всё, что связано с пользовательским интерфейсом с точки зрения компоновки и взаимодействия, делается с помощью виджетов. В фреймворке Flutter виджеты вместе представляют из себя иерархическую структуру. Виджет сам по себе может быть агрегацией других виджетов. Widget может представлять лист, узел в дереве, даже само дерево или, почему бы и нет, лес деревьев.
Чтобы иметь возможность генерировать пиксели, которые составляют изображение, отображаемое на устройстве, Flutter должен знать в деталях все маленькие части, которые составляют экран, и, чтобы определить все части, ему необходимо знать раскрытие всех виджетов. Чтобы проиллюстрировать данный момент, рассмотрим принцип матрёшки: в закрытом состоянии вы видите только 1 куклу, но она содержит другую, которая в свою очередь содержит ещё одну и так далее…
Когда Flutter "раскроет" все виджеты (часть экрана), это будет похоже на получение всех кукол (часть целого).
Каждому виджету соответствует один элемент. Элементы связаны друг с другом и образуют дерево. Следовательно элемент является ссылкой на что-то в дереве. Элемент указывает на один виджет, а также может указывать на RenderObject, а точнее Element указывает на Widget, который создал этот Element. Во Flutter вся механика основана на инвалидации элемента или renderObject.
Инвалидация элемента может быть сделана следующими способами:
• используя setState, который инвалидирует весь StatefulElement (обратите внимание, что я намеренно не говорю StatefulWidget)
• через уведомления, обрабатываемые proxyElement (например, InheritedWidget), который инвалидирует любой элемент, зависящий от данного proxyElement
Результатом инвалидации является то, что на соответствующий элемент появляется ссылка в списке dirty элементов. Инвалидация renderObject означает, что структура элементов никак не меняется, но происходит изменение на уровне renderObject, например:
• изменение его размеров, положения, геометрии...
• необходимо что-то перекрасить, например, когда вы просто меняете цвет фона, стиль шрифт...
Результатом такой инвалидации является ссылка на соответствующий renderObject в списке объектов рендеринга (renderObjects), которые необходимо перестроить или перекрасить. Независимо от типа инвалидации вызывается SchedulerBinding (помните такое?) для запроса к Flutter Engine, чтобы тот запланировал новый кадр.

Кроссплатформенная разработка подразумевает использование специальных утилит (фреймворков) для создания приложения на основе семейства языков JavaScript. Вся структура и логика приложения создается с помощью таких инструментов (PhoneGap, Titanium, Xamarin, Cordova и др.) на JavaScript, а затем оборачивается в нативный запускающий элемент, т.е. интегрируется в базовый проект для XCode или Android Studio, что позволяет создавать сборки проекта с одной и той же логикой под несколько операционных систем сразу. Ближайшая аналогия в случае с персональными компьютерами: MS Word, Skype, почтовые агенты, календари – это нативно разработанные приложения под настольную операционную систему; все, что происходит в браузере (сайты, онлайн-редакторы текста и графики, социальные сети, чаты, форумы) – это кроссплатформенные технологии.
Подходы к разработке приложений
Кроссплатформенная разработка
Кроссплатформенный подход к разработке имеет следующие положительные моменты:

Нативная разработка
Разработка на родных технологиях и языках под iOS и Android имеет следующие положительные моменты:
1. Скорость работы приложения. Так как приложение создается с использованием оригинальных инструментов разработки (XCode, Android Studio), получаемый в результате компиляции проекта код является оптимальным для данной платформы. Приложение получает полную аппаратную поддержку устройства (обработка тех же изображений осуществляется отдельным процессором, специально для этого предназначенным – GPU), используется многопоточность для реализации сложных задач и загрузки контента в фоне, в процессе разработки программисты могут измерять скорость работы всех участков кода и при необходимости их оптимизировать, в их распоряжении также есть инструменты по мониторингу использования оперативной памяти, поиску возможных утечек и т.д.
2. Гибкость в реализации.
...

Обзор существующих решений
Как правило, выход любого бизнеса в интернет протекает по следующему сценарию: сначала компания запускает сайт, затем его адаптируют под мобильные устройства, и, если наблюдается прирост трафика, появляется смысл закрепиться среди владельцев мобильных гаджетов, и компания выпускает приложение.
Сравнивать мобильный сайт и приложение нет смысла ‒ второе однозначно выигрывает за счет широты своих возможностей и отзывчивого интерфейса, взаимодействовать с которым через телефон или планшет гораздо комфортнее. Кроме того, приложение может работать без постоянного подключения к интернету.
Вне зависимости от того, на чем построен ваш бизнес ‒ на продажах, предоставлении услуг или просветительской деятельности, сегодня невозможно не учитывать время, которое люди проводят перед экранами мобильных устройств.
PhoneGap позволяет создавать мобильные приложения используя стандартные веб технологии (HTML5, JavaScript и CSS3).
...

Выбор языка для фреймворка
При разработке Flutter использовались четыре основных параметра для оценки языка программирования и были учтены пожелания и потребности авторов, разработчиков и конечных пользователей. Было выявлено, что разные языки удовлетворяют некоторым требованиям, но Dart получил высокие оценки по всем параметрам оценки и отвечает всем поставленным требованиям и критериям.
Среды исполнения Dart и компиляторы поддерживают сочетание двух важных функций Flutter: быстрый цикл разработки на основе JIT, который позволяет изменять формы и выполнять горячие перезагрузки с сохранением состояния в языке с типизацией, а также компилятор Ahead-of-Time, который выдает эффективный код ARM для быстрого запуска и прогнозирования производительности производственных развертываний.
Критерии, по которым оценивался язык программирования для Flutter:
• Производительность разработчика.
...

Рендеринг пользовательского интерфейса
За исключением некоторых случаев (cм. ниже) ни один код Flutter Framework не выполняется без запуска рендеринга Flutter Engine.
Исключения:
• Gesture / Жест (событие на стекле)
• Сообщения платформы (сообщения, которые создаются устройством, например, GPS)
• Сообщения устройства (сообщения, которые относятся к изменению состояния устройства, например, ориентация, приложение, отправленное в фоновом режиме, предупреждения памяти, настройки устройства…)
• Future или http-ответы
Всё в конечном итоге преобразуется в пиксели, которые будут отображаться на экране, и Flutter Framework преобразует Widgets, которые мы используем для разработки приложения, в визуальные блоки, которые будут отображаться на экране.
...

Render Tree
Набор всех RenderObject формирует дерево, называемое Render Tree. В верхней части этого дерева (root) мы находим RenderView, которое представляет общую поверхность для объектов Render Tree и является специальной версией RenderObject [3]. Визуально мы могли бы представить все это так, как показано на рисунке 4.

Рисунок 1 ‒ Render Tree
При запуске Flutter приложения сначала вызывается функция main(), который в конечном итоге вызовет метод runApp(Widget app). Во время вызова метода runApp() Flutter Framework инициализирует интерфейсы между собой и Flutter Engine. Эти интерфейсы называются bindings (прим: привязки). Привязки предназначены для того, чтобы быть связующим звеном между фреймворком и движком Flutter. Только с помощью привязок можно обмениваться данными между Flutter Framework и Flutter Engine. Каждая привязка отвечает за обработку набора конкретных задач, действий, событий, сгруппированных по области деятельности [3].
...

Язык Dart
Dart ‒ язык программирования, созданный Google. Dart позиционируется в качестве замены/альтернативы JavaScript. Один из разработчиков языка Марк Миллер (Mark S. Miller) написал, что JavaScript «имеет фундаментальные изъяны» («Javascript has fundamental flaws…»), которые невозможно исправить. Поэтому и был создан Dart. [4]
Первая общедоступная информация об этом языке программирования появилась 12 сентября 2011 года на конференции разработчиков Goto. 10 октября 2011 была проведена официальная презентация языка Google Dart.
Задачи, поставленные перед разработчиками языка:
• Создать структурированный и в то же время гибкий язык для веб-программирования
• Сделать язык похожим на существующие для упрощения обучения
• Высокая производительность получаемых программ как в браузерах, так и в иных окружениях, начиная от смартфонов и заканчивая серверами.
...

Виртуальная машина Dart
По сути, любой ваш код Dart на виртуальной машине работает внутри изолята. Изолят похож на изолированную среду Dart с собственной кучей памяти и потоком управления. Хотя может быть несколько изолятов, выполняющих код в одно и то же время, они не могут напрямую делиться состоянием и могут общаться только путем передачи сообщений через порты.
Поток ОС может вводить только один изолят за раз. Если он хочет ввести другой изолят, он должен оставить тот, в котором он находится в настоящий момент. Кроме того, одновременно существует только один mutator thread, связанный с изолятом. Mutator thread выполняет код Dart и использует общедоступный C API-интерфейс виртуальной машины.
Помимо mutator thread, изолят также может быть связан с несколькими вспомогательными потоками, включая фоновый поток JIT-компилятора, потоки уборщика GC и даже параллельные потоки маркера GC [7].
...

Многопоточность Dart
Любой код Dart внутри виртуальной машины выполняется в некотором изоляте, который лучше всего можно описать как изолированный юниверс Dart со своей собственной памятью (heap) и, как правило, со своим собственным потоком управления (mutator thread). Схема выполнения кода Dart в виртуальной машине представлен на рисунке 1. Может быть много изолятов, выполняющих код Dart одновременно, но они не могут совместно использовать какое-либо состояние напрямую и могут общаться только через сообщения, проходящие через порты (не путать с сетевыми портами!).
Отношения между потоками ОС и изолятами немного размыты и сильно зависят от того, как ВМ встроена в приложение. Гарантируется только следующее:
• поток ОС может вводить только один изолят за раз. Он должен оставить текущий изолят, если он хочет войти в другой изолятор;
• за один раз может быть только одна мутаторная нить, связанная с изолятом.
...

Выполнение Dart кода через JIT
В настоящее время виртуальная машина Dart 2 не имеет возможности напрямую выполнять Dart из необработанного источника, вместо этого виртуальная машина ожидает получить двоичные файлы ядра, которые содержат сериализованный AST ядра. Задача перевода источника Dart в ядро AST выполняется с помощью общего интерфейса (CFE), написанного на Dart, и совместно используется различными инструментами Dart (например, VM, dart2js, Dart Dev Compiler). Чтобы сохранить удобство выполнения Dart напрямую из исходного автономного исполняемого файла dart, имеется вспомогательный изолятор, называемый службой ядра, который обрабатывает компиляцию источника Dart в ядро. ВМ затем будет запускать получившиеся двоичные файлы. Схема представлена на рисунке 2.

Рисунок 3 ‒ Схема выполнения исходного кода Dart в виртуальной машине
Однако этот способ не является единственным способом организовать CFE и ВМ для запуска кода Dart.
...