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!

B4fbb97c316798392c24b92f866c5ed6?s=128

Porto Codes

August 24, 2017
Tweet

Transcript

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

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

    know it today."
  3. None
  4. "A javascript framework for cross- platform mobile development"

  5. 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!
  6. None
  7. None
  8. None
  9. 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?
  10. 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
  11. BUT HOW ABOUT REACT NATIVE?

  12. 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
  13. REACT?

  14. A Javascript library for building user interfaces

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

  16. <div class="content"> <div class="profile"> <img src="/avatars/1337.jpg" /> <span class="info"> <i

    class="name">John Doe</i> <i class="title">CFO</i> </span> </div> <span class="contentTitle"> Titles! </span> ... </div>
  17. <Content title="Titles!"> <Profile photoId="1337" name="John Doe" title="CFO"/> ... </Content>

  18. But react isn't just about extracting elements into modules. <ScrollableList>

    { profiles.map( profile => ( <Profile ...profile> )) } </ScrollableList>
  19. REACT COMPONENT reusable, modular, scoped

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

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

  22. 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
  23. BEST FEATURES 1. Multiplatform, 80-90% code share! Metro-bundler is even

    con gured to load .ios.js and .android.js les!
  24. 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!
  25. BEST FEATURES 1. Can be dropped in existant native apps

    You can integrate your existant native modules with the bridge.
  26. BEST FEATURES 1. JavaScript From ow to webpack, npm to

    Typescript, extensive tooling to make JS better exists.
  27. However, a rose without thorns doesn't exist.

  28. WORST FEATURES 1. Javascript Tool complexity can create problems in

    and out of itself.
  29. 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
  30. WORST FEATURES 1. Upgrading and native package management is complicated

    'react-native link' doesn't always work
  31. WORST FEATURES 1. Slight performance overhead Crossing the bridge takes

    time.
  32. WORST FEATURES 1. Iffy licensing Patents involved. Legal departments might

    be concerned.
  33. WORST FEATURES 1. Long dependency chain That's a lot to

    break compared to native toolkits.
  34. LIVE CODING!

  35. 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!
  36. END NOTES

  37. SHOULD YOU USE REACT? It depends.