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

FLUTTER

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

Теперь можно создавать проекты с функциями календаря и текстовых документов, стриминговые платформы и приложения со сложными функциями (редактор музыки).

Как работает:

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

  • в веб-версии нужно скачать движок рендеринга, который запускается через WASM. Он позволяет избежать сложностей при работе с HTML, CSS, несовместимостью браузеров и ОС. Для компиляции веб-приложения используется dart2js, который переводит программу, написанную на языке Dart в JavaScript.
Приложение, созданное с помощью Flutter, подстраивается и работает на разных операционных системах и браузерах благодаря реализации набора компиляторов. При компиляции веб-приложение будет на 100% идентично операционным системам Android и iOS.

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

Flutter позволяет:
  1. быстро создать PWA;
  2. создать приложение, которое идентично ведёт себя на всех платформах (iOS, Android, web, Windows, MacOS);
  3. реализовать дизайн, который будет адаптироваться к разным платформам, и нужную функциональность;
  4. ускорить время разработки и снизить стоимость поддержки приложений в 3 раза.
НОВЫЕ ВОЗМОЖНОСТИ FLUTTER 3.0

Flutter для Linux и macOS

  • Каскадные меню и поддержка панели системного меню в macOS.

  • Десктопные платформы поддерживают ввод текста на иностранных языках: полностью поддерживаются китайский, японский и корейский языки, которые используют IME.

  • Поддержка озвучивания текста на экране, упрощенная навигация и инверсия цвета на Windows, macOS и Linux.

  • Формат universal binary позволяет запускать приложения как на старых, так и на новых девайсах на macOS.

  • В новом релизе не заблокирована возможность разработки на более старых версиях Windows (7/8/8.1), но возможности тестирования ограничены по сравнению с Windows 10.

Мобильная версия Flutter:

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

  • Поддержка переменной частоты обновления на устройствах iOS с дисплеями ProMotion. На данных девайсах Flutter-приложения способны отрисовать экран с частотой обновления до 120 Гц. Теперь приложения работают плавно даже при скроллинге.

  • Упрощение релизов для iOS: новые возможности для загрузки приложений в App Store.

  • Свежие версии плагинов Gradle и Android Gradle при создании новых проектов с инструментами Flutter 3.

  • Flutter 3.0 – последний стабильный релиз, который поддерживает 32-битные девайсы iOS.

Поддержка веба

Flutter автоматически обнаруживает и использует Image Decoder API в браузерах. Это ускоряет декодирование изображений и избавляет от лагов при загрузке.

С новым API позволяет контролировать процесс первоначальной загрузки приложения и упростить анализ производительности в Lighthouse. Это применимо и к таким запросам, как индикатор загрузки, заставка splash screen, отображение простого интерактивного HTML лендинга перед запуском Flutter-приложения.

IONIC

Ionic имеет открытый исходный код и используется для разработки веб и мобильных приложений на языках JavaScript, CSS и HTML. Ionic позволяет создать привлекательное приложение с функциональным пользовательским интерфейсом (темные и светлые темы в мобильных приложениях).

Преимущества Ionic

  • Кроссплатформенность: поддерживает iOS, Android, Windows, что позволяет разработчикам сэкономить время на создании приложений.

  • Сотрудничество с Cordova (CSS) повышает производительность.

  • Адаптируемость: так как это среда разработки с открытым исходным кодом, в Ionic без труда разберутся те, кто уже освоил HTML, JavaScript и CSS.

  • Удобство пользовательского интерфейса Ionic: каждый компонент и темы легко настраиваются и адаптируются к разным платформам.

Недостатки Ionic

  • Производительность: иногда происходит сбой в производительности.

  • Безопасность: не рекомендуется использовать Ionic Framework для разработки сложных приложений (банки, государственные сайты, финансовые организации и т.п.).

  • Встроенная функциональность ограничена: для выполнения некоторых функций необходимо искать дополнительные плагины.

REACT NATIVE

React Native также имеет открытый исходный код. С помощью React Native разрабатываются приложения для разных платформ: Android и iOS.

Преимущества React Native

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

  • Стабильность и удобство пользовательского интерфейса: плавная навигация и высокая скорость загрузки позволяет разработчикам выбирать React Native для создания приложений для бизнеса.

  • Возможность Live Update: React Native работает на JavaScript, поэтому функция Live Update легко интегрируется в приложение для телефона.

  • Один код для разных платформ: написав код для Android, вы можете использовать его и для iOS, добавив некоторые изменения. Данная функция значительно экономит время при разработке.

Недостатки React Native

  • Безопасность: не рекомендуется использовать React Native для создания финансовых и банковских приложений, так как JavaScript не может обеспечить полную безопасность для сложных приложений.

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

  • Продолжительность инициализации: приложениям требуется много времени для запуска.

Наши кейсы на FLUTTER

Далее мы расскажем о реализованных кроссплатформенных мобильных решениях для наших клиентов с помощью платформы Flutter 3.0.

Веселый водовоз


Веселый водовоз – компания, которая занимается производством и доставкой артезианской воды по Санкт-Петербургу и Ленинградской области с 2008 года.

Мы реализовали 2 кроссплаиформенных мобильных приложения:
  • для водителей с важной бизнес-задачей доставки за час;
  • для клиентов с реферальной программой.

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

Клиентское приложение обеспечивает накопление бонусов для получения скидок и удобного совершения заказов.

В результате в клиентском приложении менеджер может управлять каталогом товаров и устанавливать повышенные бонусы на определенные товары.

В водительском приложении для определения актуального местоположения обеспечивается работа в background-режиме для платформы Android, а для платформы iOS была реализована отправка push-уведомлений по таймеру. Координаты водителей с момента запуска поступают на сервер стабильно.

Подробнее об этом проекте можно почитать в статье “Как мы вывезли Весёлого Водовоза в доставку за час”
Fleet-Cards – приложение для получения доступа к управлению и просмотру информации о состоянии топливных карт.

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

Приложение предоставляет доступ к общей информации (договору, балансу, видам топливных карт и т.д.), позволяет совершать различные операции (списания, пополнения, выгрузка отчётов и т.д.), и открывает актуальные данные по расположению и ценам на АЗС.

Подробнее о проекте →

Gectaro.Прораб
Gectaro – это онлайн-сервис для управления стройкой и ремонтом, помогающий строительным и ремонтным компаниям вести проекты в едином сервисе.

Разработали кроссплатформенное мобильное приложение,, чтобы упростить работу прорабов на стройке. У клиента уже был разработан дизайн и API для веб-сайта.

В результате получилось приложение с интерфейсом на русском языке, которое поддерживает отправку push-уведомлений, функцию загрузки фотографий, возможность делать фото из приложения, работу в оффлайн режиме. Также в приложение было интегрировано AppMetrica.

Подробнее о проекте →

Выводы:

  • Flutter 3.0, на данный момент, закрывает почти все потребности по разработке кроссплатформенных мобильных продуктов, в том числе в части прогрессивных мобильных приложений;
  • Можно собирать приложения для iOS, Android и браузер с одной и той же кодовой базой;
  • Flutter 3.0 поддерживает два режима рендеринга: CanvasKit и HTML. Они выбираются автоматически для оптимизации характеристик приложения;
  • Возможность поддерживать веб для уже существующих приложений на Flutter;
  • Flutter 3.0 стабильно работает на macOS и Linux;
  • Решена проблема с лагами на платформах (Impeller).
Оцени эту статью!
Поделиться

Если у вас возникли вопросы или хотите обсудить разработку мобильного приложения

Просто напишите нам или позвоните +7 495 128 0804