React Native: Is It Worth It? UA Mobile 2017.
0 likes53 views
React Native allows for cross-platform mobile app development but comes with some tradeoffs. It is a large dependency that can limit upgrading other libraries. Developing in React Native is significantly different than normal Android development. Maintaining clean, cross-platform code requires commitment from the entire team. Dynamic code updating is powerful but should be used responsibly.
React Native: Is It Worth It? UA Mobile 2017.
- 1. Andy Dyer @dammitandy React Native: Is It Worth It?
- 4. WHY REACT NATIVE? Fast iteration Cross-platform Learning something new
- 6. Sample App 1. import React, { Component } from 'react'; 2. import { 3. AppRegistry, 4. StyleSheet, 5. Text, 6. TextInput, 7. View Run it: https://goo.gl/h5g2eg
- 7. INTEGRATION WITH EXISTING APPS 1. Create package.json and run yarn to fetch dependencies 2. Add project from node_modules/ to settings.gradle 3. Add dependency to build.gradle 4. Add Activity to load JS component 5. Run yarn start to bundle JS and launch Activity
- 10. What was the problem?
- 11. DIFFERENT OKHTTP VERSIONS React Native 0.45 was using OkHttp 3.4 Our app was using a newer version Breaking changes between versions
- 12. "Upgrade to OkHttp 3.8.0" PR Discussion
- 13. "Upgrade to OkHttp 3.8.0" PR Discussion
- 15. We're Not Done Yet...
- 17. ...you lose the patent license...if you sue us for patent infringement. - Explaining React's License https://code.facebook.com/posts/112130496157735/explainin react-s-license/
- 19. ...the Gutenberg team is going to...rewrite Gutenberg using a different library. - On React and WordPress https://ma.tt/2017/09/on-react-and-wordpress/
- 20. React Native Consideration #1 It’s a big dependency and may limit your ability to upgrade other libraries.
- 21. DEVELOPING WITH REACT NATIVE Your favorite text editor Chrome Developer Tools More typing...but much less checking Twitter while waiting for builds
- 22. Java is to JavaScript as Car is to Carpet Use TypeScript or Flow Con gure a linter Con gure Prettier to auto format on save
- 23. TypeScript
- 24. NOT-SO-GREAT THINGS Handling orientation changes android:configChanges="keyboard |keyboardHidden|orientation|screenSiz or lock to portrait Third party libraries required for standard things like Material Design and i8ln Interop with native code requires extra classes
- 25. React Native Consideration #2 It’s way different than normal Android development.
- 26. Don't Drive Too Fast
- 27. TESTING REACT NATIVE APPS Jest - Snapshot testing Detox - Espresso like UI testing Enzyme - Robolectric like UI testing
- 28. CROSS-PLATFORM THAT DOESN'T SUCK Best practices are still evolving. How much to share? What is okay to duplicate? Stick to native code where you need it.
- 29. Android code 1. if (Platform.OS === 'android') { 2. alert('Android'); 3. } else { 4. alert('iOS'); 5. }
- 30. FILE NAME CONVENTION Android iOS index.android.js index.ios.js
- 31. React Native Consideration #3 Clean and maintainable cross- platform code requires the commitment of everyone on the team.
- 32. APP UPDATES WITH CODEPUSH "According to section 3.3.2 of Apple’s developer agreement, as long as you are using the CodePush service to release bug xes and improvements/features that maintain the app’s original/presented purpose (i.e. don’t CodePush a calculator into a rst-person shooter), then you will be ne, and your users will be happy."
- 33. APP UPDATES WITH CODEPUSH "Because Cordova apps are executed within a WebView, and React Native apps are executed within JavaScriptCore, from a technology perspective, these runtimes are unique in their ability to leverage dynamic code downloads according to the aforementioned Apple developer agreement."
- 34. CODE PUSH BEST PRACTICES Check for updates on app start, but don't apply until the next launch Test thoroughly and monitor releases closely Don't surprise the user
- 35. React Native Consideration #4 Dynamic code updates are a game changer, but should be used responsibly.
- 36. React Native + LiveData 1. class BeerLiveDataModule : ReactContextBaseJavaModule { 2. @Inject internal lateinit var repository: BeerRepository 3. @Inject internal lateinit var gson: Gson 4. 5. private lateinit var liveData: LiveData<List<Beer>>
- 37. Subscribe 3. componentDidMount() { 4. this.changeListener = 5. DeviceEventEmitter.addListener( 6. 'beersChanged', 7. this.onBeersChanged); 8. NativeModules.BeerLiveData.subscribe(); 9. } 1. class BeerList extends React.Component { 2. 10. 11. componentWillUnmount() { 12. this.changeListener.remove(); 13. NativeModules.BeerLiveData.unsubscribe(); Listen to change events
- 38. IS IT WORTH IT? 1. It’s a big dependency and may limit your ability to upgrade other libraries. 2. It’s way different than normal Android development. 3. Clean and maintainable cross-platform code requires the commitment of everyone on the team. 4. Dynamic code updates are a game changer, but should be used responsibly.
- 39. LINKS Blog: andydyer.org Jobs @ Zalando: jobs.zalando.com ProAndroidDev: proandroiddev.com Twitter: @dammitandy