Гайд по кроссплатформенной разработке с использованием React Native

Начнем, пожалуй, с азов. Что есть кроссплатформенная разработка? Такая, которая не требует от вас знаний нативного кода и позволяет одному разработчику делать сразу два приложения. «Вау! Круто!» — скажет любой предприниматель, смекнув, что может нехило сэкономить. Но так ли это на самом деле? Давайте разберемся.

Лет 7 назад наш техлид разглядел в только что появившемся React Native (RN) огромный потенциал. Поэтому с его легкой руки мы начали делать кроссплатформенные приложения на нем, когда это еще не было мейнстримом.

С тех пор фреймворк зарекомендовал себя как один из наиболее перспективных инструментов для разработки. Он был создан Facebook (Meta), чтобы писать нативные мобильные приложения для iOS и Android при помощи JavaScript.

Чтобы не быть голословными о его популярности, покозыряем именами: Facebook, Instagram, Bloomberg, Airbnb, Tesla, SoundCloud Pulse, UberEATS и Shopify написаны на React Native. Какие же у него сильные стороны?

Один код для двух приложений

RN позволяет создавать приложения как для iOS, так и для Android, используя один и тот же код. Это значительно сокращает время и расходы на разработку, так как отпадает необходимость в разработке приложения и новых фичей под каждую отдельную платформу.

Обновления в режиме реального времени

Разработка на RN дает нам возможность использовать «hot reloading». Это фича, которая позволяет разработчикам видеть изменения в коде в режиме реального времени, не останавливая приложение. Таким образом, вы не потеряете состояние приложения, что особенно полезно при редактировании пользовательского интерфейса. Это ускоряет процесс разработки и делает его более итеративным.

Большое сообщество

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

Например, в одном из приложений нам понадобился функционал добавления карты лояльности в Apple Walle и обнаружили, что библиотеки со всеми необходимыми нам функциями, — нет. В другом приложении у нас был функционал регистрации по номеру телефона с большим количеством поддерживаемых стран, и мы захотели сразу подставлять нужную маску для пользователя, в зависимости от его региона (без запроса к его геопозиции!).

Поэтому создали и выложили собственные библиотеки в открытый доступ.

Библиотека №1 позволяет получать настройки местоположения устройства без использования GPS-трекера или с помощью телефонии (SIM-карты) (только для Android).

Библиотека №2 предоставляет некоторые функции Apple Wallet, такие как добавление пассивов, удаление пассивов и проверка карт и билетов на существование.

Низкий порог входа

React Native работает на базе фреймворка React, который является простой и популярной технологией. Это означает, что разработчикам с опытом работы с React будет легко начать работу с RN. React Native позволяет разработчикам использовать набор компонентов пользовательского интерфейса для быстрой компиляции и запуска приложений для iOS и Android.

Мы не склонны к идеализации и за годы работы нашли и приняли и недостатки выбранного фреймворка. Рассказываем о них.

Ограниченный доступ к нативным функциям

RN поддерживает не все функции, доступные на платформах iOS и Android. Это означает, что разработчикам может потребоваться написать нативный код для реализации некоторых функций.

Производительность

RN приложения могут быть не такими производительными, как нативные приложения. Это связано с тем, что RN приложения используют bridge для доступа к нативным API. Нативные приложения имеют преимущество в оптимизации ресурсов и управлении памятью.

Зависимость от сторонних библиотек

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

React Native идеально подходит для следующих сценариев:

MVP

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

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

На React Native MVP приложения было создано одним разработчиком за 1,5 месяца. Клиент планирует развивать проект дальше, а RN позволит легко масштабировать его по мере роста пользовательской базы и добавления новых функций.

Проекты со стандартным интерфейсом

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

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

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

Приложения с частыми обновлениями

Если ваше приложение требует регулярного обновления контента или функциональности, React Native облегчает и ускоряет этот процесс благодаря Over-the-air updates.

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

Стартапы и проекты с ограниченным бюджетом

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

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

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

Eсли у вас уже есть/планируется веб-сайт, разработанный на React

Абсолютно логично выбрать React Native в таких случаях, потому что можно будет переиспользовать код и ресурсы между платформами, благодаря общему языку программирования (JavaScript) и схожим паттернами разработки. Это позволит сократить затраты и время на разработку, а также гарантировать согласованность и единообразие пользовательского опыта на всех платформах.

Мы юзали React Native вместе с React для разработки мобильных приложений и веб-версии крупного маркетплейса одежды. Так механизм регистрации и аутентификации использовал общие API для обработки данных пользователя и сессий. Это обеспечило безопасный и удобный доступ к аккаунтам как через веб, так и через мобильные приложения.

Может сложиться ощущение, что RN подходит только для «простых проектов». Однако это не так. Он предоставляет мощные возможности для создания сложных анимаций и использования нативных элементов платформы, что делает его подходящим инструментом даже для приложений с высокими требованиями к графике и интерфейсу.

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

Высокопроизводительные игры

Для разработки сложных игр или приложений с интенсивной графикой, требующих максимальной производительности аппаратного обеспечения, лучше подойдут специализированные игровые движки, такие как Unity или Unreal Engine.

Сложные многофункциональные приложения с глубокой интеграцией с платформой

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

Приложения, требующие экстремальной оптимизации

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

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

Поддержка от Facebook (Meta) и сообщества

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

Улучшение производительности и совместимости

Это происходит через различные инициативы, такие как архитектурный рефакторинг (например, проект Fabric). Он направлен на улучшение отзывчивости и работоспособности приложений, а также на более глубокую интеграцию с нативными платформами.

Расширение экосистемы и инструментов

С ростом популярности React Native экосистема вокруг фреймворка также растет, появляются новые инструменты, библиотеки и плагины, которые упрощают разработку и тестирование приложений, а также расширяют возможности разработчиков.

Гибридная разработка и мультиплатформенные решения

Тренд на создание мультиплатформенных приложений, способных работать как на мобильных устройствах, так и в вебе, продолжает набирать обороты. React Native, с его возможностью переиспользования кода и интеграции с React для веб-разработки, остается в авангарде этого направления. Кроме того, разработчики RN работают над возможностью поддержки десктопных приложений.

Мы поделились, почему когда-то выбрали React Native и продолжаем быть ему верны. Объяснили преимущества кроссплатформенной разработки в целом (тут ведь уже не так важно, какой фреймворк вы юзаете). Не стали скрывать от вас различные недостатки и минусы. Ну а если вам было мало примеров, посмотрите наши кейсы и сравните с проектом, который собираетесь создавать вы. Если у вас остались вопросы, задайте их нам в соцсетях или через форму обратной связи. До новых встреч!