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

Learn Once, Write Anywhere: Intro to React Native

Learn Once, Write Anywhere: Intro to React Native

Facebook has gifted the world with a new way to develop native mobile applications using JavaScript: React Native. This doesn't sound like a very revolutionary concept, but the way Facebook chose to do it makes React Native stand out among its peers. In this talk, we’ll take a look at what RN is, how it differs from its competition, and why we might want to use it. Geared toward developers with limited or no experience building mobile applications, it takes a high level view of the framework and makes a compelling case for considering it as part of your toolset.

Aaron Greenwald

April 05, 2016
Tweet

More Decks by Aaron Greenwald

Other Decks in Technology

Transcript

  1. Introduction to React Native
    Learn Once, Write Anywhere
    Aaron Greenwald
    github.com/aarongreenwald
    @aaronjgreenwald
    [email protected]

    View full-size slide

  2. 01 / Meet React Native

    View full-size slide

  3. “A framework for building native apps
    with React”
    - Facebook

    View full-size slide

  4. “A framework for building native apps
    with React”
    - Facebook
    Very popular, but very young and
    unstable

    View full-size slide

  5. Wait...this isn’t new
    let [
    PhoneGap,
    Trigger.io,
    Cordova,
    Ionic,
    Sencha Touch,
    Kendo UI,
    Appcelerator Titanium,
    Xamarin
    ...rest
    ] = stuffWeTriedBefore;

    View full-size slide

  6. 02 / How It Differs

    View full-size slide

  7. Webviews vs Native UI

    View full-size slide

  8. Write Once, Run Anywhere

    View full-size slide

  9. Write Once, Run Nowhere

    View full-size slide

  10. Learn Once, Write Anywhere

    View full-size slide

  11. 03 / How it Works

    View full-size slide

  12. JS Core UI
    Bridge

    View full-size slide

  13. UI
    Asynchronous
    Serializable
    Batched
    Communication
    JS Core

    View full-size slide

  14. 04 / How It Feels

    View full-size slide

  15. Look Ma, No XCode!!!

    View full-size slide

  16. IDE Packager
    Chrome
    Simulator

    View full-size slide

  17. 05 / Advantages

    View full-size slide

  18. We need native mobile apps
    but we hate writing them

    View full-size slide

  19. Smoother transition from the web

    View full-size slide

  20. Use the richest ecosystem there is
    Smoother transition from the web

    View full-size slide

  21. Use the richest ecosystem there is
    Smoother transition from the web
    Develop quickly

    View full-size slide

  22. Develop quickly
    Use the richest ecosystem there is
    Smoother transition from the web
    Deploy like you’re on the web

    View full-size slide

  23. Develop quickly
    Deploy like you’re on the web
    Use the richest ecosystem there is
    Smoother transition from the web
    Learn Once, Write Anywhere

    View full-size slide

  24. Develop quickly
    Deploy like you’re on the web
    Use the richest ecosystem there is
    Learn Once, Write Anywhere
    Smoother transition from the web
    Reuse code

    View full-size slide

  25. We need native mobile apps
    but we hate writing them

    View full-size slide

  26. UX of Native
    Developer Experience of the Web

    View full-size slide

  27. But...what if it limits me?

    View full-size slide

  28. By definition.

    View full-size slide

  29. 06 / It’s Still Not Web Development

    View full-size slide

  30. You can’t always
    code push.
    Sometimes
    you need to change
    binaries.
    It’s Still Not Web Development

    View full-size slide

  31. You can’t always
    code push.
    Sometimes
    you need to change
    binaries.
    Styling is
    different.
    Presents a
    learning curve.
    It’s Still Not Web Development

    View full-size slide

  32. You can’t always
    code push.
    Sometimes
    you need to change
    binaries.
    Styling is
    different.
    Presents a
    learning curve.
    Platform-specific
    thinking.
    Adapt requirements
    and mindset for
    mobile.
    Debugging isn’
    t the same.
    It’s getting better,
    but slowly.
    It’s Still Not Web Development

    View full-size slide

  33. It’s Still Not Web Development
    You can’t always
    code push.
    Sometimes
    you need to change
    binaries.
    Styling is
    different.
    Presents a
    learning curve.
    Platform-specific
    thinking.
    Adapt requirements
    and mindset for
    mobile.
    Debugging isn’
    t the same.
    It’s getting better,
    but slowly.

    View full-size slide

  34. 07 / Should I Use It?
    Umm...it depends

    View full-size slide

  35. ● Many poorly solved
    problems
    ● No consensus on best
    practices
    ● Instability
    ● Large community
    ● Many solved problems
    ● A chance to get involved

    View full-size slide

  36. ● Many poorly solved
    problems
    ● No consensus on best
    practices
    ● Instability
    ● Large community
    ● Many solved problems
    ● A chance to get involved
    If your scale is relatively small,
    stick to traditional native

    View full-size slide

  37. ● Reuse web developers’
    skills
    ● Transition quickly
    between web and mobile
    ● Deliver amazing mobile
    apps
    ● Many poorly solved
    problems
    ● No consensus on best
    practices
    ● Instability

    View full-size slide

  38. ● Reuse web developers’
    skills
    ● Transition quickly
    between web and mobile
    ● Deliver amazing mobile
    apps
    If you’re Wix,
    you don’t really have a choice
    ● Many poorly solved
    problems
    ● No consensus on best
    practices
    ● Instability

    View full-size slide

  39. Resources
    The INTERNET

    View full-size slide

  40. Resources
    The Mobile Guild
    The INTERNET
    https://github.com/wix/awesome-mobile-framework

    View full-size slide