React Native in Production

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

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, tensorﬂow, functional programming

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

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

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

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

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

WHY? 5. React experienced web developer

OPTIONS
Cordova + React
NativeScript
React Native

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

PROS 2. FLEX Layout
CSS the good parts : Flex layout is very Flexible
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }} />
<View style={{ height: 100 }} />
</View>
height: 100
ﬂex: 1
ﬂex: 1
Viewport

PROS 2. FLEX Layout
flex: 1 flex: 1
Viewport
<View style={{ height: 50,
flexDirection: ‘row’ }}>
</View>
height: 50
flexDirection: ‘row’

PROS 2. FLEX Layout
<View
style={{
justifyContent: ‘center’,
alignItems: ‘center’,
}}
>
<Text
style={{
width: 50,
}}
>
Centered
</Text>
</View>
Centered
Viewport
justifyContent: ‘center’
alignItems: ‘center’

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

PROS 4. The Javascript
Lodash
Moment.js
Accounting

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

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

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 원

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

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 ofﬁcially allows code-push

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

PROS 6. Unit Test
MOCHA ENZYMECHAI

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

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

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

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

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

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

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

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…

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

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

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

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

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

POST-MORTEM
comparatively performant
from both develop and application standpoint

POST-MORTEM
Active and Enthusiastic community

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

http://seokjun.kr
More stories…

React Native in Production

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to React Native in Production (20)

Recently uploaded (20)

React Native in Production