Пять лет назад мы объявлено что React Native (RN) — это будущее мобильных устройств в Shopify. Сегодня мы рады поделиться достигнутым прогрессом, извлеченными уроками и тем, что нас ждет в будущем.
Подводя итог, мы решили перейти на RN по 3 основным причинам:
- Напиши это один раз – Прекратите создавать одни и те же функции дважды: один раз на iOS и один раз на Android.
- Переносимость талантов – Предоставьте разработчикам возможность свободно работать на iOS, Android и в Интернете.
- Отправляйте больше ценности – Тратьте больше времени на предоставление пользы пользователям, а не на погоню за равенством функций.
Мы рады сообщить, что наш переход прошел весьма успешно:
- Отсутствие необходимости создавать одни и те же функции дважды позволило нам существенно повысить производительность.
- Инженеры могут работать через Интернет и мобильные устройства, что позволяет командам делать больше с тем же количеством людей и открывает новые возможности для роста.
- Поддержание паритета функций между iOS и Android стало не проблемой, что высвобождает возможности для предоставления гораздо большей ценности.
- Наши приложения работают очень быстро (<500ms screen loads) and stable (>99,9% сеансов без сбоев)
- Мы продолжаем использовать нативные инструменты там, где это лучший инструмент для работы, давая нам лучшее из обоих миров.
За последние 5 лет мы перенесли все наши приложения на React Native. Вместо того, чтобы использовать универсальный подход, каждая команда сама выбирала, когда и как перенести свое приложение. Это позволило им продолжить выпуск новых функций, одновременно согласовываясь с нашей стратегией использования RN.
Что мы узнали?
Приложения React Native работают быстро
Мы очень заботимся о производительности в Shopify. Как говорит наш генеральный директор Тоби Лутке, «не все быстрое программное обеспечение является отличным, но все хорошее программное обеспечение является быстрым». Самый большой вопрос, который у нас возник при переходе на RN, и главная причина, по которой мы не сделали этого раньше, заключалась в том, сможем ли мы с его помощью достичь наших целей по производительности.
Прежде чем принять решение о переходе, мы провели обширное прототипирование, которое привело к многообещающим результатам. Мы также увидели всю работу, которую проделала Meta по устранению узких мест в производительности, и определили такие области, как списки, где мы могли бы помочь. Мы предсказали, что RN скоро станет намного быстрее, и пошли олл-ин.
Перенесемся на 5 лет вперед: приложения RN работают быстро. Мы добились загрузки экрана менее 500 мс (P75) в приложении Shopify, и вы можете узнать, как нам это удалось. здесь, здесьи здесь. Мы добились одинаковой производительности во всех наших приложениях. Как и в случае с нативным кодом, вам придется применять хорошие шаблоны и методы для устранения узких мест в производительности.
Потратив годы на создание масштабируемых мобильных приложений как с помощью нативных приложений, так и с помощью React Native, мы обнаружили, что нативный не означает автоматически быстрый, а React Native не означает автоматически медленный. За последние несколько лет RN прошла долгий путь, и теперь вы можете использовать ее для создания приложений мирового уровня.
Мы ожидаем, что это будет становиться проще по мере того, как структура становится более зрелой, а команды приобретают больше опыта. Мы продолжим делиться своими знаниями с сообществом.
Горячая перезагрузка – это круто
Возможность мгновенно увидеть, как ваши изменения отражаются с помощью RN, полностью изменила правила игры. Это была одна из наших самых больших проблем с нативным интерфейсом. Учитывая размер нашей базы кода, компиляция и запуск даже самых тривиальных изменений на эмуляторе/физическом устройстве занимало несколько минут. Это тратит время и нарушает поток разработчиков. Горячая перезагрузка React Native полностью устраняет эту проблему.
Typescript открывает возможность переноса талантов
Typescript стал повсеместным, и мы наблюдаем большой успех у разработчиков, переходящих с React Web на React Native. Веб-разработчикам гораздо проще начать работу над мобильными устройствами с помощью RN, в отличие от разработки нативных iOS и Android. Точно так же разработчикам мобильных приложений, знакомым с RN, легко работать в Интернете.
Такая гибкость не только открывает больше возможностей для роста инженеров, но также повышает гибкость кадрового обеспечения и позволяет командам добиваться большего с тем же количеством разработчиков. Это также открывает новые возможности для обмена кодом между Интернетом и мобильными устройствами, создавая больше преимуществ.
Наличие разработчиков, которые могут работать на нескольких платформах, невероятно ценно. Это позволяет нам быстрее выпускать продукты и позволяет разработчикам брать хорошие идеи из одной технологии и по-новому применять их к другой. Это также создает культуру рассмотрения технологий как инструментов в поясе с инструментами, расширяет кругозор команды и поощряет использование лучших инструментов для работы, а не тех, с которыми вы лучше всего знакомы.
Нативные разработчики имеют решающее значение
Мобильные инженеры, специализирующиеся на iOS и Android, необходимы для создания отличных мобильных приложений. Ничто не заменит опыт и вкус, которые возникают благодаря созданию множества мобильных продуктов и глубокому пониманию условностей и удобства использования. Возможность перейти на уровень платформы, писать привязки, выполнять сборку и выпуск, распространять и т. д. требует наличия собственных знаний.
Они также играют жизненно важную роль в оптимизации производительности приложений на множестве моделей устройств, обеспечивая единообразный пользовательский опыт для всех пользователей. Кроме того, собственный опыт необходим для управления обновлениями версий React Native, а также для внедрения новых функций, API и изменений инструментов, которые сопровождают новые выпуски iOS и Android. Без этих экспертов невозможно создать хороший продукт.
Мы вложили средства в обучение React Native наших мобильных разработчиков с помощью курса самообслуживания, который охватывал все, что им нужно было знать для выпуска готового к использованию кода. Кроме того, мы договорились о приеме с разработчиками, которые уже владеют React Native, чтобы обеспечить поддержку посредством сеансов вопросов и ответов, парного программирования и проверок кода.
Мы также пополнили наши мобильные команды некоторыми веб-разработчиками за их опыт работы с Javascript, Typescript и React. Это обеспечило нам хороший опыт как в нативной разработке, так и в React Native, и со временем повысило уровень всей команды.
По нашему опыту, наличие хорошего сочетания нативных и веб-разработчиков является ключом к созданию отличных мобильных приложений с использованием React Native.
Нативный код имеет решающее значение
100% React Native должен быть антицелью. Она отлично подходит для создания функций только один раз, но не является подходящей технологией для всего.
Native по-прежнему остается лучшим способом создания передовых функций, использующих аппаратное обеспечение устройства, например 2D/3D-сканирование и запуск моделей искусственного интеллекта на устройстве. Он также лучше подходит для создания функций с ограничениями по памяти, таких как виджеты главного экрана и экрана блокировки, приложения и дополнения Apple Watch, намерения приложений и ярлыки Siri.
Native также является лучшим выбором для длительных фоновых задач. Например, наше приложение для торговых точек загружает и синхронизирует массу данных в фоновом режиме, чтобы оно могло обрабатывать транзакции даже в автономном режиме. Используя собственный код, мы смогли полностью перенести эту работу в фоновый режим, гарантируя, что она не повлияет на производительность приложения. Сделать это легко благодаря высокой совместимости, которую RN обеспечивает «из коробки».
Вместо того, чтобы думать о родном или Реагируйте на родное, думайте нативное и Реагировать Натив.
Мы обнаружили, что вы можете сэкономить массу времени, создав большинство функций только один раз с помощью RN, а затем использовать встроенные функции для тех целей, для которых они лучше всего подходят. Именно поэтому наличие в команде местных специалистов имеет решающее значение.
Отладка хуже
Отладка в React Native ненадежна, и ее правильная настройка в VSCode требует некоторой работы. С другой стороны, iOS и Android имеют мощные возможности отладки, которые просто работают. Мета недавно сделала полную переписать стека отладчика React Native, что выглядит многообещающе. Мы сотрудничаем с ними, чтобы вывести его на мировой уровень.
Обновления React Native не проходят гладко
Обновление приложения до каждой новой версии React Native требует значительного объема работы и часто требует реструктуризации базы кода. Мы смягчили эту проблему, поручив небольшую группу сменяющихся разработчиков, в то время как остальная часть команды сосредоточилась на разработке функций.
Мы ожидаем, что это станет проще по мере развития структуры и Новая Архитектура имеет более широкое распространение.
Больше полагаться на сторонние библиотеки
Фреймворк React Native не такой всеобъемлющий по сравнению с нативным, поэтому вам в конечном итоге придется использовать больше сторонних библиотек. За последние годы экосистема значительно повзрослела, и теперь легко найти хорошо поддерживаемые библиотеки для всего, что вам может понадобиться.
Однако это увеличивает накладные расходы на постоянное их обновление и увеличивает зону воздействия атак на цепочку поставок. Мы смягчили это, внедрив автоматические обновления зависимостей, используя Это зависит и автоматическое сканирование кода для обнаружения вредоносного кода.
Нам бы хотелось, чтобы платформа стала более продуманной и предоставляла больше возможностей «из коробки».
Общие фонды открывают массу рычагов
Когда мы впервые начали использовать React Native, у нас не было многолетнего опыта создания мобильных приложений с использованием RN, как это было с нативным кодом. Мы также не могли использовать общие основы, которые мы создавали на протяжении многих лет, поэтому каждая команда строила все по-своему.
В то время не стоило вкладывать средства в создание этих общих основ, потому что мы все еще учились создавать приложения в RN. Мы снова были новичками, и нам нужно было сначала потратить время и усилия на развитие опыта.
Этот подход был отличным решением для быстрого начала работы и миграции наших приложений, но он также заставил команды решать одни и те же проблемы несколько раз, заново изобретая велосипед. Это был сознательный компромисс: мы оптимизировали скорость, а не последовательность.
К концу 2023 года все наши приложения стали достаточно зрелыми, чтобы мы могли приступить к их единообразию. С тех пор мы начали извлекать общие компоненты, такие как Identity, мониторинг в реальном времени, измерение производительности и т. д., в общие библиотеки, которые используют все приложения.
Это позволяет командам избежать решения проблем, которые уже решены в других подразделениях компании. Оно также распространяет знания и опыт, и каждое приложение автоматически получает выгоду от улучшений, внесенных в эти общие компоненты.
Мы продолжим эту работу в 2025 году, чтобы еще больше увеличить объем кода, который мы разделяем между нашими приложениями, поскольку это дает нам огромные возможности и высвобождает инженерные возможности, которые можно использовать для предоставления большей пользы нашим пользователям.
Будущее React Native
Будущее React Native светлое, и мы считаем, что Meta отлично справилась с проектом. Мы видим регулярные улучшения с каждым выпуском, и на дорожную карту сильно влияют отзывы разработчиков. Мы ожидаем, что создавать быстрые приложения будет становиться все проще. Мы также в восторге от Новая Архитектура и стремимся использовать его в наших приложениях.
Сообщество также процветает благодаря нескольким компаниям, таким как Microsoft, Amazon, Tesla, SpaceX и Coinbase, которые используют React Native, а разработчики поставляют высококачественные сторонние библиотеки и фреймворки.
В Shopify мы считаем, что создание программного обеспечения — это командный вид спорта, и придерживаемся принципов открытого Интернета, открытого исходного кода и открытых стандартов. Мы делаем это путем:
- Внесение кода в React Native
- Работа в качестве капитанов совместных выпусков релизов RN.
- Спонсорство весьма эффективных проектов с открытым исходным кодом, таких как Реагировать на родной Skia и Реанимированный
- Публикация проектов с открытым исходным кодом, таких как Флэшлист, Рестайлинги Топат
Кроме того, в 2025 году мы перезапускаем рабочую группу React Native. Это соберет вместе старших руководителей, которые поддерживают RN в своих организациях, для выявления ключевых проблем в экосистеме, определения приоритетов инвестиций, расширения сотрудничества и сокращения дублирования усилий. Ранее в число участников входили такие компании, как Meta, Twitter, Coinbase и Microsoft. Если вы заинтересованы в присоединении к этим усилиям, свяжитесь с нами!
React Native прошел долгий путь за последние 5 лет, и многих ограничений, из-за которых люди не принимали его, просто больше не существует. Если вы давно не пробовали использовать RN, сейчас самое время вернуться к нему. Мы собираемся продолжать работать с Метой и остальным сообществом, чтобы сделать его лучше.
Об авторе
Мустафа Али — технический директор Shopify
2025-01-23 08:20:00
1737702227
#Пять #лет #React #Native #Shopify
