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

Rapid Mobile Development with React Native

Rapid Mobile Development with React Native

This is my presentation from F8 Meetup Malang on 19 April 2017. https://f8meetupmalang2017.splashthat.com/

Simon Sturmer
PRO

April 19, 2017
Tweet

More Decks by Simon Sturmer

Other Decks in Programming

Transcript

  1. Rapid Mobile Development
    with React Native
    19th April 2017

    View Slide

  2. I’m Simon
    JavaScript and React Enthusiast
    Founder and CTO - KodeFox, Inc.
    Twitter: @sstur_

    View Slide

  3. What is React Native
    Lets’ start with:

    View Slide

  4. React Native
    Enables you to build high quality
    native iOS and Android applications
    easily and quickly.

    View Slide

  5. React Native is free and
    open source.

    It was built at Facebook.

    View Slide

  6. Developer Experience
    Using React Native + Expo you can build for
    iOS and Android without ever opening
    Android Studio or Xcode and you don’t even
    need a Mac.

    View Slide

  7. Developer Joy
    •High performance compared with other cross-
    platform frameworks
    •Exceptional developer experience compared with
    native iOS/Android
    •Easy to get started

    View Slide

  8. React Web vs React Native

    View Slide

  9. Expo
    Expo is essentially a set of tools around React Native.
    • Extended access to native features (e.g. push
    notifications)
    • Easily Building and Running on Devices
    • Deployment

    View Slide

  10. Getting Started
    1) Start a project using create-react-native-app

    View Slide

  11. Getting Started
    2) Open your favorite editor and hack on some code.

    View Slide

  12. Getting Started
    3) Run on your device: npm start

    View Slide

  13. This is where the Magic happens.

    View Slide

  14. View Slide

  15. View Slide

  16. We can run a native app effortlessly.
    (as easy as loading a webpage)

    View Slide

  17. Let’s try it now…

    View Slide

  18. [Bonus] Snack…

    View Slide

  19. This approach gives us:
    Everything React Native provides, PLUS:
    • Audio
    • Simple Push Notifications
    • QR code reader
    • Accelerometer
    • Map View
    • Video
    • Camera / Image Picker
    • SVG
    • Location services
    • Social Login

    View Slide

  20. Publishing
    Several Options:
    • Easily publish on the Expo platform
    • Build a standalone app for submitting to the App/Play Store
    • Detach and then use Xcode or Android Studio

    View Slide

  21. When to use React Native
    • When you want a great developer experience.
    • When you want high performance cross-platform.
    • Always.

    View Slide

  22. Benefits:
    • Easy to get started
    • Rapid Prototyping
    • Over the air updates (Code Push)
    • Easily send clients a demo of your app during development.
    • Cross platform
    • … much more

    View Slide

  23. Thanks for Listening!
    [email protected]
    github.com/sstur
    @sstur_
    Special Thanks to:

    View Slide