Lightning Talk - (Try to) Avoid React Native development being a nightmare

Lightning Talk at 06/02/2018 for (www.cejs.com.br).

Write a React Native code and run it perfectly on both iOS and Android sometimes can be a hard task. Various problems, including weird ones, can happen. In this talk, I will show you some of the crazy problems I faced when building React Native apps. I will also show some techniques I use to minimize my headaches and increase my sleeping.

Transcript

1. (Try to) Avoid React Native development being a nightmare
2. @franzejr
5. www.smoothterminal.com
6. Write it once, run perfectly on any device. — Beginner React Native Developer
7. Learn once, build it anywhere. — Smart React Native Developer
8. We do not always get what we want. Sometimes life presents us with surprises. — Michael Scott
9. Sometimes React Native doesn't do what we expect. Sometimes it presents us with surprises. — Franzé Jr.
10. This talk is divided in:
11. Real Problems Potential Solutions
12. Real Problems
13. 1. Shitty libraries (native third party libraries) / JavaScript Fatigue
14. 2. Rendering problems on specific devices
15. Shitty Libraries
16. <Tabs initialPage={Platform.OS === "ios" ? 0 : currentPage} tabBarUnderlineStyle={{ backgroundColor: Colors.imsa_red }} onChangeTab={tab => this.props.setImsaLiveTab(tab.i)} > {this.renderBroadcastTab()} <Tab heading="Live Scoring" textStyle={{ fontSize: 12, color: Colors.black }} activeTextStyle={{ color: Colors.black, fontSize: 12 }} activeTabStyle={{ backgroundColor: Colors.white }} tabStyle={{ backgroundColor: Colors.white }} style={{ backgroundColor: Colors.black }} > initialPage is different for Android or iOS. The error was happening only on Android.
18. Remember: iOS project Android projects
20. Javascript developers implementing android and ios code
21. Josh: “How’s it going?” Me: “Fatigued.” Josh: “Family?” Me: “No, React Native.”
22. People want to use library for simple things
23. BUT
24. When you add it:
25. Remember: iOS project Android projects
27. Problem on a android production build
30. Upgrade React Native or dependencies
32. Rendering problems
33. Android
34. iOS
35. Dimensions ❤ Platform ❤
36. statusBar: { backgroundColor: Colors.widdee_orange, display: Platform.OS === 'ios' ? 'flex' : 'none', height: statusBarHeight }
37. const iPhoneX = height === 812 || width === 812 if (Platform.OS === 'ios') { statusBarHeight = iPhoneX ? 35 : 20 }
38. <Image style={{ width: 100, height: 60, resizeMode: 'contain', position: 'absolute', bottom: Platform.OS === 'ios' ? -30 : 0, marginTop: Platform.OS === 'ios' ? 0 : 10, left: 10, zIndex: 20 }} source={{uri: image}}} /> !
39. Android phones implementing its own brand/specification
40. if (Platform.OS == "ios") { if (aspectRatio >= 0.65) { ... } } if (isABadSamsungDevice()) { ... }
41. Solutions ❤
42. Fail First
43. Check the libraries you're using
45. Keep your libraries updated
46. Continuous Deployment
47. Redux Sagas
48. export function * getOrdersFromStore ({ payload }) { PrettierLog.log('getOrdersFromStore', { payload }) const { client } = payload const query = Queries.getOrdersFromStore() const { data } = yield call(client().query, query) PrettierLog.log('getOrdersFromStore data', { data }) if (data) { yield put(OrdersActions.gotOrders(data.myVendor.orders)) } else { yield put(OrdersActions.failure()) } }
49. export function* getMyCart({ payload }) { const { client } = payload; try { const query = Queries.getMyCart(); const { data } = yield call(client().query, query); if (data) { yield put(ShoppingActions.updateCart(data.myCart)); } else { yield put(ShoppingActions.failure()); } } catch (err) { yield put(ShoppingActions.failure()); } }
50. Test your Saga!
51. test("get my cart success", () => { const client = { query: () => {} }; const response = { data: { myCart: { cartItems: [ { product: { itemPrice: 100.00 } } ] } } }; const step = stepper(getMyCart({ payload: { client } })); // first step API step(); // Second step successful return const stepResponse = step(response); const data = path(["data", "myCart", "cartItems", 0], response); let itemPrice = data.product.itemPrice; expect(itemPrice).toEqual(100.00); expect(stepResponse).toEqual( put(ShoppingActions.addCartItems(response.data.myCart.cartItems)) ); });
52. Ignite
55. https://www.smoothterminal.com/articles/ introduction-to-ignite
56. Check what is coming from your API
57. Decoders layer
58. function decodeSection( section: ApiSection, questions: List<QuestionType> ): SectionType { return new SectionType({ id: section.id, name: section.name, content: section.content, order: section.order, questions: List( questions.filter(question => { return question.get("sectionId") === section.id; }) ), persisted: true }); }
59. function decodeQuestion(apiQuestion: ApiQuestion): QuestionType { const questionDependency = decodeQuestionDependency( apiQuestion.question_dependency ); let question = new QuestionType({ id: apiQuestion.id, key: apiQuestion.key, label: apiQuestion.label, content: apiQuestion.content, type: apiQuestion.question_type, validateAs: apiQuestion.validate_as, order: apiQuestion.order, required: apiQuestion.required, placeholder: apiQuestion.placeholder, sectionId: apiQuestion.section_id, choices: decodeChoices(apiQuestion.choices), questionDependency: questionDependency, persisted: true }); return question.set("metadataFields", metadataFields); }
60. GraphQL
61. export function * getProductsFromStore ({ payload }) { const { client } = payload const query = Queries.getProductsFromStore() const { data } = yield call(client().query, query) if (data.myVendor.store.products) { yield put(ProductsActions.gotFirstPage(data.myVendor.store.products)) } else { yield put(ProductsActions.failure()) } }
62. Diverse Devices
63. Test. Test. Test.
65. Multidisciplinar Team (iOS + Android Developers)
66. iOS developers -> JS Android developers -> JS
67. Debug release locally Release your app in debug daily
68. Automated Production release Get notified for failed production builds
69. Component libraries Cross Platform UI Toolkits Don't implement everything!
70. Native Base // React Native Elements
73. Remember:
74. Even with all these
75. One Codebase
76. Less development time
77. Good performance
78. !
79. Thanks!