Как реализовать кроссплатформенное мобильное приложение и сэкономить: новые возможности Flutter

Привет! На связи InstaDev. Делаем мобильные приложения, которые помогают бизнесу расти.

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

Flutter

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

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

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

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

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

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

Приложение, созданное с помощью Flutter, подстраивается и работает на разных операционных системах и браузерах благодаря реализации набора компиляторов. При компиляции веб-приложение будет на 100% идентично операционным системам Android и iOS.

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

Flutter позволяет:

• быстро создать PWA;
• создать приложение, которое идентично ведёт себя на всех платформах (iOS, Android, web, Windows, MacOS);
• реализовать дизайн, который будет адаптироваться к разным платформам, и нужную функциональность;
• ускорить время разработки и снизить стоимость поддержки приложений в 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.

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

Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

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

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

Мы реализовали 2 кроссплаnформенных мобильных приложения:

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

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

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

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

В водительском приложении для определения актуального местоположения обеспечивается работа в 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).

Еще больше о мобильной разработке в нашем ТГ-канале "InstaDev mobile", присоединяйтесь.