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

React Native

React Native

Presentation by João Anes

In this talk, we’re gonna talk mobile development without using strictly native tools - and yes, these sorts of platforms usually result in apps that don’t quite nail the native look&feel, residing in an uncanny valley for applications. However, this one’s a little different.

We’re talking about React Native, a mobile development framework, created, developed and endorsed by Facebook you can plug right in your existing native code to gain developer superpowers: Hot Reloading, instant deploys without an AppStore round-trip, UI expressed in React components and many more! Facebook says it’ll replace mobile development as we know it - so let’s see how true that might be!

Porto Codes

August 24, 2017
Tweet

More Decks by Porto Codes

Other Decks in Programming

Transcript

  1. REACT NATIVE
    Or how to make mobile development bearable again

    View full-size slide

  2. "a framework that will wholly replace
    mobile development as we know it
    today."

    View full-size slide

  3. "A javascript framework for cross-
    platform mobile development"

    View full-size slide

  4. BEST FEATURES
    1. Multiplatform, 80-90% code share!
    2. Faster iteration and development speed than native
    3. Can be dropped in existant native apps
    4. Write once, run anywhere, in JavaScript!

    View full-size slide

  5. EVALUATION CRITERIA
    1. How is your code written/represented?
    2. How is your code ran, and by what?
    3. Who renders the user interface, and how?

    View full-size slide

  6. PHONEGAP (CORDOVA)
    1. You write code in javascript, and you communicate
    with native modules through a bridge
    2. Your JS code is interpreted by the device's JS Virtual
    Machine
    3. Your views are written in HTML and rendered by the
    device's webview

    View full-size slide

  7. BUT HOW ABOUT REACT
    NATIVE?

    View full-size slide

  8. REACT NATIVE
    1. You write code in javascript, communicating with
    native modules through a bridge
    2. Your JS code is interpreted by a vendored
    JavascriptCore
    3. Your views are written in React and rendered
    natively

    View full-size slide

  9. A Javascript library for building user
    interfaces

    View full-size slide

  10. React is an unopinionated, declarative
    way to describe UI.

    View full-size slide





  11. John Doe
    CFO



    Titles!

    ...

    View full-size slide

  12. But react isn't just about extracting elements into
    modules.

    {
    profiles.map( profile => (

    ))
    }

    View full-size slide

  13. REACT COMPONENT
    reusable, modular, scoped

    View full-size slide

  14. REACT COMPONENT
    Large open-source scene, thousands of reusable
    components

    View full-size slide

  15. But enough of that, what about the native?

    View full-size slide

  16. BEST FEATURES
    1. Multiplatform, 80-90% code share!
    2. Faster iteration and development speed than native
    3. Can be dropped in existant native apps
    4. JavaScript

    View full-size slide

  17. BEST FEATURES
    1. Multiplatform, 80-90% code share!
    Metro-bundler is even con gured to load .ios.js and
    .android.js les!

    View full-size slide

  18. BEST FEATURES
    1. Faster iteration and development speed than native
    Since your app is just a js bundle, you can beam that to
    your clients bypassing the stores!

    View full-size slide

  19. BEST FEATURES
    1. Can be dropped in existant native apps
    You can integrate your existant native modules with
    the bridge.

    View full-size slide

  20. BEST FEATURES
    1. JavaScript
    From ow to webpack, npm to Typescript, extensive
    tooling to make JS better exists.

    View full-size slide

  21. However, a rose without thorns doesn't exist.

    View full-size slide

  22. WORST FEATURES
    1. Javascript
    Tool complexity can create problems in and out of itself.

    View full-size slide

  23. WORST FEATURES
    1. Driven by Facebook needs
    Sometimes other companies and communities rise to
    the challenge. No router?
    * https://github.com/airbnb/native-navigation
    * https://github.com/wix/react-native-navigation
    * https://github.com/react-community/react-navigation

    View full-size slide

  24. WORST FEATURES
    1. Upgrading and native package management is
    complicated
    'react-native link' doesn't always work

    View full-size slide

  25. WORST FEATURES
    1. Slight performance overhead
    Crossing the bridge takes time.

    View full-size slide

  26. WORST FEATURES
    1. Iffy licensing
    Patents involved. Legal departments might be
    concerned.

    View full-size slide

  27. WORST FEATURES
    1. Long dependency chain
    That's a lot to break compared to native toolkits.

    View full-size slide

  28. LIVE CODING!

    View full-size slide

  29. CONTINUED FUTURE?
    Dogfooded and integrated into products at founding
    company
    Most code is open sourced, even if Facebook
    abandons
    Thousands of apps by different companies depend
    on them
    Microsoft maintains a Modern UI-frontend!

    View full-size slide

  30. SHOULD YOU USE REACT?
    It depends.

    View full-size slide