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 и попробуйте собрать проект заново.
Вывод
Ionic — отличная технология, позволяющая сделать готовое для выпуска приложение гораздо быстрее, чем при традиционной разработке. Большой плюс этого подхода — то, что вместо Java/Swift/Objective-C можно использовать стандартные технологии веб-разработки, такие как HTML, CSS, JavaScript/TypeScript и Angular. Есть небольшой минус в производительности — нативное приложение может быть более отзывчивым на старых устройствах, но на любом современном смартфоне разница будет незначительной.