Кроссплатформенная разработка
5 лет React Native в Shopify
За последние 5 лет React Native прошел долгий путь развития, и многие ограничения, из-за которых люди не принимали его, просто больше не существуют. Если вы давно не пробовали использовать RN, сейчас самое время вернуться к нему.
Пять лет назад мы объявили, что React Native (RN) — это будущее мобильной разработки в Shopify. Сегодня мы рады поделиться с вами достигнутым прогрессом, извлеченными уроками и тем, что нас ждет в будущем.
Напомним, что мы решили перейти на RN по трем основным причинам:
- Писать один раз — перестать создавать одни и те же функции дважды, один раз на iOS и один раз на Android.
- Движение талантов — дать разработчикам возможность свободно работать на iOS, Android и в Интернете.
- Создавать больше ценности — тратить больше времени на предоставление ценности пользователям, а не гнаться за паритетом функций.
Мы рады сообщить, что наш переход оказался весьма успешным:
- Отсутствие необходимости создавать одни и те же функции дважды позволило нам значительно повысить производительность.
- Инженеры могут работать как в веб-версии, так и в мобильной, что позволяет командам делать больше при том же количестве сотрудников и открывает новые возможности для роста.
- Поддержание паритета функциональности между iOS и Android перестало быть проблемой, что позволило высвободить мощности для выпуска гораздо большего количества продуктов.
- Наши приложения работают молниеносно (загрузка экрана <500 мс) и стабильно (>99.9% сессий без сбоев).
- Мы продолжаем использовать нативный подход везде, где он является лучшим инструментом для работы, что дает нам лучшее из двух миров.
За последние 5 лет мы перевели все наши приложения на React Native. Вместо того чтобы использовать для этого one-size-fits-all подход, каждая команда выбрала, когда и как переводить свое приложение. Это позволило им продолжать поставлять функции и в то же время соответствовать нашей стратегии использования RN.
Что мы узнали?
Приложения на React Native работают быстро
В Shopify мы очень заботимся о производительности. Как говорит наш генеральный директор Тоби Лютке, «не все быстрое программное обеспечение является отличным, но все отличное программное обеспечение является быстрым». Самый большой вопрос, который возник у нас при переходе на RN, и главная причина, по которой мы не сделали этого раньше, заключалась в том, сможем ли мы с его помощью достичь наших целей по производительности.
Прежде чем принять решение о переходе, мы провели обширное прототипирование, которое дало многообещающие результаты. Мы также видели всю работу, которую вела Meta* по устранению узких мест в производительности, и определили области, такие как списки, где мы могли бы помочь. Мы предсказали, что RN скоро станет намного быстрее, и сделали все возможное.
Прошло 5 лет, и теперь приложения RN работают очень быстро. В приложении Shopify мы достигли скорости загрузки экрана менее 500 мс (P75), и вы можете узнать, как мы это сделали, здесь, здесь и здесь. Подобной производительности мы добились во всех наших приложениях. Как и в случае с нативными приложениями, вы должны применять хорошие шаблоны и техники, чтобы устранить узкие места в производительности.
Проведя годы за созданием мобильных приложений в масштабе с использованием как нативного подхода, так и React Native, мы обнаружили, что нативное не всегда синоним быстрое, а React Native не синоним медленное. За последние несколько лет RN прошел долгий путь, и теперь с его помощью можно создавать приложения мирового класса.
Мы ожидаем, что это будет становиться все проще по мере того, как фреймворк будет развиваться, а команды приобретать все больше опыта. Мы будем продолжать делиться своими наработками с сообществом.
Горячая перезагрузка — это потрясающе
Возможность видеть, как ваши изменения мгновенно отражаются в RN, полностью изменила игру. Это была одна из наших самых больших проблем с native. Учитывая размер наших кодовых баз, даже самые тривиальные изменения требовали нескольких минут для компиляции и запуска на эмуляторе/физическом устройстве. Это отнимало время и нарушало поток разработчиков. Горячая перезагрузка 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 должно быть антицелью. Он отлично подходит для создания фич один раз для всех платформ, но не является подходящей технологией для всего.
Нативная разработка по-прежнему остается лучшим способом для создания передовых функций, использующих аппаратное обеспечение устройства, таких как 2D/3D-сканирование и запуск моделей искусственного интеллекта на устройстве. Она также лучше подходит для создания функций, имеющих ограничения по объему памяти, таких как виджеты для домашнего экрана и экрана блокировки, приложений для Apple Watch, App Intents и Siri Shortcuts.
Нативная разработка также является лучшим выбором для длительных фоновых заданий. Например, наше приложение Point of Sale загружает и синхронизирует тонну данных в фоновом режиме, чтобы иметь возможность обрабатывать транзакции даже в автономном режиме. Используя нативный код, мы смогли полностью переложить эту работу на фоновый режим, чтобы она не влияла на производительность приложения. Это легко сделать благодаря сильной совместимости, которую RN обеспечивает из коробки.
Вместо того чтобы думать о нативном коде или React Native, думайте о нативном коде и React Native.
Мы обнаружили, что можно сэкономить кучу времени, создав большинство функций всего один раз с помощью RN, а затем использовать native для тех вещей, для которых он подходит лучше всего. Именно поэтому наличие в команде специалистов по нативным технологиям имеет решающее значение.
Отладка хуже
Отладка в React Native хлипкая, и ее правильная настройка в VSCode требует определенных усилий. iOS и Android, напротив, имеют мощные возможности отладки, которые просто работают. Meta* недавно полностью переписала стек отладчика React Native, который выглядит многообещающе. Мы сотрудничаем с ними, чтобы довести его до уровня мировых стандартов.
Обновления React Native не являются бесшовными
Обновление приложения до каждой новой версии React Native требует значительного объема работы и часто перестраивает кодовую базу. Мы смягчили эту проблему, поручив ее небольшой группе разработчиков, работающих на ротационной основе, в то время как остальная команда сосредоточена на разработке фич.
Мы ожидаем, что это станет проще по мере развития фреймворка и более широкого внедрения новой архитектуры.
Большая зависимость от библиотек сторонних разработчиков
Фреймворк React Native не такой всеобъемлющий по сравнению с нативным, поэтому в итоге вам придется использовать больше сторонних библиотек. Экосистема за последние годы сильно развилась, и теперь легко найти хорошо поддерживаемые библиотеки для всего, что вам может понадобиться.
Однако это увеличивает расходы на постоянное поддержание их в актуальном состоянии и повышает вероятность атак на цепочки поставок. Мы решили эту проблему, внедрив автоматическое обновление зависимостей с помощью Dependabot и автоматическое сканирование кода для выявления вредоносного кода.
Нам бы хотелось, чтобы фреймворк стал более самостоятельным и предоставлял больше возможностей из коробки.
Общие основы открывают массу преимуществ
Когда мы только начинали внедрять React Native, у нас не было многолетнего опыта создания мобильных приложений с использованием RN, как это было с нативным подходом. Мы также не могли использовать общие нативные основы, которые создавали годами, поэтому каждая команда строила все по-своему.
В то время не было смысла вкладывать деньги в создание общих основ, потому что мы все еще учились создавать приложения на RN. Мы снова были новичками и должны были сначала потратить время и силы на развитие опыта.
Такой подход был хорош для быстрого запуска и переноса наших приложений, но он также заставлял команды решать одни и те же проблемы по несколько раз, изобретая колесо. Это был осознанный компромисс — мы выбрали скорость, а не последовательность.
К концу 2023 года все наши приложения были достаточно зрелыми, чтобы мы могли начать делать их согласованными. С тех пор мы начали извлекать общие компоненты, такие как идентификация, мониторинг в реальном времени, измерение производительности и т.д., в общие библиотеки, которые используют все приложения.
Это позволяет командам не решать проблемы, которые уже были решены в других подразделениях компании. Это также способствует распространению знаний и опыта, и каждое приложение автоматически получает выгоду от улучшений, которые вносятся в эти общие компоненты.
Мы продолжим эту работу в 2025 году, чтобы еще больше увеличить количество кода, которым мы обмениваемся между нашими приложениями, поскольку это дает нам огромные преимущества и высвобождает инженерные ресурсы, которые можно использовать для предоставления большей ценности нашим пользователям.
Будущее React Native
Будущее React Native радужно, и мы считаем, что Meta была отличным управляющим проекта. Мы видим регулярные улучшения с каждым выпуском, а на дорожную карту сильно влияют отзывы разработчиков. Мы ожидаем, что создавать быстрые приложения станет еще проще. Мы также в восторге от новой архитектуры и намерены использовать ее в своих приложениях.
Сообщество также процветает: несколько компаний, таких как Microsoft, Amazon, Tesla, SpaceX и Coinbase, используют React Native, а разработчики поставляют высококачественные сторонние библиотеки и фреймворки.
В Shopify мы считаем, что создание программного обеспечения — это командный вид спорта, и привержены открытому вебу, открытому исходному коду и открытым стандартам. Для этого мы:
- Вносим вклад в код React Native
- Выступаем в роли соруководителей релизов RN
- Спонсируем такие значимые проекты с открытым исходным кодом, как React Native Skia и Reanimated
- Публикуем такие проекты с открытым исходным кодом, как Flashlist, Restyle и Tophat.
Кроме того, в 2025 году мы перезапускаем рабочую группу React Native. В ней соберутся руководители высшего звена, поддерживающие RN в своих организациях, чтобы определить ключевые проблемы в экосистеме, определить приоритеты инвестиций, расширить сотрудничество и сократить дублирование усилий. Ранее в состав группы входили такие компании, как Meta, Twitter, Coinbase и Microsoft. Если вы хотите присоединиться к этой работе, свяжитесь с нами!
За последние 5 лет React Native прошел долгий путь развития, и многие ограничения, из-за которых люди не принимали его, просто больше не существуют. Если вы давно не пробовали использовать RN, сейчас самое время вернуться к нему. Мы будем продолжать работать с Meta и остальным сообществом, чтобы сделать его лучше.
-
Видео и подкасты для разработчиков4 недели назад
SwiftUI: алхимия приложений — превращаем идеи в реальность
-
Разработка4 недели назад
30 уроков от 30 лучших продуктовых лидеров
-
Новости4 недели назад
Видео и подкасты о мобильной разработке 2025.3
-
Магазины приложений1 неделя назад
Приложение Hot Tub появится на iOS в EC