Ionic — это технология, позволяющая разрабатывать полноценные приложения для iOS и Android. Для этого не нужно иметь глубокие знания в каждой из платформ. Конечно же, есть некоторые ограничения, но в целом необходимо быть знакомым с Angular (популярный веб-фреймворк), чтобы начать разработку приложения. Для применения стилей можно использовать SCSS — это придаст приложению нужный вид. В этой статье рассмотрим главные преимущества и недостатки Ionic.

В Ionic есть встроенная библиотека стандартных элементов, которые можно использовать аналогично элементам Bootstrap: карточки, кнопки, переключатели, сегменты, попапы, поля ввода, списки, сетка из строк и колонок и т. д. По умолчанию эти элементы меняются так, чтобы выглядеть как нативные на iOS и Android, но их вид можно изменить и при необходимости.

Также с Ionic вам доступно множество плагинов, которые позволяют использовать железо смартфона (Ionic Native/Cordova). Но не забудьте проследить, чтобы ваши платформы активно поддерживали выбранные плагины. В большинстве случаев такие плагины работают хорошо, но иногда может возникнуть ошибка билда или конфликт даже с широко используемыми плагинами вроде входа через Facebook или Firebase Analytics. Такие проблемы обычно решаются либо чисткой и ребилдом проекта, либо обновлением плагина (при условии, что уже есть его новая версия, которая решает проблему). Также можно заменить плагин на альтернативный или в некоторых случаях — добавить параметры, разрешающие перезапись в config/xml/.

Несколько заметок о нашем опыте с определёнными Ionic Native/Cordova модулями:

  • Для правильной работы некоторых плагинов потребуется тонкая настройка, например глубинных ссылок — модуль легко подключить, но сложно заставить работать как следует.
  • Для работы входа через Facebook в консоли Facebook для разработчиков понадобится добавить base64, использованный для подписи вашего приложения.
  • «Поделиться на Facebook» открывает сообщение, но его нельзя заранее заполнить нужным текстом. Однако можно показать пользователю подсказку о том, что текст или ссылку можно вставить. При этом важно использовать только валидные HTML-ссылки.
  • Также мы использовали следующие плагины без больших сложностей: Поделиться на Twitter, Копировать в буфер обмена, Выбрать изображение из галереи/использовать камеру, Обрезать изображение, Блокировка поворота экрана, Браузер в приложении, вызов редактора email, а также Локализацию/Глобализацию.

У Ionic есть ещё один большой плюс — скорость разработки. Поскольку он основан на Angular, проект на Ionic можно запускать в браузере и видеть, как будет выглядеть приложение во время разработки. Для того чтобы увидеть такое превью, не обязательно устанавливать приложение на смартфон или эмулятор. Это существенно помогает экономить время при изменении UI. А когда вы работаете над функциями, требующими проверки на смартфоне (например, сделать фото), сборка билда и установка его на смартфон займет всего несколько минут. На Android устанавливать приложения можно прямо из командной строки, а на iOS билд нужно открыть в Xcode.

Гибридные vs нативные приложения

Недавно появилось несколько фреймворков, позволяющих разрабатывать настоящие нативные приложения с использованием Angular (NativeScript) или React (React Native). Они имеют важное преимущество перед гибридным подходом Ionic — ничто не может сравниться с производительностью нативных приложений. Однако нативные приложения имеют не менее важный минус. Используя Ionic, вы работаете с HTML- и SCSS-файлами, а для нативной разработки вам понадобятся другие навыки для работы с разметкой и стилями. Этих навыков нет у большинства веб-разработчиков.

Деплой в Google Play Store

Чтобы выпустить завершенное приложение, вам понадобится его сначала собрать:
ionic cordova build android –prod –release. Затем его нужно подписать с помощью jarsigner (инструмент для подписи APK), используя свой JKS-ключ и zipalign (инструмент для превращения подписанного приложения в APK в готовое для загрузки на Google Play Store). При этом важно использовать тот же JKS-ключ, который загружен в вашу консоль разработчика Play Store.

iOS

Исходя из нашего опыта, Ionic для iOS не настолько отлажен, как для Android. Мы сталкивались со странным поведением такого элемента разметки, как сегмент — иногда он может конфликтовать со скроллингом. Также многие элементы требуют отдельных SCSS- стилей для того, чтобы они выглядели как вам нужно на обеих платформах. То же относится к плагину Flurry Analytics. Его легко установить и использовать в Android, а на iOS этот плагин не устанавливался простыми способами и потребовал использовать CocoaPods — пакетный менеджер для установки плагинов на iOS. И даже после правильной установки этот плагин не инициализируется так же, как на Android.

Другой плагин, превращающий изображения в base64, выдаёт слегка отличающийся формат base64 на Android и iOS. Но в целом большинство плагинов должны работать, хотя некоторые требуют тонкой настройки.

 

Плюсы
  • Быстрая разработка и минимальное время выхода на рынок.
  • Можно вести основную часть разработки в браузере (кроме нативной функциональности смартфона — тут понадобится использовать смартфон для дебага).
  • Можно разрабатывать приложение для iOS и Android одновременно (с некоторыми ограничениями — такими как особенности платформ, касающиеся стилей и плагинов).
  • Навыки в Angular, HTML, CSS и JavaScript — это практически всё, что понадобится для начала разработки. Нет необходимости знать Java и Swift или Objective-C.
  • Множество UI-компонентов доступны и просты в использовании — карточки, кнопки, переключатели, сегменты, попапы, поля ввода, списки, сетка из строк и колонок и т. д.
  • Множество плагинов, позволяющих использовать функции смартфонов, такие как: камера, сканер отпечатков пальцев, NFC, геолокация, отправка аналитики на Firebase, оповещения и глубинные ссылки.
Минусы

Нативные плагины могут стать проблемой, если какие-то из используемых плагинов конфликтуют или если в одном из них баг. Например, недавно в плагине для логина с помощью Facebook был баг: если юзер хоть раз сделал log out, то больше логин уже не работал. А плагин FCM (Firebase Cloud Messaging) не работает с firebase-analytics. Но есть плагин под названием Firebase, которым можно заменить их оба. Дебаг может быть довольно сложным: иногда трудно понять, откуда приходит ошибка, поскольку сообщения об ошибках могут быть неинформативными.

Билд может ломаться без причин, что-то оказывается поврежденным в оригинальной папке. Так что делайте коммиты часто и используйте ветки для каждой новой функции или страницы. Если что-то сломается, просто сделайте клон репозитория в новой папке, запустите npm install и попробуйте собрать проект заново.