react native
TRANSCRIPT
![Page 2: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/2.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
building mobile applications that delight users is hard
![Page 3: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/3.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
building mobile applications for multiple platforms
that delight users is harder
![Page 6: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/6.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
platform feel raw performance
full platform integration
![Page 8: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/8.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
slow development cycles slow deployment cycles
multiple languagesmultiple api’s
![Page 10: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/10.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
quick development cycles quick deployment cycles
single languagesingle api*
![Page 11: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/11.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
the challenge ofcross platform development
![Page 12: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/12.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
poor performance poor Feel
lowest denominator
![Page 14: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/14.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
helps you manage the growing complexity of modern mobile
applications
![Page 17: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/17.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
slow deployment cycles direct ota updates
![Page 19: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/19.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
multiple api’s 90% of the api’s are shared
between platforms
![Page 22: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/22.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
lowest denominator split between platforms where
distinction is required
![Page 24: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/24.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
a native core with modern javascript
a functional ui and flexbox layout
![Page 25: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/25.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
the ui is pure native not a UIWebView bridge
a native core
![Page 26: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/26.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
utilises a ‘message bus’for communication between
application logic and the native ui
![Page 27: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/27.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
creating your own native modules is trivial
![Page 28: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/28.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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
![Page 29: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/29.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
bridging modules
import { CalendarManager } from ‘NativeModules';
CalendarManager.addEvent(‘React Native Talk', 'NAB');
![Page 30: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/30.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
bridging native views
@interface MapManager : RCTViewManager <MKMapViewDelegate> @end
@implementation MapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end
![Page 31: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/31.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
bridging native views
import React from ‘react-native';
let { requireNativeComponent } = React;
export default requireNativeComponent(‘Map', null);
![Page 32: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/32.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
bridging native views
import React from 'react-native';
let { requireNativeComponent } = React;
export default requireNativeComponent(‘Map', null);
![Page 33: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/33.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
the majority of the time you wont be concerned with the bridge
![Page 34: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/34.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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];}
![Page 35: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/35.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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} />; }
}
![Page 38: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/38.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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}`;
![Page 39: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/39.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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(); };
![Page 41: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/41.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
it’s clearer to work with markup than raw
javascript
![Page 42: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/42.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
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> ); }
![Page 45: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/45.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
define states, not transitionsfunctional ui
![Page 48: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/48.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
the view hierarchy is recalculated for every state change
![Page 53: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/53.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
stacked views on steroids flexbox layout
![Page 64: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/64.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
plus content alignment, self alignment and more
![Page 65: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/65.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
i liked flexBox so muchi created a swift version
![Page 68: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/68.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
react makes it easier to reason about application state
![Page 70: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/70.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
it’s under active developmentand sometimes unstable
![Page 71: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/71.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
facebook groups and pages are built on it
![Page 73: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/73.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
until now i’ve been a pure native developer
![Page 74: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/74.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
it allows rapid iterationon your product ideas
![Page 75: React Native](https://reader034.vdocuments.us/reader034/viewer/2022042707/58f0f80c1a28abdf5a8b4691/html5/thumbnails/75.jpg)
kevin o’neillemail: [email protected] twitter: @kevinoneill
it’s a cornerstone technologyfor my new startup