Фреймворк React Native радикально изменил процесс разработки мобильных приложений, особенно после создания таких гибридных мобильных приложений, как Phone-gap, Ionichas и т.д.
Однако набора компонентов React Native вам будет недостаточно, если вы нацелены на разработку масштабируемого и обслуживаемого продакшн приложения. В этом случае вы столкнетесь с необходимостью создания проекта с различными широко применяемыми пакетами npm, разработанными крутым сообществом свободного программного обеспечения, и тем самым ускорите процесс разработки приложения.
В этой статье мы рассмотрим различные библиотеки и инструменты, на которые вам стоит обратить внимание при создании очередного приложения на React Native. Надеюсь, что материал статьи поможет вам сделать правильный выбор на разных этапах разработки.
1. Базовый фреймворк React Native
На официальном сайте React Native предлагается два способа установки фреймворка — Expo CLI и React Native CLI. Рассмотрим достоинства и недостатки каждого из них.
Expo CLI
+позволяетбыстро приступить к написанию первого экрана; +обеспечивает быструю дистрибуцию, а также установку приложения;
+отлично подходит для демо и PoC (проверки практической реализуемости) приложений;
— увеличивает размер приложения на 20–25 MB;
— не рекомендован для долгосрочных проектов;
— требует перенастройки конфигурации Expo для написания нативного кода.
React Native CLI
+легко добавляетнативный код Android and iOS;
— предназначен только для широко масштабируемых приложений;
— есть сложности в распространении и установке приложения;
— требует Mac для iOS разработок.
2. Статическая типизация
Как JavaScript разработчик, я постепенно начинаю склоняться к строгой типизации при написании кода. Проверка статических типов помогает выявлять ошибки на этапе разработки и повышает читаемость кода. Для проверки типов можно использовать TypeScript или Flow, у каждого из которых есть свои особенности.
TypeScript
TypeScript — это язык программирования c открытым исходным кодом, являющийся расширенной строгой синтаксической версией JavaScript.
+очень популярен в сообществе программистов и широко используется в бэкенд и фронтенд разработках таких, как NodeJs, Angular 2+, VueJs и др;
+ быстрее, чем Flow;
— имеет ограничения в поддержке React.
Flow
Flow не является языком программирования, но представляет собой статический модуль проверки типов для JavaScript.
+отлично поддерживает React;
— Facebook переходит к использованию TypeScript вместо Flow;
— имеет небольшое сообщество разработчиков;
— плохая документация.
3. Клиенты HTTP запросов
На одном из этапов разработки вашему приложению необходимо будет выполнить запрос к API, для чего нам и потребуется HTTP клиент. Рассмотрим преимущества и недостатки HTTP клиентов таких, как Axios и Graphql Appolo client.
Axios
+проверенный временем и классический способ формирования запросов;
-потребуется отдельная библиотека для использования GraphQL APIs.
Graphql Appolo client
+ использует один клиент для REST APIs и Graphql APIs;
+ по умолчанию помогает в кэшировании данных;
— не часто используется в продакшне.
4. Управление переиспользуемыми UI компонентами
Если вы ищите способ повторного использования вашего кода, создания простой в обслуживании кодовой базы и сохранения согласованного UI, то начинайте пользоваться хабами облачных компонентов, например, Bit.dev.
Bit.dev
+постоянно публикует компоненты из любой кодовой базы;
+легко устанавливает компоненты в любой репозиторий;
+документирует и структурирует все компоненты в одном месте;
+отлично поддерживает React Native.
5. Настройка модульного тестирования
Модульное тестирование — важное условие для стабильной работы приложения. В качестве инструментов его проведения рассмотрим Jest и Enzyme.
Jest и enzyme
+являются простыми фреймворками для тестирования;
+поддерживают TypeScript, Node, React, Angular и Vue;
+содержат фреймворки тестовых макетов;
+имеют огромное сообщество разработчиков.
6. Способы управления состояниями
В процессе разработки крупного или долгосрочного приложения вам не обойтись без четкой стратегии управления состояниями и обменом данных между компонентами.
Redux
+является функционально разносторонним шаблоном, проверенным на стадии продакшна;
+очень популярна в среде разработчиков;
+ предоставляет возможность двигаться по ходу разработки и отладки приложения в обратном направлении (Time Travel Debugging);
— уступает в производительности другим библиотекам управления состояниями, таким как Mobx.
Mobx
+обладает повышенной производительностью;
— уступает Redux в масштабируемости;
— не предназначена для крупных и сложных приложений.
Хуки и Context API
Отметим, что Redux использует внутри Context API , который по началу носил экспериментальный характер и был добавлен в React 16.4 для продакшна. Использование хуков React и React Context API позволит не зависеть от библиотеки и уменьшить размер приложения. При работе с хуками React и React Context API:
+отсутствует необходимость добавлять новую библиотеку, что позволяет уменьшить размер приложения;
— требуется планирование и стандартное соглашение всех разработчиков, работающих над приложением.
7. Навигация
При наличии более двух экранов, вам понадобится определить маршрут и навигацию, которые были бы масштабируемыми и простыми в обслуживании. В этом случае вам поможет навигация React.
Навигация React
+имеет огромное сообщество;
+в большинстве случаев используется для маршрутизации на основе имен, передачи данных из маршрутов, навигации по вкладкам, аутентификации потоков, глубоких ссылок и аналитических триггеров и т.д.;
+позволяет использовать предустановленные react-хуки навигации.
8. Создание форм
В процессе разработки приложений в React определенную сложность представляет написание форм, с чем я сам не раз сталкивался по ходу работы. Вот почему нам нужен более простой и удобный способ создания форм. Предлагаю рассмотреть следующие варианты:
Formik
+имеет огромное сообщество;
— уступает в производительности react-hook-form.
React-hook-form
+превосходит в производительности Formik;
+ поддерживает хуки, простая и удобная библиотека для разработок.
— имеет небольшое сообщество.
9. Загрузчик конфигураций
Разрабатывая крупные и сложные приложения, мы стремимся сделать их переносимыми на разные устройства, масштабируемыми и способными к непрерывному развертыванию. В связи с этим возникает потребность в хорошем фреймворке для установки конфигураций, примером которого может быть react-native-config.
10. Интернационализация приложений (i18n)
React Context API
+использует контекстное API React;
+прост в использовании;
— требует пользовательской реализации для использования разнообразных функций, таких как множественное число и контекст (например, мужской/женский род).
React i18 next
+широко используется и имеет крупное сообщество;
+содержит разнообразные функции, такие как множественное число и контекст (например, мужской/женский род);
-являясь внешним пакетом, увеличивает размер приложения по сравнению с Context API.
11. Динамическое обновление приложения
React Native спроектирован таким образом, что позволяет исправить ошибку или отправить обновление сразу к пользователю, минуя долгий цикл упаковки, выпуск в App Store и обновление приложения пользователя. Для динамического обновления приложений можно использовать Microsoft code push.
12. Аналитика
Аналитика — важный способ отслеживать и контролировать поведение покупателей. На мой взгляд, для большинства основных ситуаций подойдет Firebase google analytics. Если вам нужна поддержка или помощь в решении таких вопросов, как анализ рекламы и ее охват или анализ маркетинговой коммуникации, то можно использовать Clever tap, Appsflyer или mix panel. Для работы с ними нужна платная лицензия.
13. Crashlytics
Firebase Crashlytics
Самый известный инструмент сервиса аналитики мобильных приложений Fabric объединился с Google и стал известен как Firebase Crashlytics. Он бесплатный и предоставляет полный отчет о сбоях. Firebase Crashlytics также интегрируется с корпоративным менеджером Slack, так что вы можете получать уведомления о сбоях в режиме реального времени.
14. Платформы распространения бета-версий приложений
В большинстве случаев необходимо распространить приложение для увеличения числа команды разработчиков или клиентов, чтобы таким образом получить обратную связь перед фактическим опубликованием приложения в App Store. Вы можете воспользоваться функционалом таких платформ, как Firebase, App Center и Testfairy.
Firebase
+бесплатная платформа;
+идет совместно с пакетом Google сервисов, таких как Crashlytics, Analytics, OCR др;
-требует много времени на настройку и публикацию приложения;
— находится на стадии бета-версии.
App Center
+предоставляет бесплатное распространение и идет совместно с Crashlytics и Analytics;
— требует терпения для настройки и публикации приложения.
Testfairy
+нацелена на предприятия с поддержкой;
+предлагает оригинальные функции, такие как встряхивание устройства для получения отчета об ошибке и создания тикета в Jira;
+предоставляет автоматическую запись видео того пользовательского потока, который ведет к сбою/ошибке;
— требует покупки лицензии.
15. Автоматическое подписывание и публикация приложений
На этапе распространения и публикации приложения любой крупной команде разработчиков следует автоматизировать этот процесс для экономии времени и предотвращения ошибки. Рассмотрим следующие варианты:
Автоматизированные конвейеры сборки
Для подписания и создания файлов apk и ipa можно использовать Fastlane. Публикация приложений может осуществляться на одной из платформ, упомянутых в предыдущем разделе.
+ контролируется и снижает затраты;
— требует много времени на настройку;
— требует особых навыков и знаний для настройки от начала до конца (end to end);
— для создания файлов ipa требует запустить линию сборки на Circle ci или Travis ci. В качестве альтернативы для этого вы можете сделать хостом ваш собственный Mac mini.
Bitrise
Это один из самых легких и быстрых способов создания и публикации приложений.
+отличается быстрой настройкой;
+полноценно интегрируется с Firebase, Slack и другими платформами;
+Fastlane;
+предполагает комплексный подход при создании приложений для Android или iOS;
-требует платной лицензии.
Надеюсь, что материал этой статьи был для вас полезным.
Продолжайте обучаться и Reactировать:)
Читайте также:
- Сможет ли Vue.js превзойти React в 2020 году?
- Конец эпохи виртуального DOM (React)
- Первые шаги в анимации React Native
Перевод статьи Mahesh Haldar: 15 Things to Consider When Setting Up a React Native App.
