Embed Size (px)
Citation preview
React Native in ProductionBuild Native Mobile Apps using JavaScript and React
Kim Seokjun aka almaFront-end web developer at SOCAR
Working as DevOps - react.js, react-native, node.js, express.js, docker
Interested in - go, tensorflow, functional programming
React.js React Native
React.js React Native
WHY REACT-NATIVE?
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
Android60%
iOS40%
WHY? 5. React experienced web developer
OPTIONS
Cordova + React NativeScript React Native
PROS
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={{ flex: 1 }} /> <View style={{ height: 100 }} /></View>
height: 100
flex: 1
flex: 1
Viewport
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’
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’
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
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();};
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');},
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 원
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 officially allows code-push
PROS 6. Unit Test
Integration test sucks
1. difficult 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
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 issuethere 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
POST-MORTEM
Easy to develop
Okay to distribute
Hard to keep it updated
POST-MORTEM
DOs
use redux and code-pushabstract react-native apis
wrap components with containeruse npm private registry to share validation
use setState carefully
POST-MORTEM
DON’Ts
don’t believe in react-native packagesuse 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 performantfrom both develop and application standpoint
POST-MORTEM
Active and Enthusiastic community
CONCLUSION
Applicable for production use
