SlideShare una empresa de Scribd logo
1 de 9
React JS VS Angular 2
En común
Herramienta Frontend
Single Web Applications
Web Componets
Característica Angular 2 React
DOM Regular DOM Virtual DOM
Diseño de código JS en HTML Centrado en JS
Herramientas Muchas Muchas
Curva de aprendizaje Media Baja
Packaging Medio Fuerte
Debugging Bien HTML / Bien JS Mal HTML / Bien JS
CL debugger No Sí
¿Falla cuándo? Compilación Compilación
Binding 2 vías Una dirección
Templating TypeScript JSX
Móvil Ionic Framework React Native
MVC Sí Solo vista
Renderizado Servidor Servidor
Pros Contras
Fácil de aprender No se lleva bien con bibliotecas de manipulación de
DOM como jQuery
Componentes individuales son más fáciles de
mantener
Al principio es puede tomar algo de tiempo
acostumbrarse al flujo de datos en una sola
dirección.
Capacidad de rápido re renderizado mejora la
experiencia del usuario
En ocasiones el re renderizado puede tomar más
tiempo del estimado si hay grandes volúmenes de
datos involucrados, y la aplicación puede sufrir en
rendimiento.
Flux es una buena alternativa a MVC, el flujo de
datos en una sola dirección ayuda a la
mantenibilidad de la aplicación y mantiene los
datos de los elementos del DOM consistentes.
Pros Contras
Orientado a componentes. Problemas de rendimiento, el data
binding bidireccional debe revisar si hay cambios
en el modelo, e interpretar el HTML, por lo que en
aplicaciones complejas esto puede tomar más
tiempo.
Buena documentación y tutoriales. Distribuir lógica de negocios en HTML y en
JavaScript puede causar que el código sea más
difícil de entender, mantener y depurar.
El data binding bidireccional facilita la
implementación de funcionalidades.
La llegada de Angular 2 producirá que el código de
Angular 1.x sea obsoleto.
Búsquedas
0
20
40
60
80
100
120
3/27/2016 4/27/2016 5/27/2016 6/27/2016 7/27/2016 8/27/2016 9/27/2016 10/27/2016 11/27/2016 12/27/2016 1/27/2017 2/27/2017
En los últimos 12 meses
AngularJS: (Todo el mundo) React: (Todo el mundo)
Versiones tentativas
• Angular 4 Marzo 2017
• Angular 5 Septiembre/Octubre 2017
• Angular 6 Marzo 2018
• Angular 7 Septiembre/Octubre 2018
• Semantic versions
• Cambios retrocompatibles
• Tranquis, ya es versión estable
• It’s just ANGULAR
¿Para qué Angular/React?
Repensar cómo hacemos las cosas
hasta ahora con Extjs y Klay
¿De qué me sirve incorporar una
tecnología que actúe idéntico a lo
que ya uso?
No esperes resultados diferentes si siempre haces lo mismo
+ Klay = ?
+ Klay = ?
• Escalabilidad y modularización
• Mantenimiento
• Reutilización de código
• Programadores capacitados
• Tiempo de vida de la tecnología

Más contenido relacionado

La actualidad más candente

React, Flux y React native
React, Flux y React nativeReact, Flux y React native
React, Flux y React nativeEduard Tomàs
 
Pases netbooks entre_colegios
Pases netbooks entre_colegiosPases netbooks entre_colegios
Pases netbooks entre_colegiosMarcos Protzman
 
Presentacion Ruby on Rails en Universidad Autónoma 2009
Presentacion Ruby on Rails en Universidad Autónoma 2009Presentacion Ruby on Rails en Universidad Autónoma 2009
Presentacion Ruby on Rails en Universidad Autónoma 2009Nelson Rojas Núñez
 
Rendimiento Java Script - Programador PHP
Rendimiento  Java Script - Programador PHPRendimiento  Java Script - Programador PHP
Rendimiento Java Script - Programador PHPJuan Belón Pérez
 

La actualidad más candente (8)

React, Flux y React native
React, Flux y React nativeReact, Flux y React native
React, Flux y React native
 
Presentacion node
Presentacion nodePresentacion node
Presentacion node
 
¿Por qué ruby on rails?
¿Por qué ruby on rails?¿Por qué ruby on rails?
¿Por qué ruby on rails?
 
Pases netbooks entre_colegios
Pases netbooks entre_colegiosPases netbooks entre_colegios
Pases netbooks entre_colegios
 
Jsp
JspJsp
Jsp
 
Presentacion Ruby on Rails en Universidad Autónoma 2009
Presentacion Ruby on Rails en Universidad Autónoma 2009Presentacion Ruby on Rails en Universidad Autónoma 2009
Presentacion Ruby on Rails en Universidad Autónoma 2009
 
Introducción a Ruby on rails
Introducción a Ruby on railsIntroducción a Ruby on rails
Introducción a Ruby on rails
 
Rendimiento Java Script - Programador PHP
Rendimiento  Java Script - Programador PHPRendimiento  Java Script - Programador PHP
Rendimiento Java Script - Programador PHP
 

Similar a React VS angular

Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !ouuyeah
 
Desarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones webDesarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones webRoberto Sanz Ciriano
 
J query el framework de la web luc van lancker-1504
J query el framework de la web    luc van lancker-1504J query el framework de la web    luc van lancker-1504
J query el framework de la web luc van lancker-1504Vanessa Carlos
 
Despegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJSDespegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJSFacundo Viale
 
Presentacion taller de programacion
Presentacion taller de programacionPresentacion taller de programacion
Presentacion taller de programacionSaulSoto19
 
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticasUDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticasAnder Martinez
 
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 futuroBBVA API Market
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónVLASLOV
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 
105.desarrollo rest-con-rails
105.desarrollo rest-con-rails105.desarrollo rest-con-rails
105.desarrollo rest-con-railsERWIN AGUILAR
 
Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Robert Rayco Quiroz
 
9 tecnologías v1.1
9 tecnologías v1.19 tecnologías v1.1
9 tecnologías v1.1UTN
 

Similar a React VS angular (20)

Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Desarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones webDesarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones web
 
Hypo slides
Hypo slidesHypo slides
Hypo slides
 
J query el framework de la web luc van lancker-1504
J query el framework de la web    luc van lancker-1504J query el framework de la web    luc van lancker-1504
J query el framework de la web luc van lancker-1504
 
Despegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJSDespegar Tech Talk - AngularJS
Despegar Tech Talk - AngularJS
 
Presentacion taller de programacion
Presentacion taller de programacionPresentacion taller de programacion
Presentacion taller de programacion
 
UDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticasUDA-Desarrollo RUP. Consejos y buenas prácticas
UDA-Desarrollo RUP. Consejos y buenas prácticas
 
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
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - Introducción
 
Temas Relacionados Web 2
Temas Relacionados Web 2Temas Relacionados Web 2
Temas Relacionados Web 2
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Libro introducción a ajax
Libro introducción a ajaxLibro introducción a ajax
Libro introducción a ajax
 
105.desarrollo rest-con-rails
105.desarrollo rest-con-rails105.desarrollo rest-con-rails
105.desarrollo rest-con-rails
 
Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)
 
Asp.net 4
Asp.net 4Asp.net 4
Asp.net 4
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
 
Ajax
AjaxAjax
Ajax
 
9 tecnologías v1.1
9 tecnologías v1.19 tecnologías v1.1
9 tecnologías v1.1
 
Panel Magmaconf
Panel MagmaconfPanel Magmaconf
Panel Magmaconf
 

React VS angular

  • 1. React JS VS Angular 2
  • 2. En común Herramienta Frontend Single Web Applications Web Componets
  • 3. Característica Angular 2 React DOM Regular DOM Virtual DOM Diseño de código JS en HTML Centrado en JS Herramientas Muchas Muchas Curva de aprendizaje Media Baja Packaging Medio Fuerte Debugging Bien HTML / Bien JS Mal HTML / Bien JS CL debugger No Sí ¿Falla cuándo? Compilación Compilación Binding 2 vías Una dirección Templating TypeScript JSX Móvil Ionic Framework React Native MVC Sí Solo vista Renderizado Servidor Servidor
  • 4. Pros Contras Fácil de aprender No se lleva bien con bibliotecas de manipulación de DOM como jQuery Componentes individuales son más fáciles de mantener Al principio es puede tomar algo de tiempo acostumbrarse al flujo de datos en una sola dirección. Capacidad de rápido re renderizado mejora la experiencia del usuario En ocasiones el re renderizado puede tomar más tiempo del estimado si hay grandes volúmenes de datos involucrados, y la aplicación puede sufrir en rendimiento. Flux es una buena alternativa a MVC, el flujo de datos en una sola dirección ayuda a la mantenibilidad de la aplicación y mantiene los datos de los elementos del DOM consistentes.
  • 5. Pros Contras Orientado a componentes. Problemas de rendimiento, el data binding bidireccional debe revisar si hay cambios en el modelo, e interpretar el HTML, por lo que en aplicaciones complejas esto puede tomar más tiempo. Buena documentación y tutoriales. Distribuir lógica de negocios en HTML y en JavaScript puede causar que el código sea más difícil de entender, mantener y depurar. El data binding bidireccional facilita la implementación de funcionalidades. La llegada de Angular 2 producirá que el código de Angular 1.x sea obsoleto.
  • 6. Búsquedas 0 20 40 60 80 100 120 3/27/2016 4/27/2016 5/27/2016 6/27/2016 7/27/2016 8/27/2016 9/27/2016 10/27/2016 11/27/2016 12/27/2016 1/27/2017 2/27/2017 En los últimos 12 meses AngularJS: (Todo el mundo) React: (Todo el mundo)
  • 7. Versiones tentativas • Angular 4 Marzo 2017 • Angular 5 Septiembre/Octubre 2017 • Angular 6 Marzo 2018 • Angular 7 Septiembre/Octubre 2018 • Semantic versions • Cambios retrocompatibles • Tranquis, ya es versión estable • It’s just ANGULAR
  • 8. ¿Para qué Angular/React? Repensar cómo hacemos las cosas hasta ahora con Extjs y Klay ¿De qué me sirve incorporar una tecnología que actúe idéntico a lo que ya uso? No esperes resultados diferentes si siempre haces lo mismo
  • 9. + Klay = ? + Klay = ? • Escalabilidad y modularización • Mantenimiento • Reutilización de código • Programadores capacitados • Tiempo de vida de la tecnología