Вот мои любимые хаки для создания программ уровня производства с помощью React Native

vot moi lyubimye haki dlya sozdaniya programm urovnya proizvodstva s

Поверьте мне, когда я говорю это, React Native тяжело. И это не просто тяжелое из того, что мы считаем тяжелым. Вообще с этим тяжело работать. В этой публикации блога я расскажу некоторые советы и приемы, а также лучшие методы, которые я применил для одной из своих программ, закодированных в React Native: проклятый Android (или проклятый iOS).

Привет! Меня зовут Мехул. Я студент, ютубер, разработчик fullstack, разработчик приложений и тоже могу развертывать серверы. Недавно я решил запустить платформу, ориентированную на разработчиков (вы догадались, проклятый). Чтобы быстро начать работу на мобильных устройствах, я использовал React Native. Отчасти потому, что сейчас я не большой поклонник Swift и Xcode. Но я мало знал, что буду больше взаимодействовать с родным кодом, чем думал. Во всяком случае, начнем с информации, которую я хочу упомянуть.

Примечание: React Native на момент написания этой статьи был в версии 0.57-rc4. Убедитесь, что некоторые вещи уже доступны/исправлены в последней версии React Native!

№0: Знай, что ты делаешь

Поймите, что мир React Native сейчас одинокий мир. Вы можете столкнуться с проблемой, с которой до сих пор никто не сталкивался (или вы не можете правильно ее найти в Google). Всегда держите VCS в курсе своего родного проекта и регулярно вносите изменения (все крутые дети называют это CI). Это помогает быстро вернуться к последней рабочей копии без потери большого количества кода.

Не менее важно знать, что вы делаете. Вы можете полностью сломать свой проект, если вы не знаете. Если вы не использовали VCS, значит у вас проблемы.

№1: Обновите свое АО

JSC (JavaScriptCore) – это движок JavaScript на основе веб-кита, который используется React Native на платформах Android для оценки вашего кода JavaScript. Не говорите мне, что вы думали, что React Native преобразует JavaScript в родной код. Это не так! 😉

Любой JS, который вы пишете, все еще выполняется как JavaScript только JSC на Android. Проблема в том, что React Native поставляет очень старую версию JSC. Это означает, что вам придется широко использовать преобразование babel. Иногда бывают такие неприятные ошибки, что вы тянете себя за волосы каждый раз, когда садитесь кодировать, по более старой версии JSC.

Я научился этому на тяжелом пути, потратив день на отладку. Между выполнением программы произошла неизвестная случайная роковая ошибка. Изучив журналы в течение длительного времени, я пришел к выводу, что приложение где-то выходит из строя [Symbol.iterator] используется в транспилированном коде JS от Babel.

Теперь Symbols – это вещь ES6. Babel не перемещал это дальше, а АО было настолько старо, что не выдержало таких простых вещей и разбилось. Я потерял почти день позади, чтобы понять, что обновление JSC было лучшим решением, чем другие нечеткие хаки.

Обновление вашего АД достаточно просто. Следуйте этому репозиторию github, и вы должны быть запущены в кратчайшие сроки.

№2: Настройте Redux правильно

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

ItiPqHDhW9zo-NBMXZkcy0CW2UvMXmrAyw18

Черт нет. Здесь мы говорим о программах корпоративного и производственного уровня. Сохраняйте состояние навигации в Redux и получите очень тонкий контроль над своим состоянием.

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

О Redux и его интеграции с навигацией реагирования читайте здесь.

№3: Используйте доступные инструменты автоматизации, такие как fastlane

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

Оформить fastlane можно здесь: https://fastlane.tools/

№4: Правильно обрабатывайте ошибки

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

Sentry доступен на https://sentry.io/

№5: Выполните отладку правильно!

Вы все еще используете эту модную консоль проверки Chrome для настройки своих программ React Native? А как насчет Redux? Еще одна вкладка? Что делать, если вы хотите очистить асинхронное хранилище программы? Принудительно остановить приложение и очистить данные? Кажется слишком утомительным, особенно когда вы активно разрабатываете приложение. Вместо этого используйте отдельный выделенный отладчик для нативного реагирования. Лучшая часть? Это бесплатно!

Вот ваш React Native отладчик: https://github.com/jhen0409/react-native-debugger

5 скорых советов:

  • Упорядочивайте структуру файлов. Очень важно масштабировать свою программу.
  • Избегайте использования expo для своих приложений. ПОЖАЛУЙСТА, НЕТ. Даже если вы воспользуетесь им, вы поймете, что в какой-то момент должны кататься, а затем удачи вам в решении всего беспорядка. Это не невозможно, позже это съест много вашего времени. Помните, что expo – это хорошо, но мы говорим о долгосрочных программах, связанных с бизнесом/запуском, а не о приложении для возраста кошек (для которого expo было бы хорошо).
  • Обязательно создайте файл package-lock.json (если используется npm). Вы пожалеете об этом позже, когда случайно удалите свою папку node_modules и поймете, что ни один пакет на npm не заботится о семантическом управлении версиями.
  • Не используйте слишком тяжелые библиотеки пользовательского интерфейса с React Native. Это замедляет производительность даже в производстве. В данный момент я не рекомендую NativeBase, хотя с точки зрения интерфейса он кажется очень изысканным. Это дорого по производительности. Есть гораздо лучшие варианты, например реагирующая нативная бумага.
    Спасибо Андре Билю за комментарий, пожалуйста, внимательно просмотрите эту страницу документа, если вы устали от медленных программ RN и/или их профилирования. Это золотой рудник: https://facebook.github.io/react-native/docs/performance.html
  • Воспользуйтесь преимуществами React Native, который заменяет пакет JS на лету, не пересылая приложение повторно в магазины приложений с помощью таких технологий, как CodePush.
  • Поймите, по крайней мере, основы родного кода на обеих платформах. В особенности файлы сборки на Android и файлы pod на iOS. Это некоторые файлы, на которые вы будете тратить большую часть своего времени на родной.

Я продолжу писать сообщения в блоге на React Native как серию сообщений, возможно, посмотрим!

Вопрос?

Спрашивайте в комментариях ниже! Я буду рад помочь.

Быстрая беззастенчивая розетка: Если вы начинаете работу с React Native, вот мой курс со скидкой 95% о том, как начать работу с React Native: React Native — первые шаги

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *