React Native: новая веха в мобильной разработке Shopify

Автор оригинала: Farhan Thawar
  • Перевод
Или почему Shopify переходит на React Native.

После многих лет нативной мобильной разработки мы решили на всех парах двинуться в сторону разработки мобильных приложений на React Native. Ниже будет ясно, что это решение далось нам нелегко.

В конце каждого квартала мы видим одну и ту же картину: большинство наших клиентов делают покупки через мобильные устройства (в третьем квартале прошлого года их доля составила 71%). Чёрная пятница и Киберпонедельник — самое горячее время для наших продавцов, а активность покупателей в эти дни зашкаливает. В этом году в период скидок партнеры Shopify зафиксировали 3-процентный рост заказов с мобильных устройств, а средняя доля таких покупок составила 69% от общего числа транзакций.

Так почему же мы решили перейти на React Native? И почему именно сейчас? Что теперь будет с нашей нативной мобильной разработкой? Быстро и коротко ответить на эти вопросы не получится. Начнем с предыстории.

Мобильная разработка в Shopify — 2019


У нас в Shopify сформирована особая практика — делать ставку на сравнительно молодые технологии, находящиеся на раннем этапе развития, либо только набирающие популярность. Это помогает нам быстрее развиваться.

Обычно мы ставим во главу угла несколько технологий и в разработке опираемся преимущественно на них. Это даёт несколько точек роста:

  • мы формируем уникальную экспертизу на небольшом наборе технологий (и часто вносим весомый или даже основной вклад в их развитие);
  • каждое технологическое решение имеет свои узкие места, тонкости, и мы глубоко вникаем в них;
  • экспертные группы разработчиков делятся друг с другом наработками, поэтому все желающие могут при необходимости использовать и сопровождать код, написанный коллегами;.
  • новые сотрудники быстрее входят в курс дела.

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

Когда мы внедряем молодые технологии, языки или фреймворки, мы стараемся просчитать вероятность успеха или неудачи. Вместо того, чтобы избегать риска, мы детально изучаем, исследуем и оцениваем разные риски, исходя из индивидуальных особенностей наших проектов. Как часто бывает, в зоне риска можно обнаружить и скрытые возможности. И мы в первую очередь думаем о том, как можно нейтрализовать негативные аспекты риска:

  • Что, если разработчики перестанут поддерживать технологию?
  • Что, если мы столкнемся с багом, который не сможем пофиксить?
  • Что, если разработчики этой технологии (продукта) будут развивать ее в разрез с нашими интересами?

Ruby on Rails был на начальном этапе развития и еще не оформился как полноценный фреймворк, когда в 2004 году Тоби (наш генеральный директор) стал основным участником open source проекта. В течение многих лет Ruby on Rails считался несерьезным, неэффективным решением. Но выбор и изучение этой технологии на таком раннем этапе развития в результате дали Shopify конкурентное преимущество, хотя это был непопулярный выбор. Используя Ruby on Rails, команда смогла быстрее создавать продукты и привлекать ресурсы. Ведь это была современная технологию, с более высоким уровнем абстракции, чем у традиционных языков программирования и фреймворков, существовавших на тот момент. Аналогично, Пол Грэм в свое время рассказывал о том, как он решил использовать Lisp для создания Viaweb. 6 из 10 самых дорогих компаний Y Combinator сегодня используют Ruby on Rails (хотя, опять же, фреймворк все еще остается не очень популярным). С другой стороны, ни одна из 10 самых дорогих компаний Y Combinator не использует Java, который считается проверенным и достаточно надежным корпоративным решением.

Точно так же, 2 года назад Shopify решил перейти на Google Cloud. Опять же, это достаточно рискованное предприятие для второго по величине e-commerce сервиса в США (по состоянию на 2019 год) — провести облачную миграцию за пределы собственных дата-центров ради достаточно нового продукта, Google Kubernetes Engine. Мы увидели, что кривая создания дополнительной стоимости подтолкнула нас к тому, чтобы сосредоточиться на том, в чем мы действительно хороши (это помощь бизнесу), позволяя другим (в данном случае Google Cloud) взять на себя тяжелый труд, связанный с поддержанием оборудования в рабочем состоянии, с обеспечением мощностей, безопасности, с обновлением операционной системы и т. д.

React Native — что это?


В 2015 году Facebook анонсировал и выпустил релиз open source фреймворка React Native. Ранее его уже использовали внутри компании для разработки своих мобильных приложений. React Native — это фреймворк для кроссплатформенной разработки нативно отображаемых мобильных приложений с помощью js-библиотеки React. Таким образом, он даёт возможность использовать топовую js-библиотеку для создания пользовательского интерфейса нативных мобильных приложений.

В Shopify эта идея (тогда и в каком-то смысле, сейчас тоже) была воспринята скептически, но многие посчитали её перспективной. Таким образом очередное мероприятие Shopify Hackdays было целиком посвящено React Native. Хотя тогда команда оценила преимущества фреймворка, мы приняли решение, что в 2015 году мы не смогли бы реализовать React Native приложение, которым могли бы потом гордиться. Главным образом, это объяснялось проблемами с производительностью и отсутствием полноценной поддержки Android OS. Зато мы ясно осознали, что нам понравилась парадигма Reactive Programming (Реактивного программирования) и язык GraphQL. Кроме того, после знакомства с React Native мы разработали и выложили рендерер для iOS. В 2015 году мы внедрили эти технологии в наш стек, но не использовали React Native для массовой мобильной разработки. О наших первых экспериментах подробно написано здесь.

До сегодняшнего дня в Shopify стандартом была нативная мобильная разработка. Мы создали две команды, mobile tooling и foundations, которые были сфокусированы на iOS и Android, а также помогали нам ускорять процесс разработки. Несмотря на то, что они показали хорошие результаты, нам кажется, разработка станет более эффективной, если мы:

  • используем мощь JavaScript и других web-технологий в мобильной разработке;
  • внедрим парадигму реактивного программирования в разработку клиентских приложений;
  • объединим разработку под iOS и Android на React Native в один технологический стек.

Как работает React Native?


React Native позволяет создавать кроссплатформенные нативно отображаемые мобильные приложения с использованием JavaScript. React Native похож на React: мы также декларативно создаем пользовательский интерфейс на JS с деревом UI-элементов, или с виртуальным DOM (VDOM), если выражаться в терминах ReactJS. Если ReactJS отображает элементы интерфейса в браузере, то React Native преобразует объекты VDOM в нативные платформо-зависимые визуальные элементы для отображения на мобильных устройствах, используя биндинг: нативные компоненты обернуты в React. Нас интересуют только платформы Android и iOS, но есть энтузиасты, которые заинтересованы в развитии React Native для Windows, macOS и Apple tvOS.


ReactJS взаимодействует с браузером, а React Native — с мобильными API

Когда мы не используем React Native?


Существуют ситуации, когда команда Shopify не использует React Native для разработки мобильных приложений. В частности, если от нас требуется:

  • запуск приложения на старом “железе” (CPU < 1.5 GHz);
  • сложный процессинг;
  • сверхвысокая производительность;
  • много потоков, работающих в фоновом режиме.

Обратите внимание: низкоуровневые библиотеки, включая различные SDK с открытым кодом, остаются полностью нативными. Мы можем создавать собственные нативные модули, если нам хочется быть в более тесном контакте с “железом”.

Почему мы переходим на React Native именно сейчас?


У нас есть 3 главных причины:

  1. После приобретения маркетплейса Tictail (сервис разработан на React Native, по принципу mobile first) в 2018 году мы увидели, какое развитие получил React Native и в 2019 году мы вложились еще в три проекта.
  2. Shopify активно использует React в web-разработке, теперь настало время применить наши ноу-хау и в разработке мобильных приложений.
  3. Мы заметили, что кривая производительности поползла вверх (например, что мог раньше, и что теперь может Google Docs в сравнении с десктопным Microsoft Office) и сделали ставку на React Native в долгосрочной перспективе — так же, как в свое время мы поверили в Ruby on Rails, Kubernetes и Rich Media.

Мобильная разработка в Shopify в 2019


В Shopify продавцы и покупатели могут взаимодействовать несколькими способами: через web- и через мобильные приложения. Весь прошлый год три наших команды занимались экспериментами с React Native, и в результате разработали три мобильных приложения: Arrive, Point of Sale и Compass.

После наших экспериментов мы сделали следующие выводы:

  • переписывая Arrive app на React Native, команда обнаружила, что продуктивность работы выросла в два раза по сравнению с нативной разработкой, даже если писать только под одну платформу;
  • тестируя Android-версию Point of Sale app на малых мощностях, мы обнаружили, что приложение работает при более низкой частоте CPU: 1.5GHz (написано на React Native) против 2GHz (нативная разработка);
  • мы предварительно оценивали, что доля платформо-независимого кода составит ~80%; и мы были удивлены, когда в реальности она оказалась намного выше: 95% для Arrive и 99% для Compass.

Но стоит оговориться: хотя мы приняли решение писать новые приложения на React Native, это не означает, что мы будем переписывать все наши старые приложения.

Arrive


В конце 2018 года мы решили переписать на React Native одно из наших самых популярных клиентских приложений, Arrive. Это высокопроизводительное iOS-приложение с высоким рейтингом и миллионами скачиваний. Мы выбрали Arrive, потому что у нас не было его Android-версии. Таким образом мы пошли навстречу пользователям Android-устройств. Теперь и iOS-, и Android-версия написаны на React Native с долей общего кроссплатформенного кода в 95%.

В процессе переписывания мы добились следующих результатов:

  • при работе кроссплатформенной версии для iOS происходит меньше сбоев, чем в нативной версии;
  • мы запустили версию для Android OS;
  • над проектом смогли потрудиться как мобильные, так и не-мобильные разработчики.

Кроме того, команда смогла опробовать отличный метод быстрого выполнения pull-запросов “work-in-progress”. Просто сканируете QR-код из комментария Github с помощью телефона, и JS bundle вашего приложения обновляется. Таким образом вы каждый раз можете моментально обновлять приложение и использовать его актуальную версию. Наш СТО недавно описал этот процесс в Твиттере.

Point of Sale


В начале 2019 года мы провели 6-недельный эксперимент над нашим флагманским продуктом Point of Sale (POS) app, чтобы понять, является ли он хорошим кандидатом для переписывания на React Native. Мы много изучали этот вопрос, так как наши розничные продавцы рассчитывали, что нам удастся вдвое сократить время отклика нашего приложения: процесс обслуживания покупателей с помощью нашего приложения должен закрепиться в мышечной памяти продавцов, и они не должны отвлекаться на это.

Чтобы одновременно выполнить требования наших ритейлеров и глубже разобраться в разработке на React Native для POS-устройств, мы решили создать новое нативное мобильное приложение для iOS, а на React Native написать версию для Android OS.

Мы выделили на эти задачи две отдельные команды, и вот почему:

  1. У нас уже была команда с сильной экспертизой в iOS, включая разработчиков нативных POS-приложений.
  2. Мы хотели иметь возможность кроме непосредственной производительности приложения протестировать еще и нашу скорость разработки на React Native, сравнивая все это с нашим золотым стандартом, то есть с нативной разработкой под iOS.
  3. Чтобы выполнить высокие требования продавцов к производительности, мы решили произвести все обновления Facebook re-architecture updates to React Native (однако оказалось, что для производительности это не критично). Выделив отдельные команды для работы над двумя проектами, мы снизили риски, связанные со срывом плана релизов.

Мы анонсировали переписанный POS на конференции Unite 2019. Обе версии, iOS и Android на React Native, будут доступны в 2020 году.

Compass


В Spotify есть команда (Start team), которая помогает клиентам запускать собственный бизнес. Прежде чем, компания приняла принципиальное решение разрабатывать мобильные приложения на React Native, эта команда детально изучала Flutter and React Native. Выбор пал на React Native, и теперь у них есть бета-версии iOS — и Android-приложения Compass. Причем, ~99% кода у них общие.

Первые релизы выйдут в течение трех месяцев.

Мобильная разработка в Shopify 2020++


Мы много интересного приготовили на 2020 год.
Будем ли мы переписывать наши нативные мобильные приложения? Нет. Хотя это решение каждая команда принимает самостоятельно.
Будем ли мы нанимать нативных разработчиков? Да, много!
Мы хотим стать ведущими участниками сообщества React Native, создавать платформо-зависимые компоненты и продолжать разбираться в тонкостях каждой из платформ. А это требует сильной экспертизы. Звучит неплохо, правда?

Сотрудничество и Open Source


Мы верим, что разработка софта — это командная игра. Мы участвуем в разработке open web, open source и других открытых стандартов.

Мы вносим свой вклад в финансирование проектов компании Software Mansion и Кшиштофа Магеры (сооснователь React Native для Android), связанных с React Native.
Мы сотрудничаем с Уильямом Кэндильоном (ведет YouTube-канал Can It Be Done in React Native) по вопросам построения архитектуры и улучшения производительности.

У нас в планах тесное сотрудничество с командой React Native из Facebook по вопросам автоматизации, создания сторонних библиотек и курирования некоторых модулей в проекте Lean Core.

Вместе с компанией Discord мы активно работаем над тем, чтобы быстрее подготовить open source версию библиотеки FastList for React Native (позволяет рендерить только те элементы списка, которые находятся в видимой области) и оптимизировать её под Android OS.

Наши команды Tooling и Foundations для React Native


Когда вы делаете ставку на технологию и углубляетесь в неё, вы хотите получить от неё максимальный эффект. Для того, чтобы быстро ставить задачи и добиваться этой цели, мы создали два типа команд, которые помогают остальным сотрудникам Shopify быть продуктивными. Первый тип — это инструментальная группа (tooling team), которая помогает с конфигурированием, интеграцией и развертыванием. Второй тип — это команда разработчиков (foundation team), которая занимается SDK, повторным использованием кода и open source. В 2020 году обе команды начали развиваться в сторону React Native.

Наше популярное приложение Shopify Ping, которое позволяет общаться с сотнями тысяч клиентов, в настоящее время доступно только в iOS-версии. В 2020 году мы будем работать над версией для Android OS с использованием React Native в нашем филиале в Сан-Франциско, куда мы как раз нанимаем сотрудников.

В 2019 году Twitter выпустил десктопные и мобильные веб-приложения, используя технологию под названием React Native Web. Название может немного сбить вас с толку, но её главное отличие состоит в том, что эта технология позволяет использовать тот же стек React Native для разработки веб-приложений. В результате Facebook незамедлительно схантил Николаса Галлагера, ведущего разработчика проекта. В 2020 году мы в Shopify также проведем несколько экспериментов с React Native Web.

VDSina.ru — хостинг серверов
Серверы в Москве и Амстердаме

Комментарии 0

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое