Flutter – единственная правильная технология для кроссплатформенных приложений: Флаттер и его язык Dart

Flutter — это фреймворк от Google для кроссплатформенной мобильной разработки на языке Dart. Мы как пионеры создания Flutter-приложений в России активно участвуем в развитии сообщества: основали первый русскоязычный подкаст о технологии, регулярно выпускаем статьи, выступаем на конференциях и делимся своими библиотеками на GitHub с разработчиками по всему миру. В этой статье расскажем, что такое флаттер, как он работает и почему стал популярным выбором для бизнеса.

Используя этот фреймворк, мы успешно запустили внутрикорпоративное мобильное решение для сотрудников KFC, мобильный банк Росбанк и приложение для крупнейшей сети аптек Ригла.

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

Flutter: что это и как он работает

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

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

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

Язык программирования Dart подходит для JIT (Just-In-Time) и AOT (Ahead-Of-Time) компиляции. Во время разработки специалисты используют JIT-компиляцию, а, когда продукт готов к выпуску — AOT-компиляцию. Благодаря ей, в релизе программа получает высокую производительность.

С Dart процессы выполнения и запуска значительно ускоряются и это далеко не все преимущества данного языка программирования:

девелоперы переиспользуют до 70% кода для мобильного приложения в web и наоборот,

для него есть виртуальная машина Dart VM, использующая язык программирования Dart как промежуточный и выступающая в роли интерпретатора,

Dart можно компилировать и интерпретировать в другие языки программирования. Пример такой компиляции — преобразование кода в JavaScript для использования с Node.js

есть Hot Reload — фича, с которой можно подгрузить код в приложение в режиме отладки максимально быстро,

просматривая каждое изменение без необходимости пересборки продукта.

Dart несложен в освоении. Опытные разработчики пишут на нём через пару недель обучения, а новички — через 3-4 недели.

Нативный UI

При работе нативных мобильных приложений на Android для отрисовки визуальных элементов используется код Java. Системные библиотеки платформы передают объекту Canvas компоненты, отвечающие за отрисовку, и платформа рендерит Canvas с помощью «холста» Skia. Для продуктов на iOS используются другие системные библиотеки и алгоритм отрисовки — это усложняет и замедляет процесс реализации визуальных компонентов.

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

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

Почему мы выбираем Flutter и Dart

Комбинация Dart + Flutter обеспечивает высокую скорость создания и лёгкость в поддержке кода. На Dart & Flutter можно быстро создавать нативно выглядящие интерфейсы и экономить время и деньги.

6 основных платформ на одной кодовой базе

Одно из главных преимуществ Flutter и Dart — возможность создавать продукты для шести популярных платформ, используя единую кодовую базу. В зависимости от специфики проекта, от 80 до 95% кодовой базы можно переиспользовать. Адаптации нужны, однако сделать их намного проще, чем писать с нуля отдельное решение для каждой платформы.

Ускоренный time to market

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

• до 45,6% времени и стоимости разработки,
• 70,5% на тестировании — в том числе на автотестах,
• 33,3% на дизайне,
• 70% на стоимости поддержки,
• 20% времени, затрачиваемого на добавление функций после запуска MVP.

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

Как пример, вот так выглядит типичная Flutter-команда и команда нативной разработки:

Флаттер экономит ресурсы без потери качества

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

Flutter позволяет:

одновременно запустить три канала продаж — мобильную, десктоп и веб-версию продукта — на единой кодовой базе,

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

добиться плавной анимации, переходов между экранами — с этим фреймворком доступна производительность от 60 до 120 кадров в секунду в зависимости от дисплея.

Примеры успешных приложений написанных на Dart и Flutter

BMW

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

Alibaba

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

Росбанк

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

KFC

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

Преимущества языка программирования Dart

Dart в связке с Flutter отлично подходит для современных мобильных решений и ускоряет запуск продуктов. Что делает Dart отличной технологией для разработки:

• Высокая производительность. Технические особенности Dart ускоряют процесс разработки и обеспечивают быструю работу приложений.
• Простота изучения. Разработчики Java, Kotlin, JavaScript или C# быстро смогут перейти на Dart, потому что у этих языков похожий синтаксис.
• Гибкость. Dart позволяет использовать единую кодовую базу для разработки мобильных, веб- и десктоп-продуктов.
• Инструменты для разработчиков. Hot Reload и удобный менеджер пакетов упрощают тестирование и поддержку кода.
• Поддержка Google. Регулярные обновления и стабильное развитие языка делают его надёжным выбором для бизнеса.

Благодаря этим особенностям Dart и Flutter позволяют компаниям одновременно создавать качественные продукты и экономить ресурсы.

Кому подойдет флаттер-программирование

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

• Запуска стартапов и MVP. Можно выпустить приложение сразу для iOS и Android и засчёт этого минимизировать затраты и Time to market.
• Создания корпоративных решений. Единая кодовая база позволяет снизить стоимость поддержки внутренних приложений и добавлять новые функции быстрее.
• Финтех- и e-commerce-разработки. Flutter обеспечивает стабильность, безопасность и возможность оперативно обновлять фичи под требования рынка.
• Ускорения роста компании. Flutter позволяет быстро масштабировать продукт на новые платформы: веб, десктоп или носимые устройства.

Flutter одинаково полезен тестирования идей в небольшой команде и для развития цифровой экосистемы в огромной корпорации.

Какие вопросы нам часто задают о Flutter

За счет чего флаттер разработка быстрее нативной?

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

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

Говорят, что продукты на Флаттер много весят. Какой размер у мобильных продуктов под разные платформы?

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

Для наглядности, один из наших небольших проектов под Android весит 8,5 Мб, а проект со сложной графикой и Swift-кодом под iOS — около 30 Мб.

Может ли Флаттер работать с [название библиотеки под популярную мобильную платформу]?

Да, но эти библиотеки будут доступны только под ту платформу, под которую были написаны изначально.

Как происходит шифрование?

Для шифрования/дешифрования на флаттер есть вменяемый порт Bouncy Castle. Он написан на языке программирования Dart.

Как Флаттер справляется со сложными анимациями?

Для реализации сложных графических эффектов разработчики используют модуль отрисовки CanvasKit. Так, мы получаем высокое качество отображения визуальных компонентов, плавность анимации, переходов. А еще разработчики флаттер недавно добавили новый графический движок Impeller. Благодаря ему стала возможной разработка интерфейса ProMotion дисплеев с частотой обновления 120 Гц.

Можно ли на Флаттере писать продукты, которые работают офлайн?

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

Перспективы развития фреймворка

Команда Google, создавшая Flutter, активно использует его и язык программирования Dart в собственных проектах — и это долгосрочная гарантия для компаний, выбравших этот фреймворк. Поскольку он получил широкое распространение среди разработчиков и предпринимателей по всему миру, у Google есть веские основания регулярно обновлять SDK, а вам не придется менять Flutter на другой фреймворк из-за отсутствия поддержки и обновлений.

По данным Statista, Flutter — самая популярная кроссплатформенная технология. Флаттеристы всего мира совместно развивают фреймворк, и мы не исключение: эксперты Surf создали собственные инструменты и библиотеки для оптимизации процесса разработки, используют их в проектах и делятся с другими Flutter-командами.