14 октября Ionic представили общественности новую технологию: Ionic React — фреймворк, позволяющий использовать React Framework для разработки под Ionic/Cordova Framework.
Перевод официального Пресс-релиза
Сегодня нам не терпится анонсировать всеобщуй доступ к Ionic React, нативной версии React для Ionic Framework, который делает разработку под iOS, Android, PC и web (PWA) максимально простой. И всё это с единой кодовой базой, классическими паттернами разработки для React и стандартной библиотекой react-dom, что позволяет использовать всю экосистему веб-платформы.
Ionic React — самое важное изменение в истории Ionic Framework, оно открывает нам целый новый мир возможностей. Именно поэтому мы решили рассказать вам немного о том, как мы оказались здесь, а также почему и для кого мы создали наш продукт.
Почему React?
Для тех, кто следит за разработкой Ionic с первых дней, может стать неожиданным тот факт, что мы поддерживаем не только Angular, но и React.
Когда мы начинали работку над Ionic Framework, нашей целью было дать силу веб разработчикам создавать топовые приложения, используя их имеющиеся навыки веб разработки, а также всю маштабную экосистему веб платформы.
Мы представили возможность создавать разнообразные контроллеры на JavaScript и распространять их как простые HTML теги, чтобы любой разработчик мог собрать их в прекрасное приложение. Выяснилось, что тогда было слишком рано для реализации наших идей напрямую в браузере, поэтому вместо этого мы решили работать с AngularJS и их волшебной директивной системной. С того момента мы в первую очередь работали с Angular.
Проматывая к 2019 году, экосистема фронтенд разработки выглядит так, как никогда прежде. Разработчикам открыт доступ к множеству отличных фреймворков, но немногие из них также популярны и успешны как React.
Мы пересмотрели наше изначальное видение и поняли, что создание версии Ionic Framework для React имеет смысл. Принимая во внимание тот факт, что наша команда пополнилась множеством фанатов React, у нас было стойкое желание увидеть поддержку React фреймворком, хотя бы внутри команды.
Поэтому мы взялись за задание создать нативную версию Ionic для React, которую полюбили бы React разработчики.
Но что же о React Native?
Вы можете задаваться вопросом, почему мы создали Ionic React, когда существует React Native.
Мы тоже задавались этим вопросом. Однозначно, мы не хотели тратить наше время на ненужный продукт, который был бы просто альтернативой React Native. Вместо этого мы решили использовать нашу творческую энергию на технологию, которая решила бы проблемы, которые другие фреймворки не решают.
Однако, когда мы остановились и посмотрели вокруг, мы поняли, что Ionic React привнёс нечто уникальное в экосистему React, поскольку у нас было своеобразное видение будущего разработки приложений.
Вместо создания абстракции над нативным управлением iOS и Android, мы хотели построить что-то, что использовало бы нативный DOM, а также стандартную библиотеку react-dom, что позволило бы нам включиться в экосистему огромного количества библиотек, а также десятков лет работы над браузерами. Когда мы сравнили количество установок react-dom и react-native, для нас стало однозначно, что подавляющее большинство разработки под React происходило в браузерах, используя DOM поверх нативных iOS или Android UI компонентов (в 16 раз больше, если быть точным). Это укрепило нас в мнении, что веб-разработчики хотят веб разработки.
Помимо этого, среди разработчиков быстро растёт интерес в Progressive Web Apps, особенно в энтерпрайз секторе. PWA официально не поддерживаются в React Native, а потому Ionic стал одним из ведущих PWA решений, которое показывает лучшую производительность для PWA среди веб фреймворков благодаря нашему проекту Stencil, который генерирует крайне производительные компоненты под капотом.
Мы также слышали от некоторых разработчиков, что они хотели бы использовать Ionic Framework в их React Native приложениях, создавая новые экраны и вставляя туда WebView (используя Capacitor, об этом позднее), чтобы ускорить процесс разработки или позволить классическим веб-разработчикам работать в тандеме с командой мобильной разработки.
В конце концов, после множества часов бесед с React разработчиками на различных конференциях (таких как React Rally), нам стало понятно, что в экосистеме есть заметный пробел, который наш продукт смог бы занять.
Это не ваша Cordova
Если вашим последним опытом работы с веб-ориентированной мобильной разработкой была Cordova, то нам понятно, почему вам не хочется возвращаться.
В то время как мы брали идеи из Cordova, на практике опыт разработки для Capacitor крайне отличается.
Несмотря на то, что Ionic всё еще поддерживает Cordova, новые приложения Ionic работают на кроссплатформенном движке Capacitor, который мы создали в нашей команде. Capacitor использует современный JS и фичи браузера, а также позволяет распространять одно приложение под iOS, Android, Electron и Web как PWA.
На самом деле, поддержка PWA была одной из главных забот Capacitor, именно поэтому большинство API движка имеют поддержку PWA из коробки, к ним относится, например, Camera.
От Ionic разработчиков, которые перешли на Capacitor, мы слышали много положительного фидбека о комфортности процесса разработки.
Больше чем OpenSource
Ionic приносит нечто новое в React и кросс-платформенную экосистему: полноценное, готовое к энтерпрайз предложение с сервисами, консультациями, инструментами и нативным функционалом для команд, которым нужно больше чем доступно через сообщество.
Ionic, команда, стоящая за Ionic Framework, работает с сотнями средних и крупных компаний, предлагая им дополнительную поддержку и ПО, которые требуются их бизнесу.
Наш сервис Appflow может быть использован для проведения удаленных обновлений приложений в реальном времени, или создания бинарных файлов для iOS и Android в CI/CD workflow.
Приступим
Первая официальная версия Ionic React — v4.11. Хватит предыстории, как вы действительно начнёте творить с Ionic React?
Для начала, нужно установить Ionic CLI (если вы не сделали этого прежде):
npm i -g ionic
Теперь создадим новый проект:
ionic start my-react-app
CLI проведет вас через процесс установки, задав несколько вопросов, первый из которых — какой фреймворк вы хотите использовать — выбирайте React.
Далее, CLI спросит вас какой шаблон-заготовку проекта вы хотите использовать. Мы создали несколько различных бойлерплейтов, чтобы помочь вам начать работу быстро. Для этого демо мы используем tabs
Консольное приложение создаст приложение и подтянет зависимости. Когда процесс завершится, зайдём в папку проекта и запустим приложение:
ionic serve
Под капотом, ionic serve использует Create React App проект для компиляции и запуска сервера разработки.
Теперь давайте посмотрим, из чего состоит приложение Ionic React.
Откройте папку проекта в вашем любимом редакторе кода, оставив работать ionic serve. При изменении кода приложение автоматически перекомпилируется и обновится в вашем браузере.
Ionic React проект — просто проект для React с дефолтными настройками из CRA. Единственное отличие, которое вы могли заметить, мы используем TypeScript.
В Ionic мы любим TypeScript, и считаем, что использование TypeScript в React позволяет достичь максимальной производительности разработки. Однако, если вы хотите использовать чистый JS, переименуйте файлы в .js и удалите все аннотации типов из файлов.
Папка src содержит весь код приложения. Точка входа находится в файле App.tsx. Давайте посмотрим, что происходит в этом файле.
В шапке, мы видим классические React и React Router импорты, затем набор импортов из @ionic/react. Каждый компонент Ionic экспортируется как отдельный React компонент. По сути, Ionic React — обертка над веб компонентами, которые мы используем в Ionic Core, но экспортировали так, чтобы это ощущалось естественным для React разработчика.
Далее, мы импортируем ряд CSS файлов. После этого идёт главный компонент App. Заметьте, что в стартерах, мы используем 100% функциональные компоненты. Нам нравится этот подход, но если вы фанат компонентов на классах, то можете использовать их.
Каждое приложение Ionic начинается с компонента IonApp, который является основным контейнером, который настраивает экран для работы под мобильные и десктоп. Далее, IonReactRouter — обертка над компонентом BrowserRouter из библиотеки React Router. Для того, чтобы имитировать нативные переходы между страницами, а также поддерживать состояние страниц между переходами по приложению, мы дополнили React Router некоторым дополнительным функционалом.
Часть нашего стартера находится в компоненте IonTabs, а IonRouterOutlet содержит набор из Route для каждой из страниц в интерфейсе.
Компонент IonTabBar содержит нижний бар с кнопками для каждой из страниц, которые открывают Tab1, Tab2 и Tab3 из src/pages.
Это основы запуска и начала работы с Ionic React! Для более глубокого туториала, посетите "Getting Start guide" на официальной документации фреймворка.
Мы взволнованы Ionic React и не можем дождаться, чтобы увидеть, что вы сделаете с его помощью. У нас огромные планы развития проекта, поэтому пишите в комментариях, какой тип контента вы хотите увидеть раньше прочего.
До новых встреч!