Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. Motivation • Problem: Facebook.com’s constant mutating DOM • Solution: ◦

    Don’t modify DOM, just declare state changes ◦ Use well defined components with clear contracts
  5. ReactJS Features • Virtual DOM • Unidirectional data flow ◦

    Props ◦ States • Well defined Component Lifecycle
  6. React Native Components Native Controls Custom Controls PolyFills View Text

    Alert ScrollView Networking Geolocation FlexBox
  7. 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)
  8. Appcelerator JavaScript proxy for native UIs Pros: • JavaScript Cons:

    • Poor performance ◦ (JavaScript x Native cross talk)
  9. Why not go all in with React Native? • RecyclerView

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