Делюсь своим опытом создания приложения Ionic React
Краткий урок истории
Ionic - это платформа для создания гибридных мобильных приложений. Мобильное приложение является гибридным, если оно построено на сочетании веб-технологий (например, HTML, CSS, JavaScript) и библиотек для доступа к встроенным мобильным функциям (например, подключаемым модулям Cordova).
Фреймворки гибридных мобильных приложений имеют долгую историю. Первым в своем роде был PhoneGap, созданный компанией-разработчиком программного обеспечения Nitobi. Позднее Nitobi была приобретена Adobe, которая передала Apache кодовую базу PhoneGap. Adobe сохранила товарный знак PhoneGap, но пожертвованное программное обеспечение было переименовано в Apache Cordova.
Затем появился Ionic.
Ionic - это не единый фреймворк. Это общий термин, обозначающий набор инструментов, позволяющих пользователям создавать гибридные приложения. Существует Ionic Framework, библиотека пользовательского интерфейса. Существует Ionic Native, который дает доступ к собственным мобильным функциям, таким как NFC, геолокация и камера. И есть Capacitor, который компилирует ваше веб-приложение в проект Android Studio или Xcode.
Первоначально Ionic поддерживал только AngularJS. Однако в октябре 2019 года Ionic объявила о поддержке React. Будучи заядлым поклонником React, я решил создать сторонний проект с помощью фреймворка. Однако мне грустно сообщить, что мой опыт разработки Ionic React был разочаровывающим из-за слабой поддержки и документации для React.
Опыт разработки
Начать было легко. Ionic предлагает интерфейс командной строки, с помощью которого можно быстро создать начальный проект Ionic React + TypeScript. Я смог запустить «Hello, World!» приложение в моем браузере за считанные минуты.
Моя проблема с Ionic React началась, когда мне пришлось реализовать поток входа в систему OAuth в моем приложении. Мне нужно было найти встроенную в приложение библиотеку браузера, которая позволяла мне извлекать URL-адрес при загрузке страницы. Это оказался кошмар.
Сначала я попробовал плагин Capacitor Browser. Мне удалось открыть браузер в приложении и подключить слушателя при загрузке страницы. Однако я ничего не получил от функции обратного вызова, хотя в документации говорилось, что должен быть объект info (как показано ниже):
После нескольких дней рытья в сети я обнаружил эту проблему, в которой говорилось, что пустой объект info был ожидаемым поведением! Я указал, что подпись функции info: any ужасно вводила в заблуждение. К счастью, сопровождающий заметил это и впоследствии внес исправление в документацию. Как бы то ни было, плагин зашел в тупик, потому что не передавал мне URL-адрес веб-страницы.
Затем я попробовал библиотеку In App Browser Ionic Native, в которой вообще не было документации по React ...
Поэтому мне по сути пришлось собрать код для React из небольшого доступного фрагмента кода Angular. При разработке в браузере я столкнулся с этой проблемой, в которой нужная мне функция не была определена. Я потратил дни, пытаясь диагностировать проблему, но безрезультатно. Позже я узнал, что плагин просто не работал в браузере, но он работал на Android и iOS. Поэтому мне пришлось отказаться от браузера и перейти к разработке в симуляторе iOS, что лишило меня всей цели создания единой базы кода для всего.
Мой опыт внедрения браузера в приложении был не единственным примером неадекватной поддержки React со стороны Ionic. Например, у меня также были проблемы с компонентом ion-tabs, которому не хватало нескольких задокументированных методов при переносе из Angular. В общем, для React еще нет документации и поддержки библиотек, что вызывает разочарование при разработке.
Трудно получить помощь
Пытаясь диагностировать свои проблемы, я также заметил бездействие сообщества Ionic. Канал Slack и форум Ionic были довольно мертвы. Обычно на получение ответа уходили дни, который даже не всегда отвечал на мой вопрос, и в этом случае мне приходилось задавать другой вопрос, только чтобы ждать еще пару дней, прежде чем получить ответ (или нет).
Запутанная экосистема
Кроме того, меня очень смущала экосистема Ionic. Не всегда было ясно, какие библиотеки в Capacitor, Ionic Native или Cordova plugins люди должны выбрать.
Продолжая мой пример, в каждом из этих проектов есть библиотека браузера в приложении, с небольшими различиями между ними. Из-за этого люди задают вопросы не в том месте, что усугубляет проблему, с которой трудно получить помощь. То есть я не виню его в том, что он рассердился.
Продукт
В целом, несмотря на разочаровывающий опыт разработчиков, я был доволен производительностью конечного продукта. Приложение было быстрым и стабильным. При этом мой проект был довольно простым. Был только один экран входа в систему, несколько переходов между страницами и несколько сетевых вызовов. Так что я не могу засвидетельствовать производительность и собственные возможности Ionic.
Заключение
В настоящее время единственным крупным конкурентом Ionic React является React Native, который требует от вас написания большого количества кода, специфичного для React Native (если у вас нет React Native Web, это обсуждение в другой раз). Вот почему Ionic React поначалу так понравился мне, потому что обещал стать настоящим решением, состоящим из единой кодовой базы для всего.
Однако на самом деле Ionic React все еще очень груб. Прежде чем я смогу с уверенностью порекомендовать его кому-нибудь, нужно будет его отшлифовать. На данном этапе я бы рекомендовал пользователям React придерживаться React Native.
