React Native

Gwen Faraday

  • Developer at Ion Three - Mobile, Web
  • Free Code Camp Indy
  • Mobile Experience:
    • Ionic
    • Cordova
    • Phonegap
    • jQuery Mobile
    • React Native
    • Dabbled in Swift/Java

Case for Javascript in Mobile

  • Mobile Development is expensive 
  • Swift/Java aren't optimized for dev Productivity
  • Easier Support for Multiple Platforms
  • Reuse:
    • Skills
    • Code
    • Personal

Hybrid Apps

  • Webview using HTML5 and Javascript
  • Wrapped in a native container

Why Do People Still Prefer Native?

LinkedIn, Facebook

Tried Hybrid Solutions, but...

  • It was slow
  • Not enough good tools
    • Performance monitoring
    • Debugging/Diagnostics
  • Memory exhaustion -> App crashes
  • Animations weren't smooth
  • Neither was touch tracking
  • And so on...

But there are problems with NATIVE too!

So, what's the solution?

(Cost, Dev Time, Productivity...)

What is React Native?

  • Javascript for Native Development
  • Based on React Framework
  • "Learn Once, Build Anywhere"
  • Not Entirely Native,
  • But Not Hybrid Either
  • Almost completely native look/feel
  • UI
  • Touch
  • Navigation
  • Integrations
  • *Performance

React Native

FEELS Native...

... and has a web-like dev experience

How is it native?

Runs on a background thread.

Sends minimal code to main thread.

Benefits and Problems it Solves

  • Developer Productivity
  • Developer Experience
  • User Experience (Compared to Hybrid)
  • Code Reuse Across Web and Mobile
  • Async Performance

Setting Up

  • Install Node, Watchman, React Native CLI Globally
  • Android Studio and/or Xcode

Detailed Instructions:

React Native Docs - Getting Set Up

Getting Started

$ react-native init amEco
$ react-native run-ios
$ react-native run-android

Basic Flow of a React Native App

Babel

DEMO

Code Reuse

  • Logic
  • Styles
  • Components
  • Web apps written in React
  • HTML/CSS/JS
  • iOS and Android

Microsoft Code Push - Instant Updates

Apple's Terms:

Can only push over the air updates through the JavascriptCore.

https://github.com/Microsoft/react-native-code-push

Companies Using React Native

  • Facebook/Instagram
  • Wix
  • Airbnb
  • Baidu
  • Discord
  • Soundcloud

Example - Wix

Example - Discord

"As a native iOS developer, I strongly doubted using web technologies to build mobile apps... but I am glad we made that decision."

  • v 1 built in two weeks on the existing front-end infrastructure.
  • Flexbox’s style code much shorter and easier to understand than the code of Auto Layout.
  • iOS app and web app share 98% of the code of store and actions.

Links

Libraries

Questions

?

Thanks for Coming!

Made with Slides.com