SlideShare una empresa de Scribd logo
AGENDA
Qué es?
Cómo funciona?
Historia
Porqué usarlo?
Performance
Quién lo usa?
Porqué vamos a usarlo en HOP?
Futuro
Demo
QUÉ ES?
Que no es?
• App web incrustada dentro una webview
• App js
React Native es un framework open source
creado por Facebook para desarrollo de apps
mobile nativas utilizando JavaScript, React y
JSX
CÓMO FUNCIONA?
React Native toma el código JavaScript ( React y JSX )
y utilizando un “puente” invoca APIS en código para
generar la aplicacion para cada dispositivo -
Objective-C (iOS) o Java (Android)
HISTORIA
2009 - Apache Cordova
2011 - Xamarin
2013 - Ionic – angularjs
2014 - Swift (IOS)
2015 - React Native
2016 – Kotlin (Android)
2017 - Flutter
La principal diferencia entre ReactNative y las apps basadas en Cordova es
que en Cordova las apps se ejecutan dentro de una webview, mientras
las RectNative apps renderizan utilizando views nativas.
Las apps de ReactNative tienen acceso directo a todas la APIs y views que
ofrecen los sistemas operativos. De forma que la experiencia de usuario y el
rendimiento es el mismo de una aplicación 100% nativa.
PORQUE USAR REACT NATIVE
Rápido desarrollo
Utiliza componentes nativos
LiveReload
Unit testing con Jest
Mismo código para apps IOS y Andriod
Rápida curva de aprendizaje
Componentes reutilizables
Se puede utilizar junto con código nativo
PERFORMANCE
Comparing the Performance between Native iOS (Swift) and React-Native
Una contra de ReactNative es el peso de la app ya compilada
QUIEN LO USA?
HOP
Código React
Comparte código entre desktop y mobile
Versión IOS y versión Android.
Equipo de desarrollo reducido
Cuenta con una gran comunidad
Gran cantidad de paquetes ya desarrollados
FUTURO
FUTURO?
DEMO
Let's see how its works!
Q&A
Preguntas?

Más contenido relacionado

La actualidad más candente

React native development with expo
React native development with expoReact native development with expo
React native development with expo
SangSun Park
 
Architecture mvc
Architecture mvcArchitecture mvc
Architecture mvcMadridal
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah
 
React Hooks
React HooksReact Hooks
React Hooks
Erez Cohen
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
Akira Inoue
 
React web development
React web developmentReact web development
React web development
Rully Ramanda
 
CI/CD 101
CI/CD 101CI/CD 101
CI/CD 101
djdule
 
Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to docker
Frederik Mogensen
 
ASP.NET Core MVC with EF Core code first
ASP.NET Core MVC with EF Core code firstASP.NET Core MVC with EF Core code first
ASP.NET Core MVC with EF Core code first
Md. Aftab Uddin Kajal
 
Micro-frontend
Micro-frontendMicro-frontend
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
React – ¿Qué es React.js?
React – ¿Qué es React.js?React – ¿Qué es React.js?
React – ¿Qué es React.js?
Gorka Magaña
 
Introduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker CaptainIntroduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker Captain
Ajeet Singh Raina
 
Github in Action
Github in ActionGithub in Action
Github in Action
Morten Christensen
 
React native
React nativeReact native
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design Principles
Andreas Enbohm
 
React hooks
React hooksReact hooks
React hooks
Ramy ElBasyouni
 
Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI
Ajinkya Saswade
 
React hooks
React hooksReact hooks
React hooks
Assaf Gannon
 

La actualidad más candente (20)

React native development with expo
React native development with expoReact native development with expo
React native development with expo
 
Architecture mvc
Architecture mvcArchitecture mvc
Architecture mvc
 
React and redux
React and reduxReact and redux
React and redux
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
React Hooks
React HooksReact Hooks
React Hooks
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
React web development
React web developmentReact web development
React web development
 
CI/CD 101
CI/CD 101CI/CD 101
CI/CD 101
 
Introduction to docker
Introduction to dockerIntroduction to docker
Introduction to docker
 
ASP.NET Core MVC with EF Core code first
ASP.NET Core MVC with EF Core code firstASP.NET Core MVC with EF Core code first
ASP.NET Core MVC with EF Core code first
 
Micro-frontend
Micro-frontendMicro-frontend
Micro-frontend
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
React – ¿Qué es React.js?
React – ¿Qué es React.js?React – ¿Qué es React.js?
React – ¿Qué es React.js?
 
Introduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker CaptainIntroduction to Docker Containers - Docker Captain
Introduction to Docker Containers - Docker Captain
 
Github in Action
Github in ActionGithub in Action
Github in Action
 
React native
React nativeReact native
React native
 
SOLID Design Principles
SOLID Design PrinciplesSOLID Design Principles
SOLID Design Principles
 
React hooks
React hooksReact hooks
React hooks
 
Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI Android jetpack compose | Declarative UI
Android jetpack compose | Declarative UI
 
React hooks
React hooksReact hooks
React hooks
 

Similar a React native

Creando apps móviles en React Native
Creando apps móviles en React NativeCreando apps móviles en React Native
Creando apps móviles en React Native
Belatrix Software
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptx
NicolasCBarrantes
 
Como crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + IonicComo crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + Ionic
Antonio Torres
 
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones MóvilesLos Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
EanMusk
 
Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuro
BBVA API Market
 
Cuestionario
CuestionarioCuestionario
Cuestionario
Francisco Vallejo
 
Primeros pasos con ReactNative
Primeros pasos con ReactNativePrimeros pasos con ReactNative
Primeros pasos con ReactNative
Irene Alonso Candelario
 
Ionic: el framework para crear aplicaciones-hibridas-multiplataforma
Ionic: el framework para crear aplicaciones-hibridas-multiplataformaIonic: el framework para crear aplicaciones-hibridas-multiplataforma
Ionic: el framework para crear aplicaciones-hibridas-multiplataforma
QuasarMaximus
 
IONIC, el framework para crear aplicaciones híbridas multiplataforma
IONIC, el framework para crear aplicaciones híbridas multiplataformaIONIC, el framework para crear aplicaciones híbridas multiplataforma
IONIC, el framework para crear aplicaciones híbridas multiplataforma
betabeers
 
Tecnologias emergentes moviles
Tecnologias emergentes movilesTecnologias emergentes moviles
Tecnologias emergentes moviles
Kio Kusanagi
 
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
 
Consideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativasConsideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativas
Software Guru
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
Raelyx Cordero
 
Una Mirada a Ionic framework.
Una Mirada a Ionic framework.Una Mirada a Ionic framework.
Una Mirada a Ionic framework.
Luis Toscano
 
Angular 2 & nativescript… chau híbrido
Angular 2 & nativescript… chau híbridoAngular 2 & nativescript… chau híbrido
Angular 2 & nativescript… chau híbrido
melidevelopers
 
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de IngenieríaNativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
Jorge Ventura
 
Ionic y angular.js
Ionic y angular.jsIonic y angular.js
Ionic y angular.js
GDG Cali
 
Desarrollo de aplicaciones móviles con Ionic y Apache Cordova
Desarrollo de aplicaciones móviles con Ionic y Apache CordovaDesarrollo de aplicaciones móviles con Ionic y Apache Cordova
Desarrollo de aplicaciones móviles con Ionic y Apache Cordova
Alián Rigñack Quevedo
 
Google
GoogleGoogle
Google
kamui002
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf
DubiWeb.TK
 

Similar a React native (20)

Creando apps móviles en React Native
Creando apps móviles en React NativeCreando apps móviles en React Native
Creando apps móviles en React Native
 
Herramientas de desarrollo.pptx
Herramientas de desarrollo.pptxHerramientas de desarrollo.pptx
Herramientas de desarrollo.pptx
 
Como crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + IonicComo crear una app móvil con WordPress + Ionic
Como crear una app móvil con WordPress + Ionic
 
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones MóvilesLos Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
Los Beneficios de Ionic en el Desarrollo de Aplicaciones Móviles
 
Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuro
 
Cuestionario
CuestionarioCuestionario
Cuestionario
 
Primeros pasos con ReactNative
Primeros pasos con ReactNativePrimeros pasos con ReactNative
Primeros pasos con ReactNative
 
Ionic: el framework para crear aplicaciones-hibridas-multiplataforma
Ionic: el framework para crear aplicaciones-hibridas-multiplataformaIonic: el framework para crear aplicaciones-hibridas-multiplataforma
Ionic: el framework para crear aplicaciones-hibridas-multiplataforma
 
IONIC, el framework para crear aplicaciones híbridas multiplataforma
IONIC, el framework para crear aplicaciones híbridas multiplataformaIONIC, el framework para crear aplicaciones híbridas multiplataforma
IONIC, el framework para crear aplicaciones híbridas multiplataforma
 
Tecnologias emergentes moviles
Tecnologias emergentes movilesTecnologias emergentes moviles
Tecnologias emergentes moviles
 
6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles 6 Lenguajes para dispositivos móviles
6 Lenguajes para dispositivos móviles
 
Consideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativasConsideraciones al escoger apps híbridas vs nativas
Consideraciones al escoger apps híbridas vs nativas
 
Software en la actualidad
Software en la actualidadSoftware en la actualidad
Software en la actualidad
 
Una Mirada a Ionic framework.
Una Mirada a Ionic framework.Una Mirada a Ionic framework.
Una Mirada a Ionic framework.
 
Angular 2 & nativescript… chau híbrido
Angular 2 & nativescript… chau híbridoAngular 2 & nativescript… chau híbrido
Angular 2 & nativescript… chau híbrido
 
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de IngenieríaNativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
NativeScript – Barcamp 2016 - Universidad Nacional de Ingeniería
 
Ionic y angular.js
Ionic y angular.jsIonic y angular.js
Ionic y angular.js
 
Desarrollo de aplicaciones móviles con Ionic y Apache Cordova
Desarrollo de aplicaciones móviles con Ionic y Apache CordovaDesarrollo de aplicaciones móviles con Ionic y Apache Cordova
Desarrollo de aplicaciones móviles con Ionic y Apache Cordova
 
Google
GoogleGoogle
Google
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf
 

React native

  • 1.
  • 2. AGENDA Qué es? Cómo funciona? Historia Porqué usarlo? Performance Quién lo usa? Porqué vamos a usarlo en HOP? Futuro Demo
  • 3. QUÉ ES? Que no es? • App web incrustada dentro una webview • App js React Native es un framework open source creado por Facebook para desarrollo de apps mobile nativas utilizando JavaScript, React y JSX
  • 4. CÓMO FUNCIONA? React Native toma el código JavaScript ( React y JSX ) y utilizando un “puente” invoca APIS en código para generar la aplicacion para cada dispositivo - Objective-C (iOS) o Java (Android)
  • 5. HISTORIA 2009 - Apache Cordova 2011 - Xamarin 2013 - Ionic – angularjs 2014 - Swift (IOS) 2015 - React Native 2016 – Kotlin (Android) 2017 - Flutter La principal diferencia entre ReactNative y las apps basadas en Cordova es que en Cordova las apps se ejecutan dentro de una webview, mientras las RectNative apps renderizan utilizando views nativas. Las apps de ReactNative tienen acceso directo a todas la APIs y views que ofrecen los sistemas operativos. De forma que la experiencia de usuario y el rendimiento es el mismo de una aplicación 100% nativa.
  • 6. PORQUE USAR REACT NATIVE Rápido desarrollo Utiliza componentes nativos LiveReload Unit testing con Jest Mismo código para apps IOS y Andriod Rápida curva de aprendizaje Componentes reutilizables Se puede utilizar junto con código nativo
  • 7. PERFORMANCE Comparing the Performance between Native iOS (Swift) and React-Native Una contra de ReactNative es el peso de la app ya compilada
  • 9. HOP Código React Comparte código entre desktop y mobile Versión IOS y versión Android. Equipo de desarrollo reducido Cuenta con una gran comunidad Gran cantidad de paquetes ya desarrollados
  • 12. DEMO Let's see how its works!

Notas del editor

  1. Pros of Flutter Faster code writing that normally takes seconds and helps teams with adding features, fixing bugs, and experimenting faster Developers need to write just one codebase which is used for apps covering both Android and iOS platforms Having a similar app for two platforms means that it requires less time in testing and the Quality Assurance process can be faster. Simple to make your own widgets or customize existing widgets such as material design widgets or Cupertino widgets. Ideal for MVP because you need to build the app in less time Cons of Flutter Flutter is still in beta and has not released the stable version yet. It is also not supported by Continuous Integration (CI) platforms like Travis or Jenkins. Thus, in order to achieve automatic building, app testing, and deployment, your development team needs to use and keep custom content. Flutter is fully supported by Google and there are several useful libraries with functionalities that are ready to implement. However, Flutter is still not at all that rich with respect to native development Pros of Xamarin The framework uses C# language that functions flawlessly over a myriad of platforms (Android, iOS, and Windows) More than 1.4 million developers used Xamarin in the first quarter of 2017, due to its ability to write native UI codebase for mobile app development If you are building an app for multiple platforms (like Android, iOS, etc.) you can share or reuse most of your code in your app for the other platforms Access to native API: You can get platform-specific functionalities in your app Several controls and layouts provided in Xamarin helps with a faster development process Faster app development with NuGet and Xamarin plugins Used by numerous well-known brands, this cross-platform app development framework offers competitiveness in developing outstanding native app interfaces that successfully outperforms the limitations of hybrid apps Cons of Xamarin Xamarin is not free and you not only need to buy the framework but its price. So, this is not at all for startups or budget constraint businesses Limited access to different vital libraries for the creation of an app using this framework User-Interface (UI) development is time-consuming as the core user-interface creation is not mobile Xamarin suffers from low community activity, which is not good for developing a framework.