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
  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!