React Native

kevin o’neillemail: [email protected] twitter: @kevinoneill

mailto:[email protected]?subject=


building mobile applications that delight users is hard



building mobile applications for multiple platforms

that delight users is harder



choices



native development



platform feel raw performance

full platform integration



the challenge ofnative development



slow development cycles slow deployment cycles

multiple languagesmultiple api’s



cross platform development



quick development cycles quick deployment cycles

single languagesingle api*



the challenge ofcross platform development



poor performance poor Feel

lowest denominator



and neither approach



helps you manage the growing complexity of modern mobile

applications



introducingreact native



slow development cycles hot reload



slow deployment cycles direct ota updates



multiple languges es6/7 javaScript core



multiple api’s 90% of the api’s are shared

between platforms



poor performance native corevirtual dom



poor feel native ui and interactions



lowest denominator split between platforms where

distinction is required



react native



a native core with modern javascript

a functional ui and flexbox layout



the ui is pure native not a UIWebView bridge

a native core



utilises a ‘message bus’for communication between

application logic and the native ui



creating your own native modules is trivial



bridging modules@interface CalendarManager : NSObject <RCTBridgeModule> @end

@implementation CalendarManager RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD( addEvent:(NSString *)name location:(NSString *)location) { RCTLogInfo(@"Pretending to create an event %@ at %@", name, location); } @end



bridging modules

import { CalendarManager } from ‘NativeModules';

CalendarManager.addEvent(‘React Native Talk', 'NAB');



bridging native views

@interface MapManager : RCTViewManager <MKMapViewDelegate> @end

@implementation MapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end




import React from ‘react-native';

let { requireNativeComponent } = React;

export default requireNativeComponent(‘Map', null);




import React from 'react-native';

let { requireNativeComponent } = React;

export default requireNativeComponent(‘Map', null);



the majority of the time you wont be concerned with the bridge



events- (void)mapView:(MKMapView *)mapView regionDidChangeAnimated:(BOOL)animated {

MKCoordinateRegion region = mapView.region; NSDictionary *event = @{ @“center": { @"lat": @(region.center.latitude), @"long": @(region.center.longitude) }}; [self.bridge.eventDispatcher sendInputEventWithName:@"centerChanged" body:event];}



eventsclass MapView extends React.Component { constructor() { this._onChange = this._onChange.bind(this); }

_onChange(event: Event) { if (!this.props.onCenterChange) { return; } this.props.onCenterChange(event.nativeEvent.center); } render() {

return <Map onChange={this._onChange} />; }

}



es 6/7 modern javascript



babel a javascript compiler



es6• Arrow functions: <C onPress={() => this.setState({pressed: true})}• Block scoping: let greeting = 'hi';• Call spread: Math.max(...array);• Classes: class C extends React.Component { render() { return <View />; } }

• Constants: const answer = 42;• Destructuring: var {isActive, style} = this.props;• Modules: import React, { Component } from 'react-native';• Computed Properties: var key = 'abc'; var obj = {[key]: 10};• Object Consise Method: var obj = { method() { return 10; } };• Object Short Notation: var name = 'vjeux'; var obj = { name };• Rest Params: function(type, ...args) { }• Template Literals: var who = 'world'; var str = `Hello ${who}`;


http://babeljs.io/docs/learn-es2015/#arrows

https://babeljs.io/docs/learn-es2015/#let-const

http://babeljs.io/docs/learn-es2015/#default-rest-spread

http://babeljs.io/docs/learn-es2015/#classes

https://babeljs.io/docs/learn-es2015/#let-const

http://babeljs.io/docs/learn-es2015/#destructuring

http://babeljs.io/docs/learn-es2015/#modules

http://babeljs.io/docs/learn-es2015/#enhanced-object-literals

http://babeljs.io/docs/learn-es2015/#enhanced-object-literals

https://github.com/sebmarkbage/ecmascript-rest-spread

http://babeljs.io/docs/learn-es2015/#template-strings


es7

• Object Spread: var extended = { ...obj, a: 10 };• Function Trailing Comma: function f(a, b, c,) { }• Async Functions: async function doStuffAsync() { const foo = await doOtherStuffAsync(); };


https://github.com/sebmarkbage/ecmascript-rest-spread

https://github.com/jeffmo/es-trailing-function-commas

https://github.com/tc39/ecmascript-asyncawait


jsx markup in javascript



it’s clearer to work with markup than raw

javascript



jsxrender() { const movie = this.props.movie; return ( <View style={styles.container}> <Text>{movie.title}</Text> <Text>{movie.year}</Text> <Image source={{uri: movie.posters.thumbnail}} /> </View> ); }



isn’t mixing layout and logic bad



other toolsflow, typescript, redux …



define states, not transitionsfunctional ui



describing transitions



describing states



the view hierarchy is recalculated for every state change



the virtual dom



describes the view hierarchy



recalculated on state change



differences used to patch the ui



stacked views on steroids flexbox layout



containers



rows



columns



start



end



center



space around



space between



wrapping



proportional sizing



plus content alignment, self alignment and more



i liked flexBox so muchi created a swift version





Closing Thoughts



react makes it easier to reason about application state



it’s not a cure all



it’s under active developmentand sometimes unstable



facebook groups and pages are built on it



it’s not an all or nothing proposition



until now i’ve been a pure native developer



it allows rapid iterationon your product ideas



it’s a cornerstone technologyfor my new startup



Thank you Questions?


Documents

React Native