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

Going (React) Native

Going (React) Native

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

Arpit Mathur

June 05, 2017
Tweet

More Decks by Arpit Mathur

Other Decks in Technology

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