Лучшие фреймворки для разработки кроссплатформенных мобильных приложений
Ну кто устоит перед возможностью потратить меньше, а получить больше? А вот и никто. Так и родилась идея разработки кроссплатформенных мобильных приложений, когда пишешь один код приложения, а он будет работать на разных операционных системах. Классика же — это нативная разработка, где под каждую ОС разрабатывается отдельное приложение (представляете, сколько сил, денег и нервов туда предстоит вложить?).
Сегодня мы рассмотрим пять кроссплатформенных фреймворков: React Native, Flutter, Ionic, Xamarin и NativeScript. Они сильно разные и не во всех ситуациях и не при любом вашем контексте будут одинаковы полезны (или даже нужны в принципе).
Будем честны: выбрать фреймворк для разработки кроссплатформенного приложения, да и вообще променять нативную разработку на кроссплатформенную — непросто. И вот почему.
Как вы уже поняли, основная цель кроссплатформенной технологии — предоставить разработчикам инструмент для параллельного создания приложений для нескольких операционных систем одновременно. Рынок сложился так, что эффективность и качество продукта должны сочетаться с привлекательной ценой его разработки, а сам продукт должен решать проблемы пользователя. Исходя из специфики разработки нативных и кроссплатформенных приложений, очевидно, что второе дешевле, а результат на выходе не менее качественный, чем при нативной разработке. Еще один приятный и важный бонус кроссплатформенной разработки приложений — ее скорость.
Красота же, товарищи, ну! В кроссплатформенной разработке есть все, что нужно современному динамичному миру.
Подходы к кроссплатформенности
Кроссплатформенность в проекте нужна не ради пользовательского удобства, а для оптимизации стоимости разработки и поддержки приложения. Это решение позволяет написать исходный код для нескольких мобильных платформ, но результатом каждой отдельной сборки станут отдельные исполняемые файлы.
Кроссплатформенные фреймворки можно разделить на две группы: Hybrid-Native (первый подход, гибридно-нативная разработка) и Hybrid-Web (второй подход, гибридная веб-разработка).
Гибридно-нативный подход объединяет фреймворки с нативным пользовательским интерфейсом и общим кодом; и фреймворки с общей кодовой базой и нативным кодом. Среди них: кроссплатформенные платформы разработки приложений React Native, Xamarin, NativeScript и Flutter. О каждом из этих фреймворков мы поговорим позже.
Гибридная веб-разработка кроссплатформенных приложений осуществляется на базе фреймворков с веб-интерфейсом и общими компонентами и с единой кодовой базой, работающей, где угодно. Примером такого кроссплатформенного фреймворка является Ionic (и о нем мы поговорим немного позже).
Плюсы и минусы гибридов
Глянем, что там у гибридов есть и нет перед нативными приложениями.
5 основных преимуществ гибридного подхода:
- Кроссплатформенность. Создав одно приложение, вы можете экспортировать его для любой ОС.
- Исходя из первого пункта — скорость разработки и масштабирования.
- Низкая цена. В несколько раз меньше, чем при нативном подходе, особенно с учетом дальнейшей поддержки.
- Использование одного языка — JavaScript (хотя вот Dart (язык для Flutter) позиционируется в качестве его альтернативы).
- Одинаковый интерфейс и UX. Одна команда разработчиков и один код максимально приблизят приложение к единому формату UI и UX на всех платформах (Но будут ли они соответствовать гайдам OS — другой вопрос).
Теперь о недостатках. Куда же без них 🙂
5 основных недостатков гибридного подхода:
- Зачастую более низкая производительность.
- Меньше возможностей интеграции с «начинкой» устройства.
- Работа с унифицированным стеком технологий не даст той гибкости настройки и оптимизации, какая есть у каждой ОС со своим собственным стеком технологий.
- Публикация в сторы может быть еще тем челенджем. Прохождение проверки приложения на соответствие правилам в Apple App Store и в Google Play Store будет отличаться, т.к. требования к приложениям у них отличаются.
- Ограниченная реализация визуальных и графических элементов в приложениях, особенно анимации.
Нативное будущее кроссплатформенной разработки приложений
Итак, гибридные кроссплатформенные платформы приложений можно использовать, когда:
- стоит задача быстро разработать приложение более чем для 2-х мобильных платформ;
- нужно сэкономить на бюджете;
- требуется относительно простое приложение без сложной анимации;
- допускается исключение из разработки многих параметров нативного функционала.
Отдавая предпочтение гибридной или нативной разработке приложения, важно следить за состоянием рынка и правильно расставлять приоритеты в отношении скорости запуска, стоимости и производительности.
React Native
Применяется для перевода кода приложения в машинный язык и обеспечивает нативный внешний вид мобильных приложений.
При работе с React Native вам необходимо сделать сборку своих собственных элементов управления, построить иерархию с учетом интеграции и разработать пользовательский интерфейс на языке React Native.
Вот основные причины для выбора этой платформы при разработке мобильного приложения.
- Кросс-платформенность. Приложение будет работать на всех платформах: почти весь код написан на JavaScript, общем языке для всех платформ, и этот код взаимодействует с нативными компонентами ОС. Но учтите, что, например, приведение приложения в соответствие с формальными требованиями разных ОС надо будет делать отдельно.
- это молодой фреймворк и некоторые компоненты отсутствуют, да и обновлений слишком много, а это грозит тем, что вам постоянно придется следить за последними версиями фреймворка и его библиотек,
Flutter
Позволяет создавать приложения на языке Dart. Flutter предлагает множество элементов интерфейса, которые выглядят нативными для ОС, но не являются таковыми. Этот фреймворк может подойти для создания унифицированного UX, и он придерживается иного подхода, чем React Native.
Flutter не превращает исходный код в нативный, который выполняется платформой. Фактически он рисует окно на экране телефона и выводит все элементы сам.
А теперь подробнее о плюсах:
1. Язык Dart
Изначально он задумывался как инструмент для разработки клиентских приложений, был оптимизирован и создан для разработки пользовательского интерфейса. Этот язык предоставляет отличные возможности для разработки кроссплатформенных мобильных приложений. Кроме того, Dart был создан Google как расширенная версия JavaScript.
2. Массовый переход на Flutter
Flutter потребовался всего год, чтобы превзойти React Native по популярности (хотя React Native была самой востребованной платформой в свое время). Сегодня с Flutter вы получаете мощный источник ресурсов для обучения и более квалифицированных разработчиков для создания приложения.
3. Легкость обучения
Кажется, что не существует такого языка или набора инструментов разработки, которые просты в освоении. Однако есть большая разница между тем, когда есть четкая документация и стандартные шаблоны проектирования, и когда можно найти только разнородную документацию и противоречивые способы решения, казалось бы, простых проблем. Flutter — это первый случай!
4. Высокая скорость
Приложения Flutter компилируются в машинный код с использованием графики и движков рендеринга, встроенных в C/C++. Вот почему такие приложения быстрые и надежные. В сфере кроссплатформенных технологий это дает очевидное преимущество Flutter перед конкурентами.
5. Крутая разработка
Flutter создан с отличным языком и быстрым движком рендеринга (Skia).
Платформа стремительно развивается, и Google вкладывает в нее много сил и денег. Также приложение нашего хаос-менеджмент планировщика Singularity App написано на Flutter.
В целом — довольны, получилось очень неплохо. Но есть минусы:
1. Сырой API. Могут поменять спецификацию «на лету».
2. Не работают некоторые нативные вещи, которые должны работать из коробки. Например, до сих пор есть глюки в текстовых полях на некоторых моделях телефонов (задваивается текст). Решается костылями. А очень неприятно решать костылями то, что ожидаемо должно правильно работать из коробки.
3. Нет НОРМАЛЬНОГО WYSIWYG-редактора (проект зефир скорее мертв, чем жив).
4. Виджеты. Пришлось писать на нативе. В итоге довольно сложная архитектура, т.к. виджет должен работать в паре с основным приложением, а поднимать дартовское приложение в фоне для виджета — это сразу большой расход памяти (напомню, у виджетов например на айфонах есть ограничение в 24 мегабайта). Выкрутиться можно, но архитектура получается довольно дремучая.
Ionic
Это фреймворк типа Hybrid-Web, где приложение на телефоне выполняются в специальной оболочке (UIWebView для iOS и WebView для Android), а она уже позволяет показывать HTML и выполнять JavaScript. Получается, приложение работает как бы в веб-браузере 🙂
Нет необходимости в глубоких познаниях в каком-либо из фреймворков. У Ionic огромная встроенная библиотека общих инструментов и большое количество плагинов и модулей, которые обеспечивают доступ к нативным функциям.
И еще немного о преимуществах этого фреймворка:
- Используется инструментарий, хорошо известный всем разработчикам.
- Разработка на фреймворке Ionic происходит намного быстрее, чем на остальных. Он основан на Angular, а это значит, что во время разработки приложение можно запускать в браузере и смотреть, как оно выглядит.
- Есть готовые шаблоны приложений и встроенные пресеты, так что начать разработку — проще простого.
- Концепция: «Создай один раз, используй всегда и везде».
- Доступны несколько компонентов пользовательского интерфейса.
- по отзывам разработчиков тестирование приложения может быть довольно сложным. Протестировать встроенные функции устройства (например, камера, вибрация, мигание), которые есть в документации Ionic, нельзя, ведь эти функции просто не могут быть выполнены в браузере;
- различные нативные «фишки» сложно совместить друг с другом;
- работать приложения на Ionic будут работать плохо на старых устройствах Android: чтобы запуститься приложение на Ionic будет использовать браузер, установленный по умолчанию на устройстве. Устройства со старыми версиями Android (4.0−4.3) по дефолту используют браузер Android, а не Chrome;
- если на проекте сложная графика, то Ionic не подойдет.
Xamarin
Сравнительно новый кроссплатформенный фреймворк Hybrid-Native, основанный на принципах основ Microsoft. Совместим абсолютно с любой ОС. Xamarin дает возможность создавать приложения, которые почти невозможно отличить от их нативных аналогов.
Фреймворк состоит из нескольких основных частей:
- Xamarin. IOS — библиотека классов для C# с доступом к iOS SDK);
- Xamarin. Android — библиотека классов для C# с доступом к Android SDK;
- компиляторы для iOS и Android;
- среды разработки: IDE Xamarin Studio (родная) или Visual Studio.
- Универсальный набор технологий для разработки на всех платформах.
- Производительность максимально близка к той, что у нативных приложений.
- Хорошая совместимость с устройствами и оптимальные условия тестирования (как минимум для теста можно использовать Xamarin UI Tests — при помощи этого фреймворка можно написать свои автотесты на C# и запустить их как локально, так в App Center Test Cloud).
- Прекрасная совместимость с устройствами IoT (концепция «интернета вещей») и безупречная интеграция с Microsoft Windows.
- Технологии с открытым исходным кодом и полный инструментарий.
- задержки с обновлениями платформ;
- ограниченная экосистема;
- ограниченный доступ к open-source библиотекам: все, что остается — это пользоваться компонентами, которые предоставляет платформа, и некоторыми .NET ресурсами;
- не подходит для приложений с высокопроизводительной графикой;
- обычно приложения на Xamarin весят в 2 раза больше, чем нативные;
- может случиться так, что вам понадобится какая-то функция или интеграция в приложении, а она платформой не предоставляется.
Если вам интересно, подходит ли вам Xamarin, просто ответьте на эти три вопроса, и все станет ясно:
- Вам нужен интерфейс приложения без сложной логики взаимодействия и нестандартных элементов управления?
- Есть ли в вашей команде мобильные разработчики?
- Планируете ли вы в ближайшее время другие кроссплатформенные разработки?