Гайд по кроссплатформенной разработке с использованием React Native
Начнем, пожалуй, с азов. Что есть кроссплатформенная разработка? Такая, которая не требует от вас знаний нативного кода и позволяет одному разработчику делать сразу два приложения. «Вау! Круто!» — скажет любой предприниматель, смекнув, что может нехило сэкономить. Но так ли это на самом деле? Давайте разберемся.
Лет 7 назад наш техлид разглядел в только что появившемся React Native (RN) огромный потенциал. Поэтому с его легкой руки мы начали делать кроссплатформенные приложения на нем, когда это еще не было мейнстримом.
С тех пор фреймворк зарекомендовал себя как один из наиболее перспективных инструментов для разработки. Он был создан Facebook (Meta), чтобы писать нативные мобильные приложения для iOS и Android при помощи JavaScript.
Чтобы не быть голословными о его популярности, покозыряем именами: Facebook, Instagram, Bloomberg, Airbnb, Tesla, SoundCloud Pulse, UberEATS и Shopify написаны на React Native. Какие же у него сильные стороны?
Преимущества использования React Native
Один код для двух приложений
RN позволяет создавать приложения как для iOS, так и для Android, используя один и тот же код. Это значительно сокращает время и расходы на разработку, так как отпадает необходимость в разработке приложения и новых фичей под каждую отдельную платформу.
Обновления в режиме реального времени
Разработка на RN дает нам возможность использовать «hot reloading». Это фича, которая позволяет разработчикам видеть изменения в коде в режиме реального времени, не останавливая приложение. Таким образом, вы не потеряете состояние приложения, что особенно полезно при редактировании пользовательского интерфейса. Это ускоряет процесс разработки и делает его более итеративным.
Большое сообщество
RN имеет активное сообщество разработчиков по всему миру, что влечет за собой наличие множества библиотек, инструментов и ресурсов, которые могут помочь разработчикам в создании своих приложений и решении сложных задач. Также, стоит отметить, что Meta позволяет и приветствует внесение изменений и поддержку нативных технологий в самом React Native.
Например, в одном из приложений нам понадобился функционал добавления карты лояльности в Apple Wallet и обнаружили, что библиотеки со всеми необходимыми нам функциями, — нет. В другом приложении у нас был функционал регистрации по номеру телефона с большим количеством поддерживаемых стран, и мы захотели сразу подставлять нужную маску для пользователя, в зависимости от его региона (без запроса к его геопозиции!).
Поэтому создали и выложили собственные библиотеки в открытый доступ.
Библиотека №1 позволяет получать настройки местоположения устройства без использования GPS-трекера или с помощью телефонии (SIM-карты) (только для Android).
Библиотека №2 предоставляет некоторые функции Apple Wallet, такие как добавление пассивов, удаление пассивов и проверка карт и билетов на существование.
Низкий порог входа
React Native работает на базе фреймворка React, который является простой и популярной технологией. Это означает, что разработчикам с опытом работы с React будет легко начать работу с RN. React Native позволяет разработчикам использовать набор компонентов пользовательского интерфейса для быстрой компиляции и запуска приложений для iOS и Android.
Недостатки использования React Native
Мы не склонны к идеализации и за годы работы нашли и приняли и недостатки выбранного фреймворка. Рассказываем о них.
Ограниченный доступ к нативным функциям
RN поддерживает не все функции, доступные на платформах iOS и Android. Это означает, что разработчикам может потребоваться написать нативный код для реализации некоторых функций.
Производительность
RN приложения могут быть не такими производительными, как нативные приложения. Это связано с тем, что RN приложения используют bridge для доступа к нативным API. Нативные приложения имеют преимущество в оптимизации ресурсов и управлении памятью.
Зависимость от сторонних библиотек
Зависимость от сторонних библиотек в React Native может привести к проблемам с обновлениями и совместимостью, поскольку библиотеки могут не поддерживаться их создателями на должном уровне. Кроме того, разработчики могут столкнуться с проблемами при интеграции и поддержке кода, что потребует дополнительных усилий для обеспечения стабильности приложения.
Когда стоит использовать 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, минимизировав неудобства для пользователей.
Приложение Easystyle
Стартапы и проекты с ограниченным бюджетом
Для стартапов и проектов, где важно быстро выйти на рынок с минимальными затратами, React Native позволяет одновременно разрабатывать приложения для основных платформ без необходимости нанимать отдельные команды разработчиков для каждой платформы.
Выбор React Native для разработки фудтех приложения с программой лояльности позволил реализовать богатый функционал и не выйти из достаточно ограниченного бюджета.
Приложение John Dory
React Native имеет обширную экосистему с множеством готовых компонентов и библиотек для обеих платформ. Именно их мы и использовали, чтобы быстро реализовать сложные функции. Например, чаты или система уведомлений.
Eсли у вас уже есть/планируется веб-сайт, разработанный на React
Абсолютно логично выбрать React Native в таких случаях, потому что можно будет переиспользовать код и ресурсы между платформами, благодаря общему языку программирования (JavaScript) и схожим паттернами разработки. Это позволит сократить затраты и время на разработку, а также гарантировать согласованность и единообразие пользовательского опыта на всех платформах.
Мы юзали React Native вместе с React для разработки мобильных приложений и веб-версии крупного маркетплейса одежды. Так механизм регистрации и аутентификации использовал общие API для обработки данных пользователя и сессий. Это обеспечило безопасный и удобный доступ к аккаунтам как через веб, так и через мобильные приложения.
Может сложиться ощущение, что RN подходит только для «простых проектов». Однако это не так. Он предоставляет мощные возможности для создания сложных анимаций и использования нативных элементов платформы, что делает его подходящим инструментом даже для приложений с высокими требованиями к графике и интерфейсу.
Благодаря React Native в разных проектах мы могли создавать сложные и интерактивные элементы, такие как плавные кастомные анимации, графический ключ, интерактивные графики и диаграммы, кастомные аудио и видео плееры, а также комплексные формы с удобной валидацией.
Когда не стоит использовать React Native
Высокопроизводительные игры
Для разработки сложных игр или приложений с интенсивной графикой, требующих максимальной производительности аппаратного обеспечения, лучше подойдут специализированные игровые движки, такие как Unity или Unreal Engine.
Сложные многофункциональные приложения с глубокой интеграцией с платформой
Если приложение требует глубокой интеграции с операционной системой или использования специфичных для платформы возможностей, лучше использовать нативный подход. Потому что с помощью React Native реализовать это будет сложно или неэффективно.
Приложения, требующие экстремальной оптимизации
В ситуациях, когда критически важна каждая миллисекунда отклика или используется сложная обработка данных в реальном времени, нативная разработка предоставляет больше контроля и возможностей для оптимизации.
Будущее React Native
Почему мы продолжаем вот уже столько лет писать на React Native, хоть нас и неоднократно пытались соблазнить другими фреймворками?
Поддержка от Facebook (Meta) и сообщества
Meta продолжает активно инвестировать в его развитие. Благодаря большому сообществу разработчиков, фреймворк постоянно обновляется и улучшается: исправляют ошибки, добавляют новые функции и улучшают производительность.
Улучшение производительности и совместимости
Это происходит через различные инициативы, такие как архитектурный рефакторинг (например, проект Fabric). Он направлен на улучшение отзывчивости и работоспособности приложений, а также на более глубокую интеграцию с нативными платформами.
Расширение экосистемы и инструментов
С ростом популярности React Native экосистема вокруг фреймворка также растет, появляются новые инструменты, библиотеки и плагины, которые упрощают разработку и тестирование приложений, а также расширяют возможности разработчиков.
Гибридная разработка и мультиплатформенные решения
Тренд на создание мультиплатформенных приложений, способных работать как на мобильных устройствах, так и в вебе, продолжает набирать обороты. React Native, с его возможностью переиспользования кода и интеграции с React для веб-разработки, остается в авангарде этого направления. Кроме того, разработчики RN работают над возможностью поддержки десктопных приложений.
Заключение
Мы поделились, почему когда-то выбрали React Native и продолжаем быть ему верны. Объяснили преимущества кроссплатформенной разработки в целом (тут ведь уже не так важно, какой фреймворк вы юзаете). Не стали скрывать от вас различные недостатки и минусы. Ну, а если вам было мало примеров, посмотрите наши кейсы и сравните с проектом, который собираетесь создавать вы. Если у вас остались вопросы, задайте их нам в чате. До новых встреч!
