Ето моите любими хакове за създаване на приложения за ниво на производство с React Native

Повярвайте ми, когато казвам това, React Native е трудно. И не е обичайното трудно от това, което смятаме за трудно. Трудно е да се работи по принцип. В тази публикация в блога ще разгледам някои съвети и трикове и в крайна сметка най-добрите практики, които използвам за едно от моите приложения, кодирани в React Native: codedamn Android (или codedamn iOS).

Бърз безсрамен щепсел: Ако започвате с React Native, ето моят 95% отстъпка от курса как да започнете с него: React Native - Първите стъпки

Здравейте! Казвам се Мехул. Аз съм студент, youtuber, fullstack разработчик, разработчик на приложения и мога да разгърна и сървъри. Наскоро реших да пусна платформа, ориентирана към разработчиците (добре се досетихте, кодедам). За да я сваля бързо от земята на мобилни устройства, отидох с React Native. Отчасти защото засега не съм голям фен на Swift и Xcode. Но малко знаех, че ще взаимодействам повече с нативния код, отколкото си мислех. Както и да е, нека започнем с информацията, която искам да спомена.

Забележка: По време на писането на тази статия React Native беше в v0.57-rc4. Проверете дали някои от нещата вече са налични / коригирани в скорошната версия на React Native!

# 0: Знайте какво правите

Осъзнайте, че Реактивният Роден свят в момента е самотен свят. Може да се натъкнете на проблем, с който никой не се е сблъсквал досега (или не можете да го google правилно). Винаги поддържайте VCS с вашия роден проект и редовно ангажирайте промените си (всички готини деца го наричат ​​CI). Помага ви да върнете обратно към последното работно копие доста бързо, без да губите много код.

Също толкова важно е да знаете какво правите. В крайна сметка можете напълно да нарушите проекта си, ако не знаете. Ако не сте използвали VCS, добре че тогава сте в затруднение.

# 1: Надстройте JSC

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

Каквото и да пишете, все още се изпълнява като JavaScript само от JSC на Android. Проблемът са корабите React Native с много стара версия на JSC. Това означава, че трябва да използвате широко трансформации на вавилон. Понякога има толкова неприятни грешки, че ще дърпате косата си всеки път, когато седнете да кодирате, поради по-стара версия на JSC.

Научих го по трудния начин, след като загубих ден за отстраняване на грешки. Между изпълнението на приложението имаше неизвестна случайна фатална грешка. След като проучих логовете от доста време, стигнах до извода, че приложението се срива някъде, където [Symbol.iterator] се използва в преведения JS код от babel.

Сега Symbols е нещо от ES6. Babel не прехвърли това повече и JSC беше толкова стар, че не беше в състояние да задържи прости неща като тези и се разби. Изгубих почти ден, след като разбрах, че ъпгрейдът на JSC е по-добро решение в сравнение с други пачи хакове.

Надграждането на JSC е доста просто. Следвайте това github repo и трябва да работите за нула време.

# 2: Правилно настройте Redux

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

По дяволите не. Тук говорим за приложения за ниво на предприятия и производство. Продължете напред и запазете състоянието на навигацията си в Redux и спечелете много добър контрол над вашето състояние.

Но не забравяйте, че с голяма сила идва голяма отговорност. С такъв фин контрол над навигацията си, уверете се, че сте го настроили правилно. Или иначе приложението ви ще се срине на случаен принцип. Ще бъде болка да го настроите първоначално, но ми повярвайте си заслужава времето.

Прочетете за Redux и неговата интеграция с реакция на навигация тук.

# 3: Използвайте налични инструменти за автоматизация като fastlane

Fastlane е страхотна програма за команден ред за автоматизиране на много общи задачи, с които ще се сблъскате. По-скоро е като оптимизация на времето, отколкото на оптимизация на код. Мисля, че заслужава място тук, защото спестява много време след правилната настройка.

Checkout fastlane тук: https://fastlane.tools/

# 4: Правилно обработка на грешки

Не очаквайте вашите потребители да ви пингват точно как се срива приложението. С по-сложни приложения е трудно да се намерят конкретни стъпки, които водят до срив на приложението. Използвам sentry.io за обработка на грешки в приложенията си и лично много ми харесва. Той може да се свърже във вашите стъпки за изграждане и дори да качите оригиналната карта на техните сървъри, така че да можете да видите действителния код, а не случаен боклук в следите от срив.

Sentry е на разположение на https://sentry.io/

# 5: Направете отстраняване на грешки по правилния начин!

Все още ли използвате конзолата за инспектиране на хром, за да отстраните грешки в приложенията си React Native? А какво ще кажете за Redux? Още един раздел? Какво става, ако искате да изчистите асинхронното хранилище на приложението си? Принудително спиране на приложението и изчистване на данните? Изглежда твърде досаден, особено когато активно разработвате приложението. Вместо това използвайте самостоятелен специализиран дебъгер за реагиране на местните. Най-добрата част? Безплатно е!

Ето вашия Debugger React Native: https://github.com/jhen0409/react-native-debugger

5 бързи съвета:

  • Поддържайте организираната си файлова структура. Много е важно да мащабирате приложението си.
  • Избягвайте да използвате експо за вашите приложения. МОЛЯ НЕ. Дори и да го използвате, ще разберете, че трябва да изхвърлите в даден момент и след това да имате късмет да разберете цялата каша. Това не е невъзможно, ще изяде много от времето ви по-късно. Не забравяйте, че expo е добро, но говорим за дългосрочни приложения, свързани с бизнес / стартиране, а не за приложение за котка възраст (за което expo би било добро).
  • Уверете се, че създавате файл с пакет-lock.json (ако използвате npm). Ще съжалявате много време по-късно, когато случайно премахнете папката node_modules и осъзнаете, че нито един пакет в npm не се интересува от семантична версия.
  • Не използвайте много тежки UI библиотеки с React Native. Забавя производителността дори в производството. Не препоръчвам NativeBase от сега, въпреки че изглежда много фантастично по отношение на потребителския интерфейс. Изпълнява се скъпо. Налични са много по-добри опции като реагиране на естествена хартия.
    Благодаря на Andre Biel за коментара, моля, не забравяйте да прегледате подробно тази страница с документи, ако ви е писнало от бавни RN приложения и / или да ги профилирате. Това е златна мина: https://facebook.github.io/react-native/docs/performance.html
  • Възползвайте се от това, че React Native замества пакета JS в движение, без да изпращате приложението отново в магазините за приложения, използвайки технологии като CodePush.
  • Удобствайте се поне с основите на родния код на двете платформи. Особено изграждането на файлове на Android и pod файловете на iOS. Това са някои файлове, на които ще прекарате по-голямата част от времето си в родно време.

Ще продължа да пиша публикации в блога на React Native като поредица от публикации, може би, нека да видим!

Въпроси?

Попитайте в коментарите по-долу! Ще се радвам да помогна.