Если вы следите за новостями из мира React Native, вы наверняка слышали о Fabric - новой архитектуре для React Native. Он использовался в течение довольно долгого времени внутри Facebook, и теперь основная команда решила заняться его более широким внедрением с открытым исходным кодом. С предстоящим выпуском React Native 0.68 перейти на новую архитектуру будет просто, необходимо всего лишь установить одну новую константу в вашем проекте перед сборкой приложения, что облегчит любому разработчику возможность попробовать новую архитектуру. Однако переход на Fabric будет невозможен для всех после выхода новой версии React Native, так как многие проекты React Native зависят от дополнительных библиотек, которые также должны быть адаптированы к новой архитектуре. Это особенно актуально для библиотек, которые предоставляют дополнительные нативные функции или предоставляют нативные компоненты, специфичные для конкретной платформы. Мы надеемся увидеть большой толчок к принятию Fabric среди самых популярных проектов сообщества React Native. Как Software Mansion — автора ряда популярных библиотек React Native, мы хотим объявить о своем намерении портировать проекты, которые мы поддерживаем, и возглавить усилия по внедрению Fabric на собственном примере, чтобы как можно скорее включить новую архитектуру для каждого приложения React Native.

Сегодня мы публикуем первую версию библиотеки react-native-screens, совместимую с Fabric. Это не только первая совместимая с Fabric версия этого очень популярного проекта (устанавливаемая на 70% чаще, чем react-native из NPM), но и первая нативная библиотека компонентов, совместимая с новой архитектурой React Native в целом. В этой статье мы обсудим, что нужно для переноса существующей библиотеки с собственными примерами кода на Fabric и покажем наш подход к разработке. Если вы заинтересованы в экспериментах с новой архитектурой, мы также покажем как вы можете использовать react-native-screens с вашим первым приложением на Fabric. Если вы поддерживаете свой собственный пакет для React Native, мы надеемся, что эта статья вдохновит вас на его миграцию в Fabric и даст вам хорошее представление об этом процессе — для этого мы делимся ссылками на diff изменения и PR из нашего GitHub, которые касаются определенных этапов миграции. Мы были бы рады, если бы вы взяли конфигурацию проекта и идеи, которые мы здесь представляем, чтобы подготовить другие библиотеки для Fabric.

Используйте react-native-screens с Fabric уже сегодня

Самый последний релиз-кандидат React Native (0.68) позволяет вам включить архитектуру Fabric в вашем проекте. Этот тип настройки призван помочь сделать процесс миграции на Fabric постепенным. Люди, которые хотят обновить версию React Native, могут безопасно сделать это, не задумываясь о Fabric. Как только приложение, включая его зависимости, будут готовы к новой архитектуре, вы сможете активировать новую архитектуры для своего проекта. Ядро React Native поддерживает как старую, так и новую архитектуру. Однако, как следствие, библиотеки должны с этим справляться. Если мы хотим сделать переход плавным, существующие пакеты должны обеспечивать аналогичный уровень совместимости. Именно так подготовлена версия библиотеки react-native-screens@3.12. Вы можете использовать его с любой совместимой версией React Native через старую архитектуру, или вы можете активировать переключатель новой архитектуры в приложении React Native 0.68 и использовать его через Fabric.

Простой способ чтобы начать

Чтобы протестировать реализацию react-native-screens как с новой, так и со старой архитектурой, мы создали пример приложения в нашем основном репозитории GitHub, которое настроено на работу с Fabric. Самый простой способ протестировать его — клонировать репозиторий react-native-screens с GitHub и следовать инструкциям из папки FabricExample.

Создание вашего первого приложения Fabric с помощью react-native-screens

Как упоминалось ранее, включить Fabric очень просто, необходимо активировать одну константу перед сборкой вашего приложения. Вы можете попробовать это после обновления существующего приложения до 0,68, но ниже мы описываем процесс создания нового проекта react-native:

Создайте новое приложение с помощью React Native CLI: npx react-native init NewRN68App --version 0.68.0-rc.1
Установите react-native-screens: yarn add react-native-screens
Для активации новой архитектуры для iOS необходимо запустить командуpod install в папке ios следующим образом: RCT_NEW_ARCH_ENABLED=1 pod install
Для андроид необходимо установить новое значение newArchEnabled=true в файле android/gradle.properties
Теперь вы можете приступить к созданию приложения как обычно на Android и на iOS. Установленная версия react-native-screens автоматически определит, включен ли Fabric, и будет использовать соответствующую реализацию.

Обратите внимание, что реализация Fabric для react-native-screens пока не поддерживает все доступные параметры. Если вы хотите знать, почему это так, читайте дальше.

Обзор процесса миграции

На уровне архитектуры, Fabric представляет новый интерфейс кода JavaScript для взаимодействия с нативным ядром. Вместо использования моста вся связь между встроенными компонентами и компонентами JS осуществляется через JSI (C++ API для взаимодействия с виртуальной машиной JS). Информация с одной стороны на другую передается с помощью функций C++ вместо сериализации/десериализации для передачи по мосту. Из-за этого библиотеки, которые стремятся поддерживать новую архитектуру, должны адаптироваться к этому новому интерфейсу. Использовать его относительно просто, когда вы хотите создать совершенно новую библиотеку или набор собственных компонентов (мы обсудим некоторые детали позже), однако адаптация Fabric к существующей библиотеке создает некоторые дополнительные проблемы. В частности, мы хотим иметь возможность поддерживать как версию с Fabric, так и версию не относящиеся к Fabric, с как можно большим количеством общего кода между этими двумя реализациями. Это позволило бы нам улучшать библиотеку и исправлять ошибки, а также предлагать людям, которые могут перейти на Fabric, и тем, кто не может, одинаковый уровень поддержки.

Ниже мы обсудим основные шаги процесса миграции существующей библиотеки. Цель состоит в том, чтобы иметь возможность распространять одну версию библиотеки, которая может работать как с Fabric, так и со старой архитектурой RN без дополнительной настройки для пользователя, то есть единственное, что мы ожидаем, это указать, должно ли приложение использовать Fabric или нет, и на основе этого выбрать соответствующую конфигурацию для библиотеки.

Первое, что мы сделали, это написали спецификации компонентов в Flow - диалекте JS. Этот код является источником истины для приложения. Он предоставляет спецификацию, используемую как на нативной стороне, так и на стороне JS. Затем мы изменили часть нашего нативного кода для хорошей работы с Fabric. На этом этапе мы добавили различные реализации, для обработки пропсов и событий. На Android кодовая база является общей между старой и новой архитектурой. На iOS нам нужно было создавать новые файлы, тем самым делая две реализации независимыми. Чтобы сохранить совместимость библиотеки с обеими архитектурами, у нас есть ряд файлов/классов, специфичных для данной архитектуры. В некоторых случаях мы решили разветвить небольшие части кода проверками архитектуры, так как иногда для нас было бы более целесообразно оставить большую часть данного файла или класса и иметь только небольшие фрагменты, специфичные для архитектуры — мы делаем это как в JS, так и в нативной кодовой базе.

Процесс миграции для нас постепенный. Мы начали с внедрения базовых функций в Screens и решили добавить остальное по позже. Теперь, когда мы опубликовали минимальную версию библиотеки, мы сосредоточимся на том, чтобы сделать все функции совместимыми с Fabric.

Если вы хотите глубже погрузиться в изменения, мы разделили их на несколько PR:

Software Mansion & Shopify

Поскольку это первый большой релиз для нас в этом году, мы хотели бы воспользоваться этой возможностью, чтобы поблагодарить Shopify за помощь в наших усилиях, связанных с React Native. Третий год подряд мы сотрудничаем в улучшении экосистемы React Native путем создания и обслуживания основных библиотек с открытым исходным кодом. Одной из основных целей этого года является обеспечение более широкого внедрения новой архитектуры, и этот выпуск библиотеки react-native-screens является лишь первым из многих шагов в этом направлении, которые мы собираемся сделать благодаря поддержке Shopify.

Что дальше

Выпуск совместимой с Fabric версии react-native-screens — важная веха на пути сообщества к адаптации новой архитектуры React Native. Мы надеемся, что за нами последуют другие разработчики поддерживающие свои библиотеки, и рады поделиться нашим опытом. Если у вас есть библиотека или вы планируете перенести свой проект на Fabric, не стесняйтесь обращаться к нам! Команда Open Source в Software Mansion намерена работать над портированием всех библиотек в ближайшем будущем, которые мы поддерживаем в настоящее время, поэтому следите за обновлениями и не забудьте подписаться на нас в Twitter.

Перевод статьи Introducing Fabric to react-native-screens выполнен для телеграмм канала ReactNative - info

Автор оригинала: Jakub Tkacz