Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native in Production

844 views

Published on

Pros & Cons of using React Native in production at JSCON:2016 in Korea.

Published in: Technology
  • Be the first to comment

React Native in Production

  1. 1. React Native in Production Build Native Mobile Apps using JavaScript and React
  2. 2. Kim Seokjun aka alma Front-end web developer at SOCAR Working as DevOps - react.js, react-native, node.js, express.js, docker Interested in - go, tensorflow, functional programming
  3. 3. React.js React Native
  4. 4. React.js React Native
  5. 5. WHY REACT-NATIVE?
  6. 6. 오늘부터 2차 모집중! http://zerocar.socar.kr
  7. 7. WHY? 1. To avoid risk mixing Single bug may affect two services SOCAR is already huge and complex application
  8. 8. WHY? 2. Not much to share with SOCAR ZEROCAR is running over SOCAR but in behavioral standpoint it’s not
  9. 9. WHY? 3. Minimize features and quick updates Feature list was too long for 3 weeks So decided to spec out most and focus on criticals
  10. 10. WHY? 4. iOS and Android Android 60% iOS 40%
  11. 11. WHY? 5. React experienced web developer
  12. 12. OPTIONS Cordova + React NativeScript React Native
  13. 13. PROS
  14. 14. PROS 1. It’s REACT! React + Redux + ES6 = Awesome! import { ScrollView } from ‘react-native’ import { Profile, SharingStatus, Scheduler } from ‘@components’ class HomeContainer extends React { refresh() { fetch(‘http://api.url).then((res) => this.props.getSharingStatus(res)) } render() { <ScrollView> <Profile /> <SharingStatus /> <Scheduler /> </ScrollView> } }
  15. 15. PROS 2. FLEX Layout CSS the good parts : Flex layout is very Flexible <View style={{ flex: 1 }}> <View style={{ flex: 1 }} /> <View style={{ flex: 1 }} /> <View style={{ height: 100 }} /> </View> height: 100 flex: 1 flex: 1 Viewport
  16. 16. PROS 2. FLEX Layout CSS the good parts : Flex layout is very Flexible flex: 1 flex: 1 Viewport <View style={{ height: 50, flexDirection: ‘row’ }}> <View style={{ flex: 1 }} /> <View style={{ flex: 1 }} /> </View> height: 50 flexDirection: ‘row’
  17. 17. PROS 2. FLEX Layout CSS the good parts : Flex layout is very Flexible <View style={{ justifyContent: ‘center’, alignItems: ‘center’, }} > <Text style={{ width: 50, }} > Centered </Text> </View> Centered Viewport justifyContent: ‘center’ alignItems: ‘center’
  18. 18. PROS 3. No compile, Hot-reload Thank you Dan! I love you! Really! Love you! My Jesus! Dan Abramov, author of Redux and React Hot Reloader
  19. 19. PROS 4. The Javascript Lodash Moment.js Accounting
  20. 20. PROS 4. The Javascript Lodash : the functional programming const getCamelCased = (text: string) => { if (!text) return null; return text.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); }; const getButtonStyle = (className) => { if (!className) return null; return _.chain(['btn', 'normal', ...className.split(/s/)]) .map(elem => styles[getCamelCased(elem)]) .value(); };
  21. 21. PROS 4. The Javascript Moment : date-time eternal villain for developer const getMinStartDate = (endDate) => { if (endDate) return moment(endDate).subtract(120, 'minutes'); const now = moment(); const currentMinute = now.minute(); const currentSeconds = now.second(); const currentMilliSeconds = now.millisecond(); const remainder = (currentMinute > 0) ? 10 - (currentMinute % 10) : 10; return moment(start) .add(remainder, 'minutes') .subtract(currentSeconds, 'seconds') .subtract(currentMilliSeconds, 'milliseconds'); },
  22. 22. PROS 4. The Javascript Accounting : the easiest way to format number to currency // Default usage: accounting.formatMoney(12345678); // $12,345,678.00 // European formatting (custom symbol and separators), can also use options object as second parameter: accounting.formatMoney(4999.99, "₩", 2, ".", ","); // ₩4.999,99 // Negative values can be formatted nicely: accounting.formatMoney(-500000, "£ ", 0); // £ -500,000 // Simple `format` string allows control of symbol position (%v = value, %s = symbol): accounting.formatMoney(5318008, { symbol: "원", format: "%v %s" }); // 5,318,008.00 원
  23. 23. PROS 5. CodePush React-Native runs main.jsbundle over JS thread … which means you can REPLACE bundle to UPDATE
  24. 24. PROS 5. CodePush 3.3.2 An Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exception to the foregoing is scripts and code downloaded and run by Apple's built-in WebKit framework, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store. but … it crashes often. don’t rely on it too much… Apple officially allows code-push
  25. 25. PROS 6. Unit Test Integration test sucks 1. difficult to write test, 2. impossible to keep it updated 3. takes forever but unreliable
  26. 26. PROS 6. Unit Test MOCHA ENZYMECHAI
  27. 27. PROS 6. Unit Test Writing test for react-native is actually fun and easy Mocha, Enzyme and Chai make it possible
  28. 28. PROS 6. Unit Test import { expect } from ‘chai’; import reducer, { resetDate } from ‘./reducer’; describe(‘reducer’, () => { it(‘should reset date keeping its duration’, () => { const startDate = ‘2015-06-05 03:30’, endDate = ‘2015-06-05 06:30’; expect( reducer({ startDate, endDate }, resetDate()) ).to.deep.equal({ startDate: ‘2015-06-05 04:30’, endDate: ‘2015-06-05 07:30’, }); }); }); Writing test for redux with Mocha, Chai
  29. 29. PROS 6. Unit Test import React, { View, Text } from 'react-native'; import { shallow } from 'enzyme'; import { expect } from ‘chai’; import Test from ‘./Test’; describe('<Test />', () => { it('it should render 1 view component', () => { const wrapper = shallow(<Test/>); expect(wrapper.find(View)).to.have.length(1); }); it('it should render 2 text components', () => { const wrapper = shallow(<Test/>); expect(wrapper.find(Text)).to.have.length(2); }); }); Component test with Enzyme shallow rendering from `render()`
  30. 30. CONS
  31. 31. CONS 1. Navigation, Navigator, Navigation Bar … Navigator Navigator.NavigationBar NavigatorExperimental NavigatorIOS TabBarIOS DrawerLayoutAndroid ToolBarAndroid … WTF?
  32. 32. CONS 2. Poor documentation, frequent updates Pooooooooooooor documentation frequent breaking changes updates
  33. 33. CONS 3. Native Modules Comparably easier than others But it take time, efforts and native developer
  34. 34. CONS 4. Schrodinger’s cat in the box You know nothing Jon Snow inside
  35. 35. CONS 5. Performance Everyone talks about this but we never felt that yet performance has never been an issue there are a lot of other problems to solve…
  36. 36. CONS 5. Performance Don’t forget this is not meant to work for everything it has pros and cons and things getting better but it is true that native app is faster in many ways
  37. 37. POST-MORTEM
  38. 38. POST-MORTEM Easy to develop Okay to distribute Hard to keep it updated
  39. 39. POST-MORTEM DOs use redux and code-push abstract react-native apis wrap components with container use npm private registry to share validation use setState carefully
  40. 40. POST-MORTEM DON’Ts don’t believe in react-native packages use carefully custom router to maximize native experience don’t think of it as native environment code-push has problem with redux nesting components is harmful
  41. 41. SUMMARY Easy for web front-end developer Apple allows code-push update for sure It is almost impossible to catch run-time crash react-native packages always make problems build just broke sometimes especially on android POST-MORTEM
  42. 42. POST-MORTEM comparatively performant from both develop and application standpoint
  43. 43. POST-MORTEM Active and Enthusiastic community
  44. 44. CONCLUSION
  45. 45. Applicable for production use
  46. 46. WE ARE HIRING JOIN TO WORK TOGETHER http://socar.recruiter.co.kr
  47. 47. http://seokjun.kr More stories…

×