React Native for ReactJS Devs

REACT NATIVE FOR REACT
DEVELOPERS
Barak Cohen, Wondermall

FRONT-END IS BROKEN
• Build the same app 3-6 times: iOS (Phone/Tablet),
Android (Phone/Tablet), Web (Desktop/Phone)
• Different teams build the same thing using 3
different languages, frameworks & libraries.
• Hard to maintain feature parity & consistent
terminology.
• Impossible to be an expert in all technologies and
“own” something in all products

STACK-CENTRIC R&D
iOS
Product Manager
Web Android
iOS Dev
iOS Dev
iOS Dev
Web Dev
Web Dev
Web Dev
Android Dev
Android Dev
Android Dev

BUSINESS-CENTRIC R&D
Feature A
Product Manager
Feature B Feature C
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev
Full-Stack Dev

FULL-STACK IS HARD!
• Almost all devs at Wondermall do Python, ObjC+Swift
and AngularJS
• Level of expertise vary. No one is a rock star on all 3
platforms
• We’ll never get everyone cross trained on Android,
Windows Phone, Apple Watch, Apple TV, …
• If we want to remain Full Stack, we’ll have to rethink our
strategy

REACT-NATIVE IS…
• JavaScript for Application Logic
• Native UI (No WebViews)
• Flexbox Layout
• Polyfills (fetch API) & Platform APIs
(Camera)
• Compatible with nearly all React and JS libs

GETTING STARTED
$ brew install node && brew install watchman
$ npm install -g react-native-cli
$ react-native init MyProject && cd MyProject
$ react-native run-ios

HELLO WORLD
var React = require('react')
var { View, Text } = require('react-native')
class HelloWorldView extends React.Component {
render() {
return (
<View><Text>Hello World</Text></View>
)
}
}

React DOM React Native
React
React Canvas React Three
iOS Android macOS Win 10 Web
REACT ECO-SYSTEM
Tizen

REACT (NATIVE+JS)
BENEFITS
• “Learn once write anywhere”
• Reuse almost all non-UI code across all
platforms
• Reuse most UI code between Native
Platforms
• Hot-reloading JS, debug in Chrome

BENEFITS - CON’T
• Can be added incrementally to an existing
app
• Over-the-wire updates w/o AppStore
(AppHub)
• JS w/ ES6 is succinct and productive
• Can use previously written native code and
UI

ADDING STYLE
...
render() {
return (
<View style={{padding: 10}}>
<Text style={{fontSize: 14, color: '#0000ff'}}>
Hello World
</Text>
</View>
)
}
}

FLEXBOX LAYOUT
render() {
return (
<View style={{flexDirection: 'column', flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}}></View>
<View style={{flex: 1, backgroundColor: 'green'}}></View>
<View style={{flex: 1, backgroundColor: 'blue'}}></View>
</View>
)
}
}

FLEXBOX LAYOUT - 2
render() {
return (
<View style={{flexDirection: 'row', flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}}></View>
<View style={{flex: 1, backgroundColor: 'green'}}></View>
<View style={{flex: 1, backgroundColor: 'blue'}}></View>
</View>
)
}
}

NATIVE APIS
import React, { Component } from 'react';
import { MapView } from 'react-native';
class MapMyRide extends Component {
render() {
return (
<MapView
style={{height: 200, margin: 40}}
showsUserLocation={true}
/>
);
}
}

return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}
onForward={ () => {
navigator.push({
title: 'Scene ' + route.index + 1,
index: route.index + 1,
});
}}
/>
}
/>
)
BUILT-IN

REACT-NATIVE-ROUTER-
FLUX
import { PageOne, PageTwo } from './Pages';
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
)
}
}

Shared - Native & Web
Redux /
Relay
API Client
Business
Logic
Shared Native
Native Specific
<TabBarIOS>,
<AndroidToolbar>
<Text>, <TextInput>,
<Image>
Web
<div>
Business Level Comp’
<span>
<img>

• Reload - Clears all JS code and resets
the state
• Remote JS Debugging - Chrome /
VSCode with breakpoints and Console
(no network)
• Live Reload - Automatic Reload (as
above)
• Hot Reloading - Change JS code without
DEVELOPER MENU

PACKAGER
• Built-in packager with ES6 support
• Development: local webserver serves the
bundled JS
• Production:
• Use .ios.js or .android.js suffixes, Packager will
include the correct file for the platform bundle
$ react-native bundle —platform ios

OTA UPDATES
• Updates JS & assets without AppStore submission
• Apple’s policy allows it for fixes & minor
improvements
• Microsoft CodePush - Commercial
• AppHub - Hosted / OSS

NATIVE VS. JAVASCRIPT
View Controller
View Controller
View Controller Bridge
(incl. JS VM)
JavaScript FileJavaScript FileJavaScript File
RCTRootView
UIView
UIView

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions…
{
NSURL *jsCodeLocation = @“http://localhost:8081/index.ios.bundle?platform=ios";
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"MyComponent"
initialProperties:@{}
launchOptions:launchOptions];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
}

MULTIPLE RCTROOTVIEWS
RCTRootView
UIView
UIView
RCTRootView
UIView
UIView
Bridge
(incl. JS VM)

{
// AppDelegate didFinishLaunchingWithOptions
self.bridge = [[RCTBridge alloc] initWithBundleURL:@"localhost..."
moduleProvider:nil
launchOptions:nil]
// When you want to show R/N view
[[RCTRootView alloc] initWithBridge:self.bridge
moduleName:"MyComponent"];
// Somewhere else
[[RCTRootView alloc] initWithBridge:self.bridge
moduleName:"MyOtherComponent"];
}

NATIVE MODULES
• Export native functions to be called from JS
• Export constants and enums
• Send events to JS from native
• They are singletons

// CalendarManager.h
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject <RCTBridgeModule>
@end
// CalendarManager.m
@implementation CalendarManager
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(addEvent:(NSString *)name
location:(NSString *)location)
{
RCTLogInfo(@“Creating event %@ at %@", name, location);
}
@end

RETURN VALUE W/
PROMISES
RCT_EXPORT_METHOD(findEvents,
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject)
{
NSArray *events = ...
if (events) {
resolve(events);
} else {
NSError *error = ...
reject(@"no_events", @"There were no events", error);
}
}

import { NativeModules } from ‘react-native';
CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent(‘Birthday Party’, …);
async function updateEvents() {
try {
var events = await CalendarManager.findEvents();
this.setState({ events });
} catch (e) {
console.error(e);
}
}
updateEvents();

PERFORMANCE TIPS
• Minimize bridge messages
• Implement shouldComponentUpdate
• Direct Manipulation with setNativeProps
• Rewrite in Native

FURTHER READING
• Facebook’s F8 App - http://makeitopen.com/
• React Native Newsletter -
http://reactnative.cc/
• Practice layout and Flexbox
https://github.com/jondot/ReactNativeKatas
• https://github.com/jondot/awesome-react-
native

STARTER KITS
• Native Starter -
http://startreact.com/themes/native-starter/
• Ignite - https://github.com/infinitered/ignite
• este.js - https://github.com/este/este

3RD-PARTY COMPONENTS
• https://js.coach/react-native/
• https://react.parts/native
• nativebase.io

React Native for ReactJS Devs

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to React Native for ReactJS Devs (20)

Recently uploaded (20)

React Native for ReactJS Devs

Editor's Notes