Гибридная мощность: преимущества и выгоды Flutter

Flutter — это гибридная платформа для разработки мобильных приложений от Google, которая вышла в версии 1.0 в конце 2018 года. Хотя это новый участник в списке гибридных сред разработки, замечательные идеи, лежащие в его основе, быстро завоевали популярность среди разработчиков.

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

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

• Приложение Google Реклама
• Приложение GrabMerchant от GrabFood
• Приложение Xianyu от Alibaba Group, которое скачали более 50 миллионов раз.
• Нубанк
• Приложение eBay Motors

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

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

Преимущества Flutter (с точки зрения разработки)

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

Кривая быстрого обучения

Первый приятный сюрприз, который Flutter преподносит разработчикам, — это то, как быстро он может начать работу. Для завершения процесса установки и настройки рабочей среды разработки требуется менее 30 минут. Теперь все готово для создания вашего первого приложения Flutter.

Интеграция с популярным редактором

Flutter также имеет отличную интеграцию с редактором. Я лично использую Android Studio, но есть инструкции по настройке IntelliJ, VSCode или Emacs.

Чистый процесс разработки

По сравнению с моим предыдущим опытом работы с гибридными средами приложений процесс разработки также кажется более чистым . Например, когда я использовал WebViews для отображения списков с большим количеством элементов (около 100 или около того), мне приходилось иметь дело с высокой загрузкой ЦП, особенно когда пользователь прокручивал список. Я решил их, используя элементы Ionic framework, специально созданные для этого. Во Flutter есть один общепринятый способ отображения списков, ListView , который имеет потрясающую производительность из коробки.

Живая перезагрузка

Еще одна вещь, которая меня приятно удивила, это функция перезагрузки в реальном времени. Как разработчик полного стека, я привык к таким фреймворкам, как BrowserWatch, обеспечивающим перезагрузку в реальном времени в браузере.

В нативной разработке этого нет (но я думаю, что SwiftUI от Apple делает некоторый прогресс в этом направлении для разработки под iOS). Разработчикам Android и iOS обычно нужно написать код, а затем дождаться его компиляции и загрузки на устройство или симулятор, прежде чем они смогут увидеть изменения.

Flutter предоставляет (а-ля React Native) механизм перезагрузки в реальном времени, при котором код приложения перезагружается на устройство, как только разработчики нажимают «сохранить». Это дает немедленную обратную связь, что значительно ускоряет разработку.

Представление

Производительность приложений — еще одна метрика, в которой Flutter постепенно становится победителем.

Поскольку инфраструктура Flutter находится в активной разработке, есть много мест, где можно оптимизировать производительность. Это очевидно, например, во Flutter 1.17, который увеличил производительность рендеринга до 50% на новых устройствах iOS и снизил потребление памяти до 70% для определенных типов рабочих нагрузок.

Кроссплатформенная согласованность

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

Язык, инструменты и расширение

Я считаю, что здесь следует упомянуть еще три меньших, но все же важных аспекта:

• Dart, язык, на котором программируются приложения Flutter, очень прост в использовании. Но это также довольно мощный язык, изначально предназначенный Google для замены JavaScript. Если у разработчиков есть опыт работы с JavaScript или другими C-подобными языками, им не составит труда освоить Dart в течение дня или двух.
• Существует надежный менеджер плагинов (pub), включенный в цепочку инструментов по умолчанию, и огромная библиотека плагинов, доступных через репозиторий плагинов pub.dev.
• Создавать плагины, чтобы использовать преимущества собственных возможностей платформы, довольно просто, поэтому, если разработчикам нужен доступ к функции платформы, для которой еще не существует плагина, написать его не так уж сложно.

Преимущества Flutter (с точки зрения бизнеса)

Самым большим преимуществом Flutter, о котором думают большинство компаний, является необходимость нанять только одну команду для платформ iOS и Android. Однако более важным преимуществом, которое многие компании упускают из виду, является ускорение выхода на рынок . Используя преимущества разработки, описанные в предыдущем разделе, небольшая команда разработчиков может создать красивое приложение с собственной производительностью, которое обеспечивает одинаковый пользовательский интерфейс на обеих платформах гораздо быстрее, используя Flutter.

Flutter позволяет разработчикам создавать действительно красивые пользовательские интерфейсы . Взгляните на недавний вызов от Google и Lenovo по созданию красивого пользовательского интерфейса циферблата для Lenovo Smart Clock. Победитель, Particle Clock от Микеля Андерссона, не только уникально элегантен, но и демонстрирует , насколько производительны анимации во Flutter.

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

Ограничения, которые следует учитывать перед использованием Flutter

Справедливости ради следует отметить, что Flutter, будучи более новым, не так проверен в боевых условиях, как другие гибридные платформы для мобильных приложений, такие как React Native — в конце концов, React Native охватывает мобильные приложения Facebook, Instagram, Skype и Discord.

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

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

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

Еще одна вещь, которая не повлияет на многие проекты, но о которой вы должны знать, заключается в том, что на данный момент Flutter не поддерживает никаких 3D-возможностей. Сейчас команда сосредоточена только на 2D. Но большинство приложений не используют никаких 3D-функций, так что это не должно быть препятствием для большинства разработчиков.

Некоторые советы из моего опыта работы с Flutter

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

Начать работу с Flutter очень просто. Я начал с замечательного курса по App Brewery. Однако после прохождения первых нескольких модулей я подумал, что узнал достаточно, и начал создавать первое приложение, которое я запустил.

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

• Как разбить на модули и структурировать код моего приложения Flutter.
• Как работает государственное управление.
• Как аутентифицировать пользователей и отслеживать статус аутентификации на разных страницах моего приложения Flutter.
• Как интегрировать уведомления с помощью пакета Firebase Messaging.

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

Есть много ресурсов, которые вы можете легко найти, выполнив поиск в Google, чтобы узнать о концепциях, которые я перечислил выше. Вы можете начать с просмотра ссылок на странице «Узнать больше» на сайте Flutter.

Еще я обнаружил, что из-за того, насколько новым является Flutter, не существует единого шаблона для структурирования вашего приложения. Исходя из карьеры разработчиков, в основном основанной на Django, я привык знать, что MVC — это шаблон для использования в моих приложениях Django. У iOS также есть явный победитель в шаблоне MVVM, которому она следует. У Android есть набор рекомендаций по лучшей разработке приложения.

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

Я лично использую пакет provider как для внедрения зависимостей, так и для управления изменениями. Мои приложения Flutter также примерно разделены на три линии:

1. Представления — это виджеты, из которых состоит приложение, включая экраны. Я внедряю службы и модели с помощью виджета Consumer из пакета Provider в свои представления, чтобы создавать пользовательский интерфейс на основе доступных данных. Виджет Consumer также перестраивает представление при изменении состояния, и именно так мои приложения реагируют на изменения состояния.
2. Models — старые добрые объекты, которые я использую для хранения структурированных данных.
3. Services/controllers , где находится большая часть бизнес-логики. Здесь также закодированы интерфейсы API, которые могут извлекать и отправлять данные в API. Эти интерфейсы API предоставляют и принимают модели для передачи данных.

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

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

Если вы в конечном итоге не используете BLoC или provider , вам придется придумать какой-то метод управления состоянием в вашем приложении, особенно когда речь идет об уведомлениях.

Чем Flutter отличается от других гибридных фреймворков

Реагировать на родной

React Native на сегодняшний день является самой популярной и успешной средой для гибридных мобильных приложений, и на то есть веские причины. Потребовалась популярная и хорошо сделанная интерфейсная веб-инфраструктура React, которая позволила миллионам фронтенд-разработчиков также начать писать мобильные приложения. Я уверен, что многие из замечательных мобильных приложений, которые у нас есть сегодня, никогда бы не были созданы, если бы разработчикам нужно было найти время и мотивацию для изучения собственных SDK для разработки iOS и Android.

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

Компоненты React Native описываются в коде JavaScript и переводятся в собственные элементы управления. Это означает, что пользователи по-разному воспринимают пользовательский интерфейс в версиях приложения для iOS и Android. Если разработчики пытаются обеспечить нативный опыт для своих пользователей, это здорово.

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

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

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

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

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

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

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

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

Апачи Кордова

Apache Cordova — это не столько фреймворк, сколько оболочка браузера. С Cordova вы создаете свое приложение, используя веб-технологии: HTML, CSS и JavaScript. Cordova предоставляет вам возможность запускать это веб-приложение на мобильных платформах и предоставляет собственные API-интерфейсы платформы в JavaScript, чтобы ваше приложение могло взаимодействовать с платформой.

Для Cordova создано несколько различных фреймворков. Одним из известных, которые я использовал в прошлом, является Ionic framework. Он предоставляет набор компонентов пользовательского интерфейса, которые выглядят и действуют аналогично собственным компонентам платформы. Однако эти компоненты реализованы с использованием HTML/CSS/JavaScript.

Опыт разработки с Cordova и Ionic действительно хорош, и начать работу можно очень быстро, если вы уже являетесь веб-разработчиком. Поскольку вы создаете приложения с использованием веб-технологий, вам доступна вся веб-экосистема. Подумайте о сотнях тысяч небольших компонентов и библиотек, основанных на HTML/CSS/JavaScript, и вы сможете использовать большинство из них, если не все. Это означает, что большинство «виджетов», которые вам нужны, уже доступны вам онлайн.

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

Хотя Cordova — отличный способ разработать MVP или даже первые несколько версий вашего приложения, первое приложение, которое я создал во Flutter, было портом приложения Ionic. Улучшения производительности, которые мы получили, особенно в представлениях с большим количеством контента для прокрутки, были заметны с первого взаимодействия.

Ксамарин

У меня нет опыта работы с Xamarian, поэтому я не могу честно сравнивать их. Однако во время своего исследования я наткнулся на отличную статью, в которой проводится справедливое сравнение.

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

Технический обзор Flutter

Flutter: «игровой движок» фреймворков гибридных приложений

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

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

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

Все это виджет

Документы Flutter говорят о Flutter как о «фреймворке в стиле React». Это проявляется в том, как приложения создаются путем объединения небольших виджетов ( компонентов в терминологии React).

Тем не менее, Flutter продвигает подход « все — виджет » на шаг дальше, чем любой другой фреймворк, с которым я работал.

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

Более уникальным является то, что InheritedWidget не имеет пользовательского интерфейса и не обеспечивает никакого взаимодействия с пользователем. Его единственная задача — добавить информацию в дерево виджетов, чтобы в какой-то момент в глубине дерева вы могли извлечь эту информацию.

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

К такому виджетному подходу нужно привыкнуть. Но как только вы с ним познакомитесь, он станет мощным способом создания функциональности в ваших приложениях.

Флаттер, дротик и копание в источнике

Flutter тесно связан с Dart. Хотя основной движок рендеринга построен на C/C++, это лишь небольшая часть Flutter.

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

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

Совместимость с собственной платформой

В то время как Flutter предоставляет уровень пользовательского интерфейса, а бизнес-логика легко обрабатывается с помощью чистых пакетов Dart, для доступа к возможностям собственной платформы, таким как геолокация и управление камерой, использование сторонних пакетов pub.dev является самой простой стратегией.

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

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

Стоит ли использовать Flutter в вашем следующем проекте?

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

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

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

• Простота запуска Flutter
• Прирост скорости, который можно получить за счет использования фреймворка, который был разработан с нуля, чтобы сосредоточиться на скорости разработки.
• Богатая экосистема легкодоступных библиотек Dart и сторонних пакетов
• Другой, но чрезвычайно продуктивный способ разработки приложений Flutter с использованием подхода « все — виджет ».

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

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

Как партнер Google Cloud, специалисты Toptal, сертифицированные Google, доступны для компаний по запросу для их наиболее важных проектов.