React Native

Presentation by João Anes

In this talk, we’re gonna talk mobile development without using strictly native tools - and yes, these sorts of platforms usually result in apps that don’t quite nail the native look&feel, residing in an uncanny valley for applications. However, this one’s a little different.

We’re talking about React Native, a mobile development framework, created, developed and endorsed by Facebook you can plug right in your existing native code to gain developer superpowers: Hot Reloading, instant deploys without an AppStore round-trip, UI expressed in React components and many more! Facebook says it’ll replace mobile development as we know it - so let’s see how true that might be!

Transcript

1. REACT NATIVE
   Or how to make mobile development bearable again
   

   View Slide

2. "a framework that will wholly replace
   mobile development as we know it
   today."
   

   View Slide

3. View Slide

4. "A javascript framework for cross-
   platform mobile development"
   

   View Slide

5. BEST FEATURES
   1. Multiplatform, 80-90% code share!
   2. Faster iteration and development speed than native
   3. Can be dropped in existant native apps
   4. Write once, run anywhere, in JavaScript!
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. EVALUATION CRITERIA
   1. How is your code written/represented?
   2. How is your code ran, and by what?
   3. Who renders the user interface, and how?
   

   View Slide

10. PHONEGAP (CORDOVA)
    1. You write code in javascript, and you communicate
    with native modules through a bridge
    2. Your JS code is interpreted by the device's JS Virtual
    Machine
    3. Your views are written in HTML and rendered by the
    device's webview
    

    View Slide

11. BUT HOW ABOUT REACT
    NATIVE?
    

    View Slide

12. REACT NATIVE
    1. You write code in javascript, communicating with
    native modules through a bridge
    2. Your JS code is interpreted by a vendored
    JavascriptCore
    3. Your views are written in React and rendered
    natively
    

    View Slide

13. REACT?
    

    View Slide

14. A Javascript library for building user
    interfaces
    

    View Slide

15. React is an unopinionated, declarative
    way to describe UI.
    

    View Slide

16. 
    
    
    
    John Doe
    CFO
    
    
    
    Titles!
    
    ...
    
    

    View Slide

17. 
    
    ...
    
    

    View Slide

18. But react isn't just about extracting elements into
    modules.
    
    {
    profiles.map( profile => (
    
    ))
    }
    
    

    View Slide

19. REACT COMPONENT
    reusable, modular, scoped
    

    View Slide

20. REACT COMPONENT
    Large open-source scene, thousands of reusable
    components
    

    View Slide

21. But enough of that, what about the native?
    

    View Slide

22. BEST FEATURES
    1. Multiplatform, 80-90% code share!
    2. Faster iteration and development speed than native
    3. Can be dropped in existant native apps
    4. JavaScript
    

    View Slide

23. BEST FEATURES
    1. Multiplatform, 80-90% code share!
    Metro-bundler is even con gured to load .ios.js and
    .android.js les!
    

    View Slide

24. BEST FEATURES
    1. Faster iteration and development speed than native
    Since your app is just a js bundle, you can beam that to
    your clients bypassing the stores!
    

    View Slide

25. BEST FEATURES
    1. Can be dropped in existant native apps
    You can integrate your existant native modules with
    the bridge.
    

    View Slide

26. BEST FEATURES
    1. JavaScript
    From ow to webpack, npm to Typescript, extensive
    tooling to make JS better exists.
    

    View Slide

27. However, a rose without thorns doesn't exist.
    

    View Slide

28. WORST FEATURES
    1. Javascript
    Tool complexity can create problems in and out of itself.
    

    View Slide

29. WORST FEATURES
    1. Driven by Facebook needs
    Sometimes other companies and communities rise to
    the challenge. No router?
    * https://github.com/airbnb/native-navigation
    * https://github.com/wix/react-native-navigation
    * https://github.com/react-community/react-navigation
    

    View Slide

30. WORST FEATURES
    1. Upgrading and native package management is
    complicated
    'react-native link' doesn't always work
    

    View Slide

31. WORST FEATURES
    1. Slight performance overhead
    Crossing the bridge takes time.
    

    View Slide

32. WORST FEATURES
    1. Iffy licensing
    Patents involved. Legal departments might be
    concerned.
    

    View Slide

33. WORST FEATURES
    1. Long dependency chain
    That's a lot to break compared to native toolkits.
    

    View Slide

34. LIVE CODING!
    

    View Slide

35. CONTINUED FUTURE?
    Dogfooded and integrated into products at founding
    company
    Most code is open sourced, even if Facebook
    abandons
    Thousands of apps by different companies depend
    on them
    Microsoft maintains a Modern UI-frontend!
    

    View Slide

36. END NOTES
    

    View Slide

37. SHOULD YOU USE REACT?
    It depends.
    

    View Slide