Фишки React Native для реализации личного кабинета

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

Создаем мобильный кабинет на React Native: задачи и их реализация

Задача 1. Реализация сложной функциональности и бизнес-логики приложения

По сути, React Native – фреймворк для рендеринга пользовательского интерфейса. Поэтому для реализации сложной функциональности, а именно:

• параллельного запроса данных из различных источников,
• своевременного получения данных компонентами,
• минимизации трафика,
• оптимизации построения бизнес-логики в приложении,

– могут потребоваться дополнительные библиотеки, как например, RxJS и GraphQL.

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

Главный экран в нашем приложении состоит из набора виджетов: например, история звонков, их аналитика, записи разговоров и др. Активными при этом могут быть сразу 8 виджетов, и для каждого из них нужна только небольшая часть данных. Если бы мы использовали REST API, у нас бы не было возможности выборочного получения необходимых полей данных: приложению пришлось бы получать все данные для каждого виджета и затем самостоятельно выполнять сортировку и преобразование в нужный формат. Это могло бы привести к увеличению времени обработки запросов и ухудшению производительности.

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

Совместное использование RxJS и GraphQL предоставляет мощные возможности управления данными и потоками в приложении. RxJS используется для подписки на новые данные при обновлении компонента или переходе на новый экран. Это позволяет моментально отображать изменения данных и обновлять пользовательский интерфейс. GraphQL при этом обеспечивает скорость и производительность.

Задача 2. Фоновое прослушивание аудиозаписей

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

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

А ещё React Native Track Player удобен для разработки на всех платформах, так как в его основе используются нативные языки – С++, Kotlin, Swift, Objective-C. Поэтому наше мобильное приложение беспрепятственно взаимодействует с плеером в фоновом режиме, а управление из статус-бара (строки состояния) и на заблокированном экране функционально и удобно для пользователя.

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

Задача 3. Построение графиков отчетов

Задача – нужно реализовать специфический функционал, а уже существующие в сообществе React Native решения не подходят для этого. Если в команде есть специалисты с навыками нативной разработки, то можно легко реализовать собственные модули с помощью механизма Bridge. Он позволяет связывать нативный код, написанный на Java или Objective-C/Swift, с кодом на JavaScript. Bridge в React Native обеспечивает коммуникацию между JavaScript и нативным кодом, который выполняется на уровне операционной системы.

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

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

С минимумом усилий мы решили несколько проблем:

• Гибкость и настраиваемость. Наша библиотека позволяет полностью настроить внешний вид графиков, чтобы они соответствовали дизайну и требованиям проекта. Есть возможность контролировать цвета, формы, шрифты и другие атрибуты, чтобы создавать уникальные и стильные графики, идеально сочетающиеся с общим внешним видом приложения.
• Динамические возможности. При изменении или поступлении новых данных графики обновляются в режиме реального времени – пользователи мониторят изменения и делают выводы на основе актуальных данных.
• Поддержка сложных данных. Мы можем работать с различными типами данных, включая числовые значения, временные ряды и категориальные данные. При этом отображаем графики различных типов: столбчатые, круговые, линейные. Благодаря этому они легко читаются. Вместе с динамическими возможностями это дает пользователям возможность исследовать детали отчетов с разных углов.

React Native: за и против

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

Сокращение времени разработки. Разработка на React Native осуществляется модульно, приложение фактически собирается из отдельных «кирпичиков». Различные модули адаптируются и интегрируются между собой. Это позволяет тратить меньше времени на разработку – снижать ее стоимость – и быстрее получать пользу от выхода на рынок. Особенно это важно при создании MVP.

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

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

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

Гибкость и масштабируемость. React Native позволяет легко вносить изменения в приложение и масштабировать его по мере необходимости. Полезно при проверке гипотез, создании MVP – когда требования и функциональность приложения могут меняться в соответствии с потребностями клиентов.

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

Как и у любого другого решения, у React Native есть недостатки, которые следует учитывать. Приведем основные.

Ограничения производительности. В силу своей архитектуры и философии React Native предлагает большую гибкость и удобство для работы. Но при неоптимальной разработке это может привести к некоторым «накладным расходам» в виде медленной работы и увеличенного потребления ресурсов. Это происходит из-за способа передачи данных между нативным кодом и JS через Bridge. Стоит отметить, положение дел стало лучше с выходом React Native 0.68 и началом перехода на новую архитектуру JavaScript Interface (JSI). JSI – замена для Bridge. С её помощью можно напрямую взаимодействовать с нативными модулями, избегая накладных расходов на пересылку сообщений.

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

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

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

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

Инструменты ускорения разработки на React Native

1. Непрерывная интеграция и доставка (CI/CD)

CI/CD-подход автоматизирует процессы сборки, тестирования и доставки приложений. Он позволяет разработчикам интегрировать код в общую кодовую базу и автоматически запускать тесты для обнаружения ошибок на ранних этапах. После успешной сборки приложение автоматически доставляется на целевые устройства или маркетплейсы, что значительно ускоряет время выхода на рынок.

2. Автотестирование

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

3. End-to-End тестирование (E2E) с использованием Detox

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

4. Эффективные инструменты отладки

Использование мощных инструментов отладки, таких как React Native Debugger или интегрированные среды разработки (IDE) с поддержкой отладки, помогает разработчикам быстро и точно находить и исправлять ошибки в коде приложения. Они предоставляют возможности для анализа состояния приложения.

5. React Native Expo

Если появилась потребность быстро проверить какую-то гипотезу или провести демо, можно воспользоваться React Native Expo. Это инструмент, основанный на React Native. С ним проще разрабатывать и тестировать мобильные приложения – он содержит набор готовых компонентов и API, которые позволяют создавать приложения для iOS и Android без необходимости настройки окружения разработки.  Expo имеет огромное множество плагинов и интеграций: например, firebase, admob, splash screen. Но если на проекте будет нужна сложная специфическая функциональность, возможностей Expo может не хватить. Тогда возникнет необходимость перейти к стандартной среде разработки React Native и настроить ее под свои требования.

Вместо вывода

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

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