Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Introducción a React Native

Introducción a React Native

Charla presentada en el meetup local NSCoders Night Madrid introduciendo react-native y algunos de los motivos por los que en ticketea hemos comenzado una nueva aplicación con esta tecnología.

Presentada por Jorge Maroto @patoroco y Miguel Araujo @maraujop.

Ticketea Engineering

December 02, 2015
Tweet

More Decks by Ticketea Engineering

Other Decks in Programming

Transcript

  1. Framework by facebook Using React Easy bridging native code Multiplatform

    apps written in JavaScript (actually ES2015) What is React Native? 4
  2. It's a pattern supported by a library Different implementations: ReactJS

    / React Native Everything in React is a component Data flow is unidirectional What is React? 8
  3. Not a webview Not a 100% code reuse Closer to

    frontend development than native development What is not React Native? 11
  4. Support for iOS / Android index.ios.js / index.android.js ToastAndroid /

    ActivityIndicatorIOS Differences between Android / iOS 15
  5. There is a great getting started tutorial from facebook Better

    on OS X XCode > 7.0 / Android 6.0 (API 23) node 4.0 + watchman + flow npm install -g react-native-cli Getting started 17
  6. react-native init <project_name> . ├── android ├── index.android.js ├── index.ios.js

    ├── ios ├── node_modules └── package.json react-native init 18
  7. Only compile when native code added react-native run-android compile on

    XCode facebook packager react-native start Autoreload on JavaScript changes Development process 19
  8. Not storyboards (and much less autolayout) either XML layouts CSS

    + flexbox as styling language Design & layout 25
  9. Single place for our state Predictable code flow Redux has

    been very easy to test Flux & Redux 46
  10. Blocking animations Some inconsistencies between iOS / Android We’ve hit

    around 12 bugs and reported some Early adopting on Android Issues 48
  11. Sharing code between platforms (including tests) Testing in JS-way (no

    simulator needed) Web developers can easily jump into react-native Some things are done faster (less boilerplate) React and redux are a killer combo Learning curve Advantages 49
  12. Missing more best practices Storyboards vs. (JSX + flexbox) (Swift

    / Obj-C / Java / Kotlin) vs. JS Mature ecosystem with less WTF/min More libraries available Disadvantages 50