Оглавление

    Flutter – единственная правильная кроссплатформа для приложений

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

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

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

    Почему стоит разработать приложение на Dart и Flutter

    Язык программирования 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-приложения, разработанные командой Surf

    Нативные приложения, разработанные командой Surf

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

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

    Быстрая разработка и time to market

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

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

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

    Состав Flutter-команды и команды для разработки нативного мобильного продукта

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

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

    Flutter позволяет: 

    • одновременно запустить три канала продаж — мобильную, десктоп и веб-версию продукта — на единой кодовой базе,
    • реализовать любой дизайн интерфейса в сжатые сроки, используя мощный графический движок и набор кастомизируемых виджетов,
    • добиться плавной анимации, переходов между экранами — с этим фреймворком доступна производительность от 60 до 120 кадров в секунду в зависимости от дисплея.
    Узнайте всё о преимуществах Flutter и оцените наши кейсы
    Читать о Flutter-разработке в Surf

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

    BMW

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

    Alibaba

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

    Росбанк

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

    KFC

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

    Ещё больше примеров проектов на Flutter — в портфолио Surf
    Смотреть

    Какие вопросы нам часто задают о 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-командами.

    Выбираете тех стек для приложения?
    Surf поможет. Расскажите о своем проекте, и мы свяжемся с вами в течение рабочего дня.
    Обсудить проект