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

0b0edcef2f3aee7b51cda719e5f82d7c?s=128

Arpit Mathur

June 05, 2017
Tweet

Transcript

  1. Going (React) Native Arpit Mathur Principal Engineer, Comcast Innovation Labs

    Manager, Philly Google Dev. Group / Android Philly
  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
  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
  4. A Quick Intro to React

  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
  6. A Simple ReactJS app

  7. ReactJS Features • Virtual DOM • Unidirectional data flow ◦

    Props ◦ States • Well defined Component Lifecycle
  8. React ➡ React Native

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

    Components
  10. React Native Components Native Controls Custom Controls PolyFills View Text

    Alert ScrollView Networking Geolocation FlexBox
  11. Components Platform Specific Components

  12. Sample

  13. None
  14. A Brief History of Cross Platform Mobile Tech

  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)
  16. Xamarin Cross platform mobile apps in C# (Recently bought my

    Microsoft) Pros: • C# Cons: • C#
  17. Appcelerator JavaScript proxy for native UIs Pros: • JavaScript Cons:

    • Poor performance ◦ (JavaScript x Native cross talk)
  18. Google Flutter React Native...but with Dart...and by Google Pros /

    Cons ¯\_(ツ)_/¯
  19. None
  20. Can I just port the business logic to JavaScript ?

  21. Why not go all in with React Native? • RecyclerView

    > React Native Lists • Existing functionality ◦ Formatted code support in chat stream • UX - Maybe
  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
  23. Layout

  24. Java:

  25. None
  26. None
  27. message_insert.js index.android.js

  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
  29. Links • ReactJS • Create React App • React Fiber

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