React Native for ReactJS Devs

Information about React Native for ReactJS Devs

Published on July 27, 2016

Author: barakcohen1

Source: slideshare.net

Content

1. REACT NATIVE FOR REACT DEVELOPERS Barak Cohen, Wondermall

2. 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

3. 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

4. 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

5. 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

6. Powered by React-Native

7. BASICS

8. 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

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

10. 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> ) } }

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

12. 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

13. 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

14. STYLE & LAYOUT

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

16. FLEXBOX LAYOUT class HelloWorldView extends React.Component { 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> ) } }

17. FLEXBOX LAYOUT - 2 class HelloWorldView extends React.Component { 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> ) } }

18. 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} /> ); } }

19. ROUTING

20. 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

21. 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> ) } }

22. UNIVERSAL APPS

23. 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>

24. DEBUGGING & TOOLING

25. • 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

26. REDUX REMOTE DEV TOOLS

27. 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

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

29. INTEGRATION & INTERNALS

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

31. - (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]; }

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

33. { // 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"]; }

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

35. // 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

36. 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); } }

37. 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();

38. MISC.

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

40. 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

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

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

43. THANK YOU! (QUESTIONS?)

#import presentations

Introduction to ml
18. 06. 2020
0 views

Introduction to ml

Python OpenCV Real Time projects
31. 05. 2020
0 views

Python OpenCV Real Time projects

Related presentations