Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native - from a mobile (iOS) developer pr...

React Native - from a mobile (iOS) developer prospective

React Native - from a mobile (iOS) developer prospective

Konstantin

October 11, 2015
Tweet

More Decks by Konstantin

Other Decks in Programming

Transcript

  1. ME let sex = ! var job = "iOS Dev"

    var company = "# // Rocketfarm let ❤ = % //"Swift" ❤% < ❤& == true var like = ' + ( + ✏
  2. BACK TO THE FUTURE > July 10 2008: iPhone 3G,

    App Store and Facebook app > mid-2010: Facebook's "Write Once, Run Everywhere" > 2 April 2009 PhoneGap - wins People's Choice Award at Web 2.0 Conference
  3. Stage 2 ! > Be curious > Open Minded >

    Life learning - - - - - - - - - - The Goal is to Learn
  4. Stage 3 ! > Native UI > Declarative UI >

    Learn once, write everywhere
  5. <Text> Welcome to React Native! </Text> <ListView dataSource= {this.state.dataSource} renderRow=

    {this.renderMyCell} style= {styles.listView} /> -> UITextView *textView = [UITextView new]; textView.text = @"Welcome to React Native!"; UITableView *tableView = [UITableView new]; tableView.dataSource = self; [tableView registerClass:[MyCell class] forCellReuseIdentifier:@"MyCellId"];
  6. Each React Native UI Component maps to iOS native UI

    element * Platform specific native component
  7. DECLARATIVE UI > State -> UI - - - >

    Independent Composable Components > Local components state, no Global > One way data flow
  8. DECLARATIVE UI - COMPONENT --------------- | Parameters | --------------- ⇣

    --------------- --------------- | | | State | | | --------------- --------------- ⇣ --------------- | UI | ---------------
  9. LEARN ONCE, WRITE EVERYWHERE React - - - - -

    - - - - - : React JS : : React Native iOS : : React Native Android :
  10. TIME TO FACE REAL PROJECTS PROBLEMS | | | React

    - JS | Native - (Swift or Objc) | | |
  11. TIME TO FACE REAL PROBLEMS > Hardware access > Native

    code (Swift and Objective-C) > Performance - - - - - - - - - - > Reliability > Support and community
  12. NATIVE CODE (OBJC) //Objective-C @implementation MyComponent RCT_EXPORT_MODULE(); //RCT_EXPORT_METHOD = -

    (void) RCT_EXPORT_METHOD(sendString:(NSString *)string) { NSLog(@"Received: %@", string); } @end - - - //JS var ObjcComponent = require('react-native').NativeModules.MyComponent; ObjcComponent.sendString('Hello Objc');
  13. NATIVE CODE (SWIFT) //Swift @objc(MySwiftComponent) class MySwiftComponent : NSObject {

    @objc func sendString(x: String) { print("Received: \(x)") } } //Objective-C @interface RCT_EXTERN_MODULE(MySwiftComponent, NSObject) RCT_EXTERN_METHOD(sendString:(NSString *)x) @end //JS var SwiftComponent = require('react-native').NativeModules.MySwiftComponent; SwiftComponent.sendString('Swift all the things !');
  14. NATIVE → JS //Objective-C RCT_EXPORT_METHOD(getString:(RCTResponseSenderBlock)callback) { callback(@[[NSNull null], @"Result"]); }

    @objc func getString(response: RCTResponseSenderBlock ) { response([NSNull(), "Result"]) } //+ RCT_EXTERN_METHOD(getString:(RCTResponseSenderBlock)response) in Objc //JS ObjcComponent.getString((error, param) => { console.error(error + " " + param); });
  15. NATIVE → JS (PROMISES) RCT_EXPORT_METHOD(getStringAsync:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { BOOL yesNo =

    YES; if (yesNo) { resolve(@"Yes"); } else { reject([NSError errorWithDomain:@"NO!" code:0 userInfo:nil]); } } @objc func getStringAsync(resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) { let yesNo = true if (true) { resolve("Yes") } else { reject(NSError(domain:"NO!", code:0, userInfo:nil)) } } //+ RCT_EXTERN_METHOD(getStringAsync:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) - - JS - -
  16. NATIVE → JS (PROMISES) //Objective-C - (void)getStringAsync:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject //JS ObjcComponent.getStringAsync().then((value)

    => { console.log(value); }, (error) => { console.log(error); }); // ES7 + Babel JavaScript compiler async function fetchString() { let string = await ObjcComponent.getStringAsync(); console.log("Async +await: " + string); }
  17. NATIVE → JS (EVENTS) #import "RCTEventDispatcher.h" @synthesize bridge = _bridge;

    // Implementing RCTBridgeModule - (void)sendEventToJS { [self.bridge.eventDispatcher sendAppEventWithName:@"MyEvent" body:@{@"param": @"Hello JS"}]; } var { NativeAppEventEmitter } = React; var subscription = NativeAppEventEmitter.addListener('MyEvent', (event) => console.log("§ Event: " + event) ); ! But synthesize is not available in Swift
  18. UI COMPONENT @interface RCTMyViewManager : RCTViewManager @end @implementation RCTMyViewManager RCT_EXPORT_MODULE()

    - (MyView *)view { return [MyView new]; } @end //JS var { requireNativeComponent } = require('react-native'); var MyView = requireNativeComponent('RCTMyView', null); module.exports = MyView render: function() { <MyView> </MyView> }
  19. UI COMPONENT + > Custom properties > Events > JS

    Component wrapper > Styles ...
  20. LIMITATIONS > Methods: instance only > Instance creation control: None,

    1 instance only. Created and cached by NativeModules > Initializer: +(instancetype)new > Arguments: JSON types + RCTConvert > Communication: Asynchronous
  21. PERFORMANCE > React handles DOM manipulation and re-rendering > Animations

    + Navigation Transition > React JS code runs on Background thread (Main thread - UI Only)
  22. STABILITY > Solid architecture ! > Beta v0.12.0 > Rapid

    development/changes > Apps Works Fine, no Crashes > In production - Facebook Groups, Facebook App, Leanpub ...
  23. SUPPORT AND COMMUNITY > Open Sourced ! All is in

    your hands + PR are Welcomed " > Active on Twitter # > Documentation + Examples ------- > StackOverflow $
  24. QUESTIONS Will it replace Native (Swift) - No Was it

    worth - Yes Does React has its user group - Yes Do I want to code more in React - Hell Yeah !! ⇡ Contact me !