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

1. React Native in Production
Build Native Mobile Apps using JavaScript and React

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. React.js React Native

5. React.js React Native

6. WHY REACT-NATIVE?

7. 오늘부터 2차 모집중!
http://zerocar.socar.kr

8. WHY? 1. To avoid risk mixing
Single bug may affect two services
SOCAR is already huge and complex application

9. WHY? 2. Not much to share with SOCAR
ZEROCAR is running over SOCAR
but in behavioral standpoint it’s not

10. 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

11. WHY? 4. iOS and Android
Android
60%
iOS
40%

12. WHY? 5. React experienced web developer

13. OPTIONS
Cordova + React
NativeScript
React Native

14. PROS

15. 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>
}
}

16. 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

17. 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’

18. 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’

19. 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

20. PROS 4. The Javascript
Lodash
Moment.js
Accounting

21. 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();
};

22. 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');
},

23. 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 원

24. PROS 5. CodePush
React-Native runs main.jsbundle over JS thread
… which means you can REPLACE bundle to UPDATE

25. 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

26. PROS 6. Unit Test
Integration test sucks
1. difficult to write test,
2. impossible to keep it updated
3. takes forever but unreliable

27. PROS 6. Unit Test
MOCHA ENZYMECHAI

28. PROS 6. Unit Test
Writing test for react-native is actually fun and easy
Mocha, Enzyme and Chai make it possible

29. 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

30. 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()`

31. CONS

32. CONS 1. Navigation, Navigator, Navigation Bar …
Navigator
Navigator.NavigationBar
NavigatorExperimental
NavigatorIOS
TabBarIOS
DrawerLayoutAndroid
ToolBarAndroid
…
WTF?

33. CONS 2. Poor documentation, frequent updates
Pooooooooooooor documentation
frequent breaking changes updates

34. CONS 3. Native Modules
Comparably easier than others
But it take time, efforts and native developer

35. CONS 4. Schrodinger’s cat in the box
You know nothing Jon Snow inside

36. 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…

37. 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

38. POST-MORTEM

39. POST-MORTEM
Easy to develop
Okay to distribute
Hard to keep it updated

40. 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

41. 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

42. 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

43. POST-MORTEM
comparatively performant
from both develop and application standpoint

44. POST-MORTEM
Active and Enthusiastic community

45. CONCLUSION

46. Applicable for production use

48. WE ARE HIRING
JOIN TO WORK TOGETHER
http://socar.recruiter.co.kr

49. http://seokjun.kr
More stories…