Going (React) Native

In this talk (given originailly at Modev DC), I talk about building native modules for ReactNative apps

Transcript

1. Going (React) Native
   Arpit Mathur
   Principal Engineer, Comcast Innovation Labs
   Manager, Philly Google Dev. Group / Android Philly
   

   View Slide

2. About Me
   ● Developer:
   ○ Flash, JavaScript, iOS, Android, Rails
   ○ Shipped the first Comcast iOS app
   ○ Research: Wearables, VR/AR, Blockchains
   ○ Manager: Google Developer Group / Android Philly
   ● Design
   ○ Comcast UX (2 years)
   @arpit
   

   View Slide

3. Next up
   ● Quick Intro to ReactJS
   ● Moving from ReactJS to React Native
   ● My secret awesome app called #insert-app-name#
   ● Using React Native in #insert-app-name#
   ● Final thoughts
   

   View Slide

4. A Quick Intro to React
   

   View Slide

5. Motivation
   ● Problem: Facebook.com’s constant mutating DOM
   ● Solution:
   ○ Don’t modify DOM, just declare state changes
   ○ Use well defined components with clear contracts
   

   View Slide

6. A Simple ReactJS app
   

   View Slide

7. ReactJS Features
   ● Virtual DOM
   ● Unidirectional data flow
   ○ Props
   ○ States
   ● Well defined Component Lifecycle
   

   View Slide

8. React ➡ React Native
   

   View Slide

9. ✅ Virtual DOM
   ✅ Sync with UI thread
   ⭐ Native Components
   

   View Slide

10. React Native Components
    Native Controls Custom Controls PolyFills
    View
    Text
    Alert
    ScrollView
    Networking
    Geolocation
    FlexBox
    

    View Slide

11. Components
    Platform Specific
    Components
    

    View Slide

12. Sample
    

    View Slide

13. View Slide

14. A Brief History of Cross Platform Mobile
    Tech
    

    View Slide

15. Apache Cordova / PhoneGap / Ionic
    Build native apps with JavaScript and HTML
    Pros:
    ● HTML, CSS, JS
    Cons:
    ● Poor performance, esp on
    Android (HTML doesn’t take
    advantage of multi-core)
    

    View Slide

16. Xamarin
    Cross platform mobile apps in C# (Recently bought my Microsoft)
    Pros:
    ● C#
    Cons:
    ● C#
    

    View Slide

17. Appcelerator
    JavaScript proxy for native UIs
    Pros:
    ● JavaScript
    Cons:
    ● Poor performance
    ○ (JavaScript x Native cross talk)
    

    View Slide

18. Google Flutter
    React Native...but with Dart...and by Google
    Pros / Cons
    ¯\_(ツ)_/¯
    

    View Slide

19. View Slide

20. Can I just port the business
    logic to JavaScript ?
    

    View Slide

21. Why not go all in with React Native?
    ● RecyclerView > React Native Lists
    ● Existing functionality
    ○ Formatted code support in chat stream
    ● UX - Maybe
    

    View Slide

22. Building Native Modules (No UI)
    ● Build / take a native component in Android / iOS
    ● Write the a native wrapper to expose it to javascript
    ○ Expose methods by annotating with @ReactMethod
    ○ Visual component? Implement createViewInstance (ThemedReactContext context)
    ● Create a ReactPackage that describes all your components
    ● Write a javascript component shim file
    ● Use javascript component as you would any other React component
    

    View Slide

23. Layout
    

    View Slide

24. Java:
    

    View Slide

25. View Slide

26. View Slide

27. message_insert.js
    index.android.js
    

    View Slide

28. Parting thoughts:
    ● ReactJS is actually pretty awesome
    ● Some React Native components are not as performant out of the box
    ○ List controls don’t implement item recycling
    ● React Native setup was a little painful but worth it (maybe)
    ○ Currently chatscript code is shared between web and native app
    ○ Development time is much faster: Hot reload of JS vs native compile
    

    View Slide

29. Links
    ● ReactJS
    ● Create React App
    ● React Fiber
    

    View Slide

30. Arpit Mathur
    http://arpitonline.com
    @arpit
    Thanks!
    

    View Slide