SlideShare una empresa de Scribd logo
Primeros pasos
con ReactNative
Bienvenido
Index
1. Aplicaciones móviles multiplataforma
2. Un poco de historia
3. Qué aporta nuevo ReactNative
4. Estructura de una app con ReactNative
5. Ecosistema
6. Cómo empezar con ReactNative
.
1. Aplicaciones móviles
multiplataforma
Nativo VS Multiplataforma
Apps multiplataforma
• 1 única aplicación / codebase
• 1 único equipo de desarrollo
• Tecnologías similares o idénticas a lenguajes
utilizados en aplicaciones web (*)
• Rendimiento inferior (*)
• Abierto a otras plataformas, no solo móviles (*)
Apps Nativas
• 2 aplicaciones independientes (iOS / Android)
• Habitualmente 2 equipos de desarrollo distintos
• Acceso a últimos APIs / Features
• Rendimiento TOP
vs
(*) Depende del framework utilizado
.
2.Un poco de historia
Un poco de historia
2009. Nace PhoneGap
2010. Se libera Unity 3.0 con soporte
para iOS y Android
2011. Adobe compra la empresa de
PhoneGap y lo dona a la Apache
Fundation, nace Cordova
2011. GA Appcelerator Titanium
2011. Se funda empresa Xamarin
2013. Nace Ionic
2014. Nace NativeScript
2015. Nace ReactNative
2016. Xamarin es adquirido por
Microsoft
2018. Flutter v.1.0 (by Google)
Uso actual de frameworks multiplataforma
ReactNative: lider en 2019 y 2020
Datos relevantes
Fuente: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/
Desarrollo multiplataforma es 1/3 sobre
desarrollo móvil global
Flutter registra el mayor crecimiento
.
3.Estructura de una app con
ReactNative
Tipos de frameworks multiplataforma
UI Nativo + VM JS
Appcelerator Titanium
NativeScript
ReactNative
Webview
PhoneGap
Cordova
Ionic
Compilación nativa
Xamarin (*)
Flutter
(*) Comportamiento distinto en iOS / Android
(**) La diferencia mayor es entre Webview y el resto
Rendimiento/Velocidad (**)
Arquitectura de una app ReactNative (2020)
Fuente: https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c
Más info: https://www.biz4solutions.com/blog/new-react-native-architecture-value-offerings-and-improvements-in-2020/
.
4.Ecosistema
Ecosistema
Herramienta de consola oficial:
npm install –g react-native-cli
Expo ( https://expo.io/ )
npm install –g expo-cli
.
5.Cómo empezar con
ReactNative
Recursos
Repositorios GIT de la app
https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/
Resumen de comandos
https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/-/blob/master/ME
ETUP.md
Expo (https://expo.io/)
https://docs.expo.io/
https://docs.expo.io/versions/latest/
React-Native
https://reactnative.dev/docs/getting-started
Crear una app desde cero
npm i -g expo-cli @expo/ngrok
expo init qo-rn-meetup
# Elegimos “tabs (Typescript)”
# Conectamos nuestro móvil al PC
adb devices
code qo-rn-meetup
# Desde la consola de VSCode:
expo start
# Pulsar [d]
Preparación entorno:
https://reactnative.dev/docs/environment-setup
Resumen:
GIT, VS Code, NodeJS, explo-cli, Android Studio / SDK
Consola PowerShell
Gestión de estados de los datos
git clone https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app.git
git checkout -b meetup
cd h3lp3r-app
yarn install # or npm install
code .
# Realizaremos el ejercicio de añadir una gestion de favoritos a
H3lp3r app
• Mobx-State-Tree: https://mobx-state-tree.js.org/
• Redux: https://es.redux.js.org/
• Mobx: https://mobx.js.org/
• Context API and React Hooks:
https://es.reactjs.org/docs/context.html
https://es.reactjs.org/docs/hooks-intro.html
Consola PowerShell
Gracias ;)
Roberto Sánchez:
https://www.linkedin.com/in/robertosanchezcustodio
https://www.meetup.com/QOnecta/

Más contenido relacionado

La actualidad más candente

Spring Framework - Core
Spring Framework - CoreSpring Framework - Core
Spring Framework - Core
Dzmitry Naskou
 
Lecture - 1 introduction to java
Lecture - 1 introduction to javaLecture - 1 introduction to java
Lecture - 1 introduction to java
manish kumar
 
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
Edureka!
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
Edureka!
 
Selenium Automation Testing Interview Questions And Answers
Selenium Automation Testing Interview Questions And AnswersSelenium Automation Testing Interview Questions And Answers
Selenium Automation Testing Interview Questions And Answers
Ajit Jadhav
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
Amit Tyagi
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
Sean Wolfe
 
Fetch API Talk
Fetch API TalkFetch API Talk
Fetch API Talk
Chiamaka Nwolisa
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
Jalpesh Vasa
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
Duy Khanh
 
An Introduction to WebAssembly
An Introduction to WebAssemblyAn Introduction to WebAssembly
An Introduction to WebAssembly
Daniel Budden
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
Walid Ashraf
 
Angular 2 observables
Angular 2 observablesAngular 2 observables
Angular 2 observables
Geoffrey Filippi
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
Ben McCormick
 
Selenium-Locators
Selenium-LocatorsSelenium-Locators
Selenium-Locators
Mithilesh Singh
 

La actualidad más candente (20)

Spring Framework - Core
Spring Framework - CoreSpring Framework - Core
Spring Framework - Core
 
Lecture - 1 introduction to java
Lecture - 1 introduction to javaLecture - 1 introduction to java
Lecture - 1 introduction to java
 
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
What is Node.js | Node.js Tutorial for Beginners | Node.js Modules | Node.js ...
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
What Is Spring Framework In Java | Spring Framework Tutorial For Beginners Wi...
 
Selenium Automation Testing Interview Questions And Answers
Selenium Automation Testing Interview Questions And AnswersSelenium Automation Testing Interview Questions And Answers
Selenium Automation Testing Interview Questions And Answers
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
Fetch API Talk
Fetch API TalkFetch API Talk
Fetch API Talk
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
 
Angular Data Binding
Angular Data BindingAngular Data Binding
Angular Data Binding
 
An Introduction to WebAssembly
An Introduction to WebAssemblyAn Introduction to WebAssembly
An Introduction to WebAssembly
 
Xpath presentation
Xpath presentationXpath presentation
Xpath presentation
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Angular 2 observables
Angular 2 observablesAngular 2 observables
Angular 2 observables
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With Jest
 
Selenium-Locators
Selenium-LocatorsSelenium-Locators
Selenium-Locators
 

Similar a Primeros pasos con ReactNative

Desarrollo de apps multiplataforma Movil
Desarrollo de apps multiplataforma MovilDesarrollo de apps multiplataforma Movil
Desarrollo de apps multiplataforma Movil
Ing Erick Guardado
 
Meetup app-moviles
Meetup app-movilesMeetup app-moviles
Meetup app-moviles
miguelcarrascoq
 
Aplicaciones Móviles Híbridas
Aplicaciones Móviles HíbridasAplicaciones Móviles Híbridas
Aplicaciones Móviles Híbridas
Scio Consulting
 
Desarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapDesarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapCongresoWeb
 
27754 ibm wp_native_web_or_hybrid_2846853
27754 ibm wp_native_web_or_hybrid_284685327754 ibm wp_native_web_or_hybrid_2846853
27754 ibm wp_native_web_or_hybrid_2846853
Carlos Andrés Hernández Cabrera
 
Programación de aplicaciones móviles
Programación de aplicaciones móvilesProgramación de aplicaciones móviles
Programación de aplicaciones móviles
GREINDER MARCHENA & LIZ VASQUEZ
 
6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles 6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles
RAUL Velez
 
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
Adrian Diaz Cervera
 
Desarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendidoDesarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendido
José Manuel López
 
Una Mirada a Ionic framework.
Una Mirada a Ionic framework.Una Mirada a Ionic framework.
Una Mirada a Ionic framework.
Luis Toscano
 
R esume libro el gran libro de android
R esume libro el gran libro de androidR esume libro el gran libro de android
R esume libro el gran libro de android
wiliam lliulli herrera
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
Raelyx Cordero
 
Presentacion phonegap phonegapbuilt
Presentacion phonegap phonegapbuiltPresentacion phonegap phonegapbuilt
Presentacion phonegap phonegapbuiltChristhiam Cabrera
 
Conferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvilConferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvilcampus party
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptx
NicolasCBarrantes
 
Phonegap
PhonegapPhonegap
Phonegap
Tensor
 
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEBCapitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
Edwin Ruiz
 
React native
React nativeReact native
React native
Diego Navarré
 
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Roberto Taborda
 

Similar a Primeros pasos con ReactNative (20)

Desarrollo de apps multiplataforma Movil
Desarrollo de apps multiplataforma MovilDesarrollo de apps multiplataforma Movil
Desarrollo de apps multiplataforma Movil
 
Meetup app-moviles
Meetup app-movilesMeetup app-moviles
Meetup app-moviles
 
app
appapp
app
 
Aplicaciones Móviles Híbridas
Aplicaciones Móviles HíbridasAplicaciones Móviles Híbridas
Aplicaciones Móviles Híbridas
 
Desarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta PhonegapDesarrollo de Apps con la herramienta Phonegap
Desarrollo de Apps con la herramienta Phonegap
 
27754 ibm wp_native_web_or_hybrid_2846853
27754 ibm wp_native_web_or_hybrid_284685327754 ibm wp_native_web_or_hybrid_2846853
27754 ibm wp_native_web_or_hybrid_2846853
 
Programación de aplicaciones móviles
Programación de aplicaciones móvilesProgramación de aplicaciones móviles
Programación de aplicaciones móviles
 
6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles 6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles
 
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
[Iberian SharePoint Conference] SharePoint como plataforma de desarrollo móvil
 
Desarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendidoDesarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendido
 
Una Mirada a Ionic framework.
Una Mirada a Ionic framework.Una Mirada a Ionic framework.
Una Mirada a Ionic framework.
 
R esume libro el gran libro de android
R esume libro el gran libro de androidR esume libro el gran libro de android
R esume libro el gran libro de android
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
 
Presentacion phonegap phonegapbuilt
Presentacion phonegap phonegapbuiltPresentacion phonegap phonegapbuilt
Presentacion phonegap phonegapbuilt
 
Conferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvilConferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvil
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptx
 
Phonegap
PhonegapPhonegap
Phonegap
 
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEBCapitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
Capitulo 16 LA NUBE MÓVIL Y EL ECOSISTEMA DE APLICACIONES WEB
 
React native
React nativeReact native
React native
 
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
Como desarrollar aplicaciones moviles, que debemos tener en cuenta?
 

Más de Irene Alonso Candelario

QO_ Taller de autocuidado ante un apocalipsis zombie
QO_ Taller de autocuidado ante un apocalipsis zombieQO_ Taller de autocuidado ante un apocalipsis zombie
QO_ Taller de autocuidado ante un apocalipsis zombie
Irene Alonso Candelario
 
Recetario creativo_QOcreando por la igualdad
Recetario creativo_QOcreando por la igualdadRecetario creativo_QOcreando por la igualdad
Recetario creativo_QOcreando por la igualdad
Irene Alonso Candelario
 
OKRs: Mide tu impacto
OKRs: Mide tu impactoOKRs: Mide tu impacto
OKRs: Mide tu impacto
Irene Alonso Candelario
 
Gamificando retrospectivas
Gamificando retrospectivasGamificando retrospectivas
Gamificando retrospectivas
Irene Alonso Candelario
 
Resiliencia ¡Tirar p´alante!
Resiliencia ¡Tirar p´alante!Resiliencia ¡Tirar p´alante!
Resiliencia ¡Tirar p´alante!
Irene Alonso Candelario
 
Qo "Superpoderes para hablar en positivo"
Qo "Superpoderes para hablar en positivo"Qo "Superpoderes para hablar en positivo"
Qo "Superpoderes para hablar en positivo"
Irene Alonso Candelario
 
FROM lost to the docker
FROM lost to the dockerFROM lost to the docker
FROM lost to the docker
Irene Alonso Candelario
 
¡Manos a la obra con Design Thinking!
 ¡Manos a la obra con Design Thinking! ¡Manos a la obra con Design Thinking!
¡Manos a la obra con Design Thinking!
Irene Alonso Candelario
 

Más de Irene Alonso Candelario (8)

QO_ Taller de autocuidado ante un apocalipsis zombie
QO_ Taller de autocuidado ante un apocalipsis zombieQO_ Taller de autocuidado ante un apocalipsis zombie
QO_ Taller de autocuidado ante un apocalipsis zombie
 
Recetario creativo_QOcreando por la igualdad
Recetario creativo_QOcreando por la igualdadRecetario creativo_QOcreando por la igualdad
Recetario creativo_QOcreando por la igualdad
 
OKRs: Mide tu impacto
OKRs: Mide tu impactoOKRs: Mide tu impacto
OKRs: Mide tu impacto
 
Gamificando retrospectivas
Gamificando retrospectivasGamificando retrospectivas
Gamificando retrospectivas
 
Resiliencia ¡Tirar p´alante!
Resiliencia ¡Tirar p´alante!Resiliencia ¡Tirar p´alante!
Resiliencia ¡Tirar p´alante!
 
Qo "Superpoderes para hablar en positivo"
Qo "Superpoderes para hablar en positivo"Qo "Superpoderes para hablar en positivo"
Qo "Superpoderes para hablar en positivo"
 
FROM lost to the docker
FROM lost to the dockerFROM lost to the docker
FROM lost to the docker
 
¡Manos a la obra con Design Thinking!
 ¡Manos a la obra con Design Thinking! ¡Manos a la obra con Design Thinking!
¡Manos a la obra con Design Thinking!
 

Último

Escaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipoEscaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipo
nicromante2000
 
Caso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La SalleCaso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La Salle
Ecaresoft Inc.
 
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdfIntroducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
AbbieDominguezGirond
 
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJECONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
SamuelGampley
 
Maquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdfMaquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdf
juanjosebarreiro704
 
PitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitalesPitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitales
juanorejuela499
 

Último (6)

Escaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipoEscaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipo
 
Caso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La SalleCaso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La Salle
 
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdfIntroducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
 
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJECONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
 
Maquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdfMaquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdf
 
PitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitalesPitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitales
 

Primeros pasos con ReactNative

  • 2. Bienvenido Index 1. Aplicaciones móviles multiplataforma 2. Un poco de historia 3. Qué aporta nuevo ReactNative 4. Estructura de una app con ReactNative 5. Ecosistema 6. Cómo empezar con ReactNative
  • 4. Nativo VS Multiplataforma Apps multiplataforma • 1 única aplicación / codebase • 1 único equipo de desarrollo • Tecnologías similares o idénticas a lenguajes utilizados en aplicaciones web (*) • Rendimiento inferior (*) • Abierto a otras plataformas, no solo móviles (*) Apps Nativas • 2 aplicaciones independientes (iOS / Android) • Habitualmente 2 equipos de desarrollo distintos • Acceso a últimos APIs / Features • Rendimiento TOP vs (*) Depende del framework utilizado
  • 5. . 2.Un poco de historia
  • 6. Un poco de historia 2009. Nace PhoneGap 2010. Se libera Unity 3.0 con soporte para iOS y Android 2011. Adobe compra la empresa de PhoneGap y lo dona a la Apache Fundation, nace Cordova 2011. GA Appcelerator Titanium 2011. Se funda empresa Xamarin 2013. Nace Ionic 2014. Nace NativeScript 2015. Nace ReactNative 2016. Xamarin es adquirido por Microsoft 2018. Flutter v.1.0 (by Google)
  • 7. Uso actual de frameworks multiplataforma ReactNative: lider en 2019 y 2020 Datos relevantes Fuente: https://www.statista.com/statistics/869224/worldwide-software-developer-working-hours/ Desarrollo multiplataforma es 1/3 sobre desarrollo móvil global Flutter registra el mayor crecimiento
  • 8. . 3.Estructura de una app con ReactNative
  • 9. Tipos de frameworks multiplataforma UI Nativo + VM JS Appcelerator Titanium NativeScript ReactNative Webview PhoneGap Cordova Ionic Compilación nativa Xamarin (*) Flutter (*) Comportamiento distinto en iOS / Android (**) La diferencia mayor es entre Webview y el resto Rendimiento/Velocidad (**)
  • 10. Arquitectura de una app ReactNative (2020) Fuente: https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c Más info: https://www.biz4solutions.com/blog/new-react-native-architecture-value-offerings-and-improvements-in-2020/
  • 12. Ecosistema Herramienta de consola oficial: npm install –g react-native-cli Expo ( https://expo.io/ ) npm install –g expo-cli
  • 14. Recursos Repositorios GIT de la app https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/ Resumen de comandos https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app/-/blob/master/ME ETUP.md Expo (https://expo.io/) https://docs.expo.io/ https://docs.expo.io/versions/latest/ React-Native https://reactnative.dev/docs/getting-started
  • 15. Crear una app desde cero npm i -g expo-cli @expo/ngrok expo init qo-rn-meetup # Elegimos “tabs (Typescript)” # Conectamos nuestro móvil al PC adb devices code qo-rn-meetup # Desde la consola de VSCode: expo start # Pulsar [d] Preparación entorno: https://reactnative.dev/docs/environment-setup Resumen: GIT, VS Code, NodeJS, explo-cli, Android Studio / SDK Consola PowerShell
  • 16. Gestión de estados de los datos git clone https://gitlab.com/qo-oss/h3lp3r/h3lp3r-app.git git checkout -b meetup cd h3lp3r-app yarn install # or npm install code . # Realizaremos el ejercicio de añadir una gestion de favoritos a H3lp3r app • Mobx-State-Tree: https://mobx-state-tree.js.org/ • Redux: https://es.redux.js.org/ • Mobx: https://mobx.js.org/ • Context API and React Hooks: https://es.reactjs.org/docs/context.html https://es.reactjs.org/docs/hooks-intro.html Consola PowerShell