Как реализовать кроссплатформенное мобильное приложение и сэкономить бюджет: новые возможности 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.
Веселый водовоз
Веселый водовоз – компания, которая занимается производством и доставкой артезианской воды по Санкт-Петербургу и Ленинградской области с 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", присоединяйтесь.
Спасибо, интересно!
Мы рады, спасибо за отзыв!
Ну и добавим, наверное, сюда конструктор FlutterFlow, на котором можно собирать крутые вещи с довольно базовыми и даже совсем небольшими знаниями кода)
Стараемся быть полезными 🙌