Skip to content

WhyReactNative.md

Latest commit

 

History

History
211 lines (129 loc) · 3.97 KB

WhyReactNative.md

File metadata and controls

211 lines (129 loc) · 3.97 KB

"Inspirado" en la charla en UIKonf de Nick Lockwood

[fit] React Native 101

[fit] https://github.com/alexissan/ReactNativeWorkshop

¿Qué es React Native?

Un framework para escribir apps nativas

¡Gracias Facebook!

¡Desarrollar apps nativas ya es ideal!

fit

Desarrollar apps en 2016

  1. Ciclo de desarrollo lento
  2. Ciclo de release eterno
  3. Equipos separados por plataforma
  4. APIs distintas para hacer lo mismo

[fit] ¡Usemos WebViews!

fit

Webviews en 2016

  1. Rendimiento pobre
  2. Experiencia de usuario inferior
  3. Funcionalidades nativas limitadas

Webviews en 2016


1. Rendimiento pobre

[fit] 2. Experiencia de usuario inferior

3. Funcionalidades nativas limitadas

[fit] React Native

[fit] Misma experiencia de usuario

[fit] Mejor experiencia de desarrollo

React Native en 2016

  1. Ciclo de desarrollo lento Recarga instantánea
  2. Ciclo de release lento Actualizaciones OTA legales !!!
  3. Equipos separados por plataforma Mismas herramientas
  4. APIs distintas para hacer lo mismo APIs consistentes

[fit]Write once, run anywhere

[fit]Escribe una vez, ejecuta en cualquier lado

[fit]Write once, run anywhere

[fit]Escribe una vez, ejecuta en cualquier lado

Diferentes plataformas tienen diferentes experiencias de usuario

[fit] Learn once, run anywhere

[fit] Aprende una vez, ejecuta en cualquier lado

React Native en 2016

  1. Rendimiento pobre Árbol de vistas virtual
  2. Experiencia de usuario inferior Vistas nativas
  3. Funcionalidades nativas limitadas Fácil de extender

Apps en 2016

  • Hacer aplicaciones dinámicas es complicado
  • Pocos estados -> muchas transiciones
  • Escalar aplicaciones web estáticas es mucho más fácil
  • Petición HTTP -> App -> Respuesta HTML

Interfaces con estado mutables

Difícil de:

  1. Entender
  2. Debuggear
  3. Mantener
  4. Reutilizar
  5. Testear

Interfaces con estado mutables

[fit] Vistas immutables

[fit] Funciones de renderizado puras

[fit] Flujo de datos en un sentido

Aviso: Javascript

inline

render: function(state) {
  return (
    <View name={state.name} />
  );
}
  • UI funcional basado en componentes
  • Árbol de vistas virtual
  • Frontend en JavaScript (ES6, npm, TypeScript...)
  • Layout con JSX
  • Estilos inline con Flexbox (Next-Gen CSS)
  • Backend nativo (UIKit, network, storage, location...)

¿Cómo funciona?

  • Hilo en segundo plano ejecuta nuestro JavaScript
  • Hilo principal habla con UIKit, red, etc
  • Comunicación mínima entre ellos
  • El hilo principal avisa de eventos
  • JavaScript manda diffs de cambios en vistas

Herramientas

  • Visual Studio Code, Sublime, Atom, ...
  • Nuclide
  • ESLint

¿Debería usarlo?

  • Muy joven, no es 100% estable/completo
  • Comunidad muy activa
  • Varias apps de Facebook ya en la AppStore
  • Disponible para Android

DEMO!!

fit

Enlaces útiles

Preguntas
⚡