Как мы полностью изменили своё мнение о Flutter

В последнее время, в свете закрытия доступа в популярные сторы для российских компаний, многие представители бизнеса находятся в поиске новых решений, как доставить своё приложение до пользователей. Пробуют разное: российские сторы, выкладку Android application package (APK) на сайте компании, замену мобильного приложения на progressive web app (PWA) или веб-приложение. В связи с этим, растёт спрос на технологии, которые помогают бизнесу разработать приложение (мобильное или веб) быстрее и дешевле.

Да, мы опять говорим о Flutter. А точнее о его новой версии — 3.0, которая, уверены, станет прорывом для многих, ведь Google в ней довёл свою кроссплатформенную технологию практически до совершенства.

Вы в блоге Surf. Мы более 12 лет работаем с мобильными технологиями. Переиспользуем успешный опыт из разных отраслей и помогаем крупным игрокам войти в топ. Среди наших клиентов лидеры своей сферы — Росбанк, Рив Гош, Бетховен и KFC.

💼Узнайте больше о нашем опыте разработки на Flutter.

📱 В канале в Telegram делимся своим продуктовым видением.

О чём в этой статье:

Мы начали работать с Flutter в 2019 году, почти сразу после того, как Google презентовал эту кроссплатформу. За это время мы успели реализовать более 15 проектов разной направленности и убедились на собственном опыте, что Flutter подходит для решения самых разных задач:

  • для банка: на нём можно разработать приложение, соответствующее всем требованиям безопасности. Например, мы реализовали такое b2b приложение для Росбанка и b2c решение для СМП Банка.
  • для ритейла: детально проработать UX, удобный юзер-флоу и реализовать дизайн, не отличимый от нативного. Мы использовали Flutter для создания приложений самой большой сети аптек в России — Ригла.
  • для корпораций: распределить сотрудников по ролям и отслеживать их эффективность. На Flutter мы написали внутреннее приложение для торгово-производственной компании и KFC.
  • для медиа: обеспечить качественное воспроизведение и сложную анимацию в высоконагруженном сервисе. Так, на Flutter, мы сделали видеостриминговое приложение The Hole.

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

Итак, мы создавали разные проекты на Flutter и успели оценить его по достоинству. Но недавно вышла новая версия фреймворка — 3.0, которая полностью перевернула наше представление о технологии.

Если коротко — это революция. Теперь на Flutter можно создавать не только качественные мобильные приложения, но и веб, и десктоп-приложения. О том, почему это сейчас особенно актуально, мы писали в этой статье о Progressive Web App (PWA). Но обо всём по порядку.

Чем хороша кроссплатформа для бизнеса

Мы уже писали о том, что кроссплатформа — это набор инструментов, который позволяет создать одно приложение сразу для двух операционных систем: iOS и Android. И вот в чём её плюсы:

  • Экономичность. Бизнес тратит меньше времени и денег на разработку, потому что Flutter-разработчик создаёт одну кодовую базу сразу для двух ОС. Стоимость такой разработки на 40% меньше, чем создание двух нативных приложений. При том, что для пользователя нет никакой визуальной и функциональной разницы.
  • Time-to-market короче. Для запуска Flutter-приложения потребуется меньше времени, чем на запуск нативного. Как следствие, оно начнёт приносить прибыль гораздо быстрее.
  • Нет ограничений в дизайне. Это важный пункт для любого бизнеса, который дорожит своей уникальностью. Flutter позволяет реализовать любой дизайн, включая сложную анимацию. О том, как мы работали с анимацией в приложении The Hole, читайте в нашем кейсе.
  • Безопасность. Код Flutter-приложение преобразуется в нативный, который нельзя восстановить с помощью реверс-инжиниринга.
  • Интегрировано с нативными возможностями. В приложении на Flutter можно использовать Touch и Face ID, сканер отпечатка пальца, GPS и камеру. Точно так же, как и в нативном приложении.

Что изменилось с появлением Flutter 3.0

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmedium.com%2Fflutter%2Fwhats-new-in-flutter-3-8c74a5bc32d0&postId=444661" rel="nofollow noreferrer noopener" target="_blank">medium.com/flutter</a>
Источник: medium.com/flutter

1. Теперь на одной технологии можно реализовать сразу три канала цифровых продаж: мобильное приложение, десктоп и веб-версию. Это ещё больше снизит трудоёмкость, бюджет проекта и риски, связанные с интеграцией. Например, когда мы работали над проектом KFC DSR, нам пришлось создавать веб-версию и мобильное приложение, используя разные технологии. Сейчас мы бы реализовали всё на Flutter.

2. Теперь Flutter официально поддерживает шесть платформ — и делает это хорошо. На Flutter теперь можно создавать решения для Windows, macOS и Linux. Кроме того, он стал более доступным — поддерживает озвучивание текста на экране, упрощённую навигацию и инверсию цвета.

Производительность стала ещё лучше

Во Flutter 3.0 появился новый инструмент — Impeller. Это экспериментальный инструмент, который значительно улучшает работу анимации и рендеринга. Сейчас он доступен только для iOS, но тесты команды Surf показывают действительно отличные результаты в росте производительности приложения. Это хорошая новость для всех мультимедийных проектов и высоконагруженных стриминговых сервисов. В видеостриминге, как нигде, важна высокая производительность, а также качественное и быстрое воспроизведение видео. Раньше у Flutter с этим были некоторые сложности, но в свежей третьей версии инструмент Impeller полностью решает проблемы частоты смены кадров.

Приложение <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fsurf.ru%2Fcases%2Fthehole%2F%3Futm_source%3Dvc%26amp%3Butm_medium%3Darticle%26amp%3Butm_campaign%3Dmy-polnostyu-izmenili-svoyo-mnenie-o-flutter&postId=444661" rel="nofollow noreferrer noopener" target="_blank">The Hole</a>
Приложение The Hole

Мы разрабатывали приложение The Hole и можем сказать, что для подобных проектов этот инструмент будет точно востребован.

Что это значит? Приложение будет работать быстро и без зависаний, даже если в нём используются сложные анимации, нужна высокая скорость и качество воспроизведения видео.

Появилась поддержка Material Design 3

Во Flutter 3.0 теперь доступна возможность подключить поддержку Material 3. Это фичи Material You, такие как:

  • динамический цвет;
  • обновлённая система цветов и типографики;
  • обновления множества компонентов и новые графические эффекты, появившиеся в Android 12.

Например, новый дизайн рипплов — эффект волнового распространения анимации при нажатии и эффект stretch overscroll — эффект растягивания границ прокрутки.

Что это значит? Material You — новая версия концепции Material Design, которая используется для создания дизайна мобильных приложений. Возможность поддержки самой актуальной версии означает, что приложение теперь будет выглядеть современно и вы сможете реализовать в нём самые передовые «фишки» дизайна.

Стало доступно декодирование изображений

Flutter стал автоматически обнаруживать и использовать ImageDecoder API в поддерживающих его браузерах. Этот инструмент предназначен для преобразования закодированных изображений (в форматах PNG, JPEG, WEBP, GIF или HEIF) в объекты Drawable или Bitmap — форматы хранения растровых изображений.

Новый API асинхронно декодирует изображения из главного потока с помощью встроенных в браузер кодеков изображений. Такое решение ускоряет декодирование изображений в два раза и не блокирует главный поток. Это очищает приложение от лагов, обычно возникающих при загрузке изображений. Теперь большинство браузеров на базе Chromium (Chrome, Edge, Opera, Samsung Browser) поддерживают эту возможность.

Что это значит? Изображения в приложении будут загружаться быстрее, а их качество будет лучше.

Упростился контроль жизненного цикла веб-приложений

Появилось новое API жизненного цикла для веб-приложений. Это помогает делать качественнее сам продукт, улучшает UX конечного пользователя.

Что это значит? Теперь мы можем визуализировать процесс загрузки веб-приложения до момента его запуска. Пользователь больше не будет смотреть на белый экран. Новая возможность даёт больше контроля над начальной загрузкой веб-приложения с HTML-страницы на стороне сервера. К тому же, она упрощает анализ производительности приложения в Lighthouse — инструменте для измерения качества веб-страниц.

Появилась поддержка складных устройств

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

Что это значит? Даже на самых новых моделях телефонов-раскладушек приложение будет работать и отображаться корректно.

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.samsung.com%2Fru%2Fsmartphones%2Fgalaxy-z-fold2%2Fbuy%2F&postId=444661" rel="nofollow noreferrer noopener" target="_blank">samsung.com</a>
Источник: samsung.com

Упростились релизы для iOS

Добавились новые возможности в команду flutter build ipa, чтобы было проще выпускать в релиз приложение под iOS.

Что это значит? Теперь можно собирать проект под iOS, и получать на выходе *.ipa, не открывая Xcode. Саму сборку можно доверить джуниор-разработчику, да и девопсы будут счастливы: настраивать CI/CD стало немного проще.

Pro Motion даёт возможность делать приложение ещё более плавным на самых современных iOS девайсах.

Как мы полностью изменили своё мнение о Flutter

Узнать больше о новых изменениях во Flutter можно в нашей статье на Хабре.

Flutter — для мобильного приложения, десктопа и веба

Недавно мы писали о прогрессивных веб-приложениях и о том, способны ли они стать полноценной заменой привычным мобильным. Напомним:

  • веб-приложение работает через браузер;
  • десктопное работает локально на устройстве.

Теперь с помощью Flutter 3.0 можно создавать все три версии своего цифрового продукта: мобильное, веб и десктопное приложение.

Раньше Flutter позволял сокращать сроки и стоимость разработки мобильного приложения, благодаря единой кодовой базе. Это подтверждают наши кейсы с СМП Банком и Мособлбанком, а также сетью аптек Ригла (когда мы создали сразу 6 приложений для 3 брендов сети).

Приложение для <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fsurf.ru%2Fcases%2Fbank_app_flutter%2F%3Futm_source%3Dvc%26amp%3Butm_medium%3Darticle%26amp%3Butm_campaign%3Dmy-polnostyu-izmenili-svoyo-mnenie-o-flutter&postId=444661" rel="nofollow noreferrer noopener" target="_blank">СМП Банка</a>
Приложение для СМП Банка

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

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

Евгений Сатуров, Head of Flutter в Surf

Признаться, стабильный релиз Flutter for Web мы восприняли с некоторым скепсисом. Этому способствовало специфическое позиционирование технологии и ряд сложнопреодолимых технических ограничений — например, серьёзные проблемы с SEO. Выбирая Flutter для проекта, нацеленного на веб, нужно понимать, что ваш продукт соответствует требованиям технологии.

В случае с десктопом нет жесткой привязки к технологии. Она не ограничивает, а наоборот даёт дополнительные возможности. Простота нативных интеграций, действительно впечатляющие библиотеки UI-компонентов (Windows, macOS), готовые решения для управления мультиоконностью (window_manager), утилиты для сборки десктопных артефактов (msix) — всё это говорит о том, что Flutter не просто запустит мобильное приложение на десктопе, как это уже умеют делать Windows 11 и macOS, он поможет создать настоящее десктопное приложение.

Flutter 3 в 1 — почему бизнес выиграет?

Потому что основная часть кодовой базы проекта будет унифицирована (80-95%, в зависимости от специфики проекта). Адаптации будут необходимы, как по платформенным фичам, так и по UX. Но это будут всё же именно адаптации, а не переписывание приложения с нуля.

  • Такой проект будет удобно поддерживать.
  • Не нужно будет собирать 3 разные команды под каждую платформу. Достаточно иметь в одной команде несколько разработчиков с компетенциями в этих платформах. Они будут помогать друг другу по платформенным задачам, а общий пул унифицированных задач делить поровну.
  • Код будет стабильным — он будет тестироваться один раз и под все платформы, все баги будут правиться одновременно на всех платформах.
  • Поддержка станет проще — все проблемы будут решаться раз и навсегда. Не нужно будет передавать информацию обо всех правках по всем платформам.
  • Проект выйдет на рынок на 30-40% быстрее и обойдётся на столько же дешевле.

У нас есть внутренний проект, на котором мы пробуем всё то, к чему наши клиенты будут готовы лишь «завтра». Да, это проект на Flutter Web.

Евгений Сатуров, Head of Flutter в Surf

Мы создаём мобильные приложения более 12 лет, а на Flutter — уже больше 4 лет. Постоянно следим за развитием кроссплатформы и сами активно участвуем в её развитии. И, чем больше развивается технология, тем лучше становится конечный продукт — приложение для банка, ритейла или для управления корпорацией. В основе философии Flutter всегда лежала идея универсальности. А теперь, с появлением возможности создавать на этом фреймворке мобильное приложение, десктоп и веб и вовсе открывает новые горизонты планирования для любого проекта.

88
11
5 комментариев

Приветствую. Интересно как ведет себя средне статистическое приложение на Flutter на достаточно распространенных устройствах таких как iPhone 5s и iPhone 6, а так же на экранах с ProMotin? Например даже при нативном исполнении приходится достаточно серьезно смотреть на UI perfomance, так как оно серьезно влияет на уровень конверсии, а на указанных выше устройствах имеются проблемы.
Данный вопрос задается не просто так, а исходя из опыта в нативной разработке, понимания принципов работы фруктовой платформы в целом и базовых понятиях архитектуры Flutter. Тот же Dart — однопоточный и возникают вопросы к приоритетами рендера UI. Например существует ли такой же принцип как и в нативных iOS приложениях когда отзывчивость интерфейса идет в приоритете на системном уровне?

1
Автор

Здравствуйте! Спасибо за интересный вопрос, уточняем у технических специалистов, скоро вернемся с ответом :)

Интересно почему Wrike (ru-евангелисты Dart) отказались в итоге от него в прошлом году.

Автор

Todd, как правило, выбор той или иной технологии обычно упирается в цели и задачи бизнеса. А ребята из Wrike выпускали статьи на эту тему, в которых максимально подробно раскрыли причины своего решения и следствия
https://habr.com/ru/company/wrike/blog/551962/
https://habr.com/ru/company/wrike/blog/551964/

1