28 подписчиков

Что революционного во Flutter

19 мая 202219 мая 2022

19 мин

Оглавление

Что такое Flutter?
Краткая история разработки мобильных приложений
Платформенные SDK

Что такое Flutter?

SDK для мобильных приложений Flutter - это новый способ создания красивых "нативных" мобильных приложений, который позволяет отойти от привычных в прошлом приложений "cookie cutter". Людям, которые используют Flutter, он очень нравится; например, посмотрите это, это или это. Или вот список статей и видео, составленный третьей стороной.

Как и в случае с любой новой системой, люди хотят знать, что отличает Flutter, или, говоря иначе, "что нового и захватывающего во Flutter?". Это справедливый вопрос, и в этой статье мы постараемся ответить на него с технической точки зрения - не только что интересно, но и почему.

Но сначала немного истории.

Краткая история разработки мобильных приложений

Разработка мобильных приложений - относительно недавняя область деятельности. Сторонние разработчики могут создавать мобильные приложения менее десяти лет, поэтому неудивительно, что инструменты продолжают развиваться.

Платформенные SDK

Apple iOS SDK был выпущен в 2008 году, а Google Android SDK - в 2009 году. Эти два SDK были основаны на разных языках: Objective-C и Java, соответственно.

Ваше приложение взаимодействует с платформой для создания виджетов или доступа к сервисам, таким как камера. Виджеты отображаются на холсте экрана, а события передаются обратно виджетам. Это простая архитектура, но вам придется создавать отдельные приложения для каждой платформы, поскольку виджеты отличаются, не говоря уже о родных языках.

WebViews

Первые кроссплатформенные фреймворки были основаны на JavaScript и WebViews. В качестве примера можно привести семейство родственных фреймворков: PhoneGap, Apache Cordova, Ionic и другие. До того, как Apple выпустила свой iOS SDK, они поощряли сторонних разработчиков создавать веб-приложения для iPhone, поэтому создание кроссплатформенных приложений с использованием веб-технологий было очевидным шагом.

Ваше приложение создает HTML и отображает его в WebView на платформе. Обратите внимание, что таким языкам, как JavaScript, трудно напрямую обращаться к родному коду (например, к сервисам), поэтому они проходят через "мост", который выполняет контекстные переключения между областью JavaScript и родной областью. Поскольку сервисы платформы, как правило, вызываются не так часто, это не вызвало слишком больших проблем с производительностью.

Реактивные представления

Реактивные веб-фреймворки, такие как ReactJS (и другие), стали популярными в основном потому, что они упрощают создание веб-представлений за счет использования паттернов программирования, заимствованных из реактивного программирования. В 2015 году был создан React Native, чтобы привнести многие преимущества представлений реактивного стиля в мобильные приложения.

React Native очень популярен (и заслуживает этого), но поскольку сфера JavaScript обращена к виджетам платформы в нативной сфере, ей приходится проходить через мост и для них. К виджетам обычно обращаются довольно часто (до 60 раз в секунду во время анимации, переходов или когда пользователь "проводит" пальцем по экрану), поэтому это может вызвать проблемы с производительностью. Как говорится в одной статье о React Native:

Здесь кроется один из главных ключей к пониманию производительности React Native. Каждая область сама по себе молниеносно быстра. Узкое место в производительности часто возникает, когда мы переходим от одного царства к другому. Для того чтобы создать производительные приложения React Native, мы должны свести к минимуму количество переходов через мост.

Flutter

Как и React Native, Flutter также предоставляет представления в реактивном стиле. Flutter использует другой подход к предотвращению проблем с производительностью, вызванных необходимостью использования моста JavaScript, используя компилируемый язык программирования, а именно Dart. Dart компилируется "заранее" (AOT) в нативный код для различных платформ. Это позволяет Flutter взаимодействовать с платформой, не проходя через мост JavaScript, который выполняет переключение контекста. Компиляция в нативный код также улучшает время запуска приложения.

Того факта, что Flutter является единственным мобильным SDK, который предоставляет реактивные представления, не требуя моста JavaScript, должно быть достаточно, чтобы сделать Flutter интересным и стоящим того, чтобы попробовать, но есть кое-что гораздо более революционное во Flutter, и это то, как он реализует виджеты.

Виджеты

Виджеты - это элементы, которые влияют и управляют видом и интерфейсом приложения. Не будет преувеличением сказать, что виджеты являются одной из самых важных частей мобильного приложения. Фактически, одни только виджеты могут построить или сломать приложение.

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

Flutter имеет новую архитектуру, включающую виджеты, которые хорошо выглядят и ощущаются, быстро работают, настраиваются и расширяются. Именно так, Flutter не использует виджеты платформы (или DOM WebViews), он предоставляет свои собственные виджеты.

Flutter переносит виджеты и рендерер из платформы в приложение, что позволяет им быть настраиваемыми и расширяемыми. Все, что Flutter требует от платформы, - это холст, на котором будут отображаться виджеты, чтобы они могли появиться на экране устройства, и доступ к событиям (касания, таймеры и т. д.) и сервисам (местоположение, камера и т. д.).

Между программой Dart (зеленый цвет) и кодом родной платформы (синий цвет, для iOS или Android) все еще существует интерфейс, который выполняет кодирование и декодирование данных, но это может быть на порядки быстрее, чем мост JavaScript.

Перемещение виджетов и рендеринга в приложение влияет на его размер. Минимальный размер приложения Flutter на Android составляет примерно 4,7 МБ, что соответствует минимальным размерам приложений, созданных с помощью аналогичных инструментов. Вам решать, стоят ли преимущества Flutter каких-либо компромиссов, поэтому в оставшейся части статьи мы обсудим эти преимущества.

Макет

Одним из самых больших улучшений во Flutter является способ верстки. Макет определяет размер и положение виджетов на основе набора правил (также называемых ограничениями).

Традиционно в компоновке используется большой набор правил, которые можно применить практически к любому виджету. Правила реализуют несколько методов компоновки. В качестве примера возьмем CSS-верстку, поскольку она хорошо известна (хотя верстка в Android и iOS в основном похожа). В CSS есть свойства (правила), которые применяются к элементам HTML (виджетам). В CSS3 определено 375 свойств.

CSS включает ряд моделей верстки, в том числе (несколько) боксовых моделей, плавающие элементы, таблицы, несколько колонок текста, страничные носители и так далее. Дополнительные модели верстки, такие как flexbox и grid, были добавлены позже, поскольку разработчики и дизайнеры нуждались в большем контроле над версткой и использовали таблицы и прозрачные изображения для получения желаемого. В традиционной верстке новые модели верстки не могут быть добавлены разработчиком, поэтому flexbox и grid должны были быть добавлены в CSS и реализованы во всех браузерах.

Еще одна проблема традиционной верстки заключается в том, что правила могут взаимодействовать (и даже конфликтовать) друг с другом, а к элементам часто применяются десятки правил. Это делает верстку медленной. Что еще хуже, производительность верстки обычно имеет порядок степени N, поэтому с увеличением количества элементов верстка замедляется еще больше.

Flutter начался как эксперимент, проведенный членами команды разработчиков браузера Chrome в Google. Мы хотели проверить, можно ли создать более быстрый рендерер, если игнорировать традиционную модель верстки. Через несколько недель мы добились значительного прироста производительности. Мы обнаружили:

Большинство макетов относительно просты, например: текст на прокручиваемой странице, фиксированные прямоугольники, размер и положение которых зависят только от размера дисплея, и, возможно, некоторые таблицы, плавающие элементы и т. д.
Большая часть верстки локальна для поддерева виджетов, и это поддерево обычно использует одну модель верстки, поэтому только небольшое количество правил должно поддерживаться этими виджетами.

Мы поняли, что компоновку можно значительно упростить, если перевернуть ее с ног на голову:

Вместо того чтобы иметь большой набор правил компоновки, которые могут быть применены к любому виджету, каждый виджет будет определять свою собственную простую модель компоновки.
Поскольку каждый виджет имеет гораздо меньший набор правил компоновки, которые необходимо учитывать, компоновка может быть значительно оптимизирована.
Чтобы еще больше упростить компоновку, мы превратили почти все в виджеты.

Вот код Flutter для создания простого дерева виджетов с макетом:

new Center(
child: new Column(
children: [
new Text('Hello, World!')),
new Icon(Icons.star, color: Colors.green)
]
)
)

Этот код достаточно семантичен, чтобы вы могли легко представить, что он даст, но вот результирующее отображение:

В этом коде все является виджетом, включая макет. Виджет Center центрирует дочерний виджет внутри родительского (например, экрана). Виджет макета Column располагает своих дочерних элементов (список виджетов) вертикально. Колонка содержит виджет Text и виджет Icon (у которого есть свойство - цвет).

Во Flutter центрирование и отступы - это виджеты. Темы - это виджеты, которые применяются к их дочерним элементам. И даже приложения и навигация - это виджеты.

Flutter включает в себя довольно много виджетов для верстки, не только колонок, но и строк, сеток, списков и т.д. Кроме того, Flutter имеет уникальную модель компоновки, которую мы называем "sliver layout model", которая используется для прокрутки. Макет во Flutter настолько быстр, что может использоваться для прокрутки. Подумайте об этом на мгновение. Прокрутка должна быть настолько мгновенной и плавной, чтобы пользователю казалось, что изображение на экране прикреплено к его пальцу, когда он проводит им по физическому экрану.

Используя макет для прокрутки, Flutter может реализовать расширенные виды прокрутки, как показано ниже. Обратите внимание, что это анимированные GIF-изображения, Flutter работает еще более плавно. Вы можете (и должны!) запустить эти приложения самостоятельно; см. раздел "Ресурсы" в конце статьи.

В большинстве случаев Flutter может выполнять верстку за один проход, что означает линейное время, поэтому он может обрабатывать большое количество виджетов. Flutter также выполняет кэширование и другие действия, чтобы по возможности вообще не выполнять верстку.

Индивидуальный дизайн

Поскольку виджеты теперь являются частью приложения, можно добавлять новые виджеты и настраивать существующие, чтобы придать им другой вид или ощущение, или чтобы они соответствовали бренду компании. Тенденция в мобильном дизайне заключается в отказе от приложений, которые были распространены несколько лет назад, и переходе к индивидуальному дизайну, который восхищает пользователей и завоевывает награды.

Flutter поставляется с богатыми, настраиваемыми наборами виджетов для Android, iOS и Material Design (на самом деле, нам сказали, что Flutter имеет одну из самых точных реализаций Material Design). Мы использовали настраиваемость Flutter для создания этих наборов виджетов, чтобы они соответствовали внешнему виду и ощущениям родных виджетов на разных платформах. Разработчики приложений могут использовать те же возможности настройки для дальнейшего совершенствования виджетов в соответствии со своими желаниями и потребностями.

Подробнее о реактивных представлениях

Библиотеки для реактивных веб-представлений показали виртуальный DOM. DOM - это объектная модель HTML-документа, API, используемый JavaScript для манипулирования HTML-документом, представленным в виде дерева элементов. Виртуальный DOM - это абстрактная версия DOM, созданная с помощью объектов на языке программирования, в данном случае JavaScript.

В реактивных веб-представлениях (реализуемых такими системами, как ReactJS и другими) виртуальная DOM является неизменяемой и перестраивается с нуля каждый раз, когда что-либо меняется. Виртуальный DOM сравнивается с реальным DOM для создания набора минимальных изменений, которые затем выполняются для обновления реального DOM. Наконец, платформа перерисовывает реальный DOM и закрашивает его в холст.

Это может показаться огромным объемом дополнительной работы, но оно того стоит, поскольку манипуляции с HTML DOM очень дороги.

React Native делает то же самое, но для мобильных приложений. Вместо DOM он манипулирует родными виджетами на мобильной платформе. Вместо виртуального DOM он строит виртуальное дерево виджетов, сравнивает его с родными виджетами и обновляет только те, которые изменились.

Помните, что React Native приходится взаимодействовать с родными виджетами через мост, поэтому виртуальное дерево виджетов помогает свести к минимуму количество проходов через мост, но при этом позволяет использовать родные виджеты. Наконец, после обновления нативных виджетов платформа отображает их на холсте.

React Native - это большая победа для мобильной разработки, и она послужила вдохновением для Flutter, но Flutter делает еще один шаг вперед.

Напомним, что во Flutter виджеты и рендерер были перенесены из платформы в пользовательское приложение. Здесь нет нативных виджетов платформы для манипуляций, поэтому то, что было виртуальным деревом виджетов, теперь является деревом виджетов. Flutter рендерит дерево виджетов и рисует его на холсте платформы. Это красиво и просто (и быстро). Кроме того, анимация происходит в пространстве пользователя, поэтому приложение (и, следовательно, разработчик) имеет больше контроля над ней.

Сам рендерер Flutter интересен: он использует несколько внутренних древовидных структур для рендеринга только тех виджетов, которые должны быть обновлены на экране. Например, рендерер использует "структурное перерисовывание с использованием композитинга" ("структурное" означает по виджетам, что более эффективно, чем делать это по прямоугольным областям на экране). Неизмененные виджеты, даже те, которые переместились, "bit blitted" из кэша, что очень быстро. Это одна из тех вещей, которые делают прокрутку во Flutter такой производительной, даже при продвинутой прокрутке (обсуждалось и показывалось выше).

Для более детального ознакомления с рендерером Flutter я рекомендую это видео. Вы также можете посмотреть на код, поскольку Flutter имеет открытый исходный код. И конечно, вы можете настроить или даже заменить весь стек, включая рендерер, композитор, анимацию, распознаватель жестов и (конечно же) виджеты.

Язык программирования Dart

Поскольку Flutter, как и другие системы, использующие реактивные представления, обновляет дерево представлений для каждого нового кадра, он создает множество объектов, которые могут жить всего один кадр (шестидесятая часть секунды). К счастью, в Dart используется "сборка мусора поколений", которая очень эффективна для такого рода систем, поскольку объекты (особенно короткоживущие) относительно дешевы. Кроме того, распределение объектов может быть выполнено с помощью одного указателя. Это быстро и не требует блокировок, а также помогает избежать "дрожания" пользовательского интерфейса и заиканий.

Dart тоже имеет компилятор "tree shaking", который включает только тот код, который нужен в вашем приложении. Вы можете не стесняться использовать большую библиотеку виджетов, даже если вам нужен только один или два из них.

Для получения дополнительной информации о Dart прочитайте статью "Почему Flutter использует Dart".

Перезагрузка с учетом состояния

Одна из самых популярных функций Flutter - быстрая перезагрузка с сохранением состояния. Вы можете внести изменения в приложение Flutter во время его работы, и оно перезагрузит изменившийся код приложения и позволит ему продолжить работу с того места, где оно остановилось, часто менее чем за секунду. Если ваше приложение столкнулось с ошибкой, вы обычно можете исправить ее, а затем продолжить работу, как будто ошибки и не было. Даже если вам приходится выполнять полную перезагрузку, это происходит быстро.

Разработчики говорят нам, что это позволяет им "рисовать" свое приложение, внося по одному изменению за раз, а затем видеть результаты почти мгновенно, без необходимости перезапускать приложение.

Совместимость

Поскольку виджеты (и рендерер для этих виджетов) являются частью вашего приложения, а не платформы, нет необходимости в "библиотеках совместимости". Ваши приложения не только будут работать, но и будут работать одинаково на последних версиях ОС - Android Jelly Bean и новее и iOS 8.0 и новее. Это значительно снижает необходимость тестирования приложений на старых версиях ОС. Кроме того, вполне вероятно, что ваши приложения будут работать и на будущих версиях ОС.

Есть одна потенциальная проблема, о которой нас спрашивают. Поскольку Flutter не использует виджеты родной платформы, потребуется ли много времени для обновления виджетов Flutter, когда выйдет новая версия iOS или Android, поддерживающая новый виджет, или изменится внешний вид или поведение существующего виджета?

Прежде всего, Google является крупным внутренним пользователем Flutter, поэтому у нас есть сильный стимул обновлять наборы виджетов, чтобы они оставались актуальными и максимально приближенными к виджетам текущей платформы.
Если вдруг мы слишком медленно обновляем виджеты, Google - не единственный пользователь Flutter, у которого есть стимул поддерживать виджеты в актуальном состоянии. Виджеты Flutter настолько расширяемы и настраиваемы, что обновлять их может кто угодно, даже вы. Для этого даже не нужно подавать запрос на обновление. Вам никогда не придется ждать обновления самого Flutter.
И все вышесказанное относится только к тому случаю, если вы хотите, чтобы новое изменение отразилось в вашем приложении. Если вы не хотите, чтобы изменение повлияло на внешний вид или поведение вашего приложения, все в порядке. Виджеты являются частью вашего приложения, поэтому виджет никогда не изменится из-под вашего носа и не испортит внешний вид вашего приложения (или, что еще хуже, не сломает его).
Дополнительным преимуществом является то, что вы можете написать свое приложение так, чтобы оно использовало новый виджет даже на старых версиях ОС.

Другие преимущества

Простота Flutter делает его быстрым, но именно повсеместная настраиваемость и расширяемость делают его мощным.

В Dart есть репозиторий программных пакетов, с помощью которых вы можете расширить возможности своих приложений. Например, несколько пакетов, которые упрощают доступ к Firebase, чтобы вы могли создать "бессерверное" приложение. Один из сторонних авторов создал пакет, позволяющий получить доступ к хранилищу данных Redux. Есть также пакеты, называемые "плагинами", которые облегчают доступ к сервисам платформы и аппаратным средствам, таким как акселерометр или камера, независимым от ОС способом.

Конечно, Flutter также имеет открытый исходный код, что в сочетании с тем фактом, что стек рендеринга Flutter является частью вашего приложения, означает, что вы можете настроить практически все, что захотите, для отдельного приложения. Все, что выделено зеленым цветом на этом рисунке, может быть настроено:

Итак, "Что нового и интересного во Flutter?".

Если кто-то спросит вас о Flutter, теперь вы знаете, как ему ответить:

Преимущества реактивных представлений, без моста JavaScript
Быстрота, плавность и предсказуемость; код компилируется AOT в нативный (ARM) код
Разработчик имеет полный контроль над виджетами и макетом
Поставляется с красивыми, настраиваемыми виджетами
Отличные инструменты разработчика, с потрясающей горячей перезагрузкой
Больше производительности, больше совместимости, больше удовольствия
Вы заметили, что я оставил за пределами этого списка? Это то, что обычно является первым, что люди упоминают, когда говорят о Flutter, но для меня это одна из наименее интересных вещей о Flutter.

Это тот факт, что Flutter позволяет создавать красивые и быстрые приложения для нескольких платформ на основе одного кода. Конечно, это должно быть само собой разумеющимся! Именно настраиваемость и расширяемость позволяют легко нацелить Flutter на несколько платформ, не отказываясь от производительности или мощности.

Революционный

Я также никогда полностью не объяснял, почему Flutter является "революционным". Это просто кажется подходящим, потому что одним из первых крупных приложений, созданных с помощью Flutter сторонними разработчиками, стало официальное приложение к фильму "Гамильтон: Американский мюзикл", действие которого происходит во времена американской революционной войны. Гамильтон - один из самых популярных бродвейских мюзиклов всех времен.

Агентство Posse говорит, что они выбрали Flutter, потому что им нужно было создать приложение "всего за три коротких месяца". Они называют его "революционным приложением для революционного шоу" и говорят: "Flutter - отличный выбор для красивых, высокопроизводительных, управляемых брендом мобильных приложений". Они также выступили на конференции Google Developer Days с докладом о своем опыте создания приложения с помощью Flutter. Приложение доступно на Android и iOS и получило восторженные отзывы.

Присоединяйтесь к революции!

4 декабря 2018 года была выпущена версия Flutter 1.0. Мы продолжаем добавлять в него новые функции, и у нас запланировано много оптимизаций. Использование Flutter взлетело до небес: более 250 000 разработчиков по всему миру. В настоящее время Flutter входит в топ-20 активных репозиториев программного обеспечения на Github.

Если вы заинтересовались Flutter, вы можете установить его и поиграть с некоторыми примерами приложений, которые поставляются вместе с установкой. Обязательно проверьте перезагрузку с сохранением состояния.

Если вы не являетесь разработчиком или просто хотите посмотреть на некоторые приложения, вы можете установить приложения, созданные с помощью Flutter, и посмотреть, как они выглядят и работают. Я рекомендую приложение Hamilton, но есть и другие. Вам также стоит посмотреть видео с Google I/O, где они вживую кодируют приложение Flutter.

Ресурсы

Смотрите видеоролики о Flutter с Google I/O 2018
Смотрите видео с DartConf 2018, проходившей 23-24 января 2018 года в Лос-Анджелесе, штат Калифорния.
Видео о представлении Flutter.