Slides for the presentation done in DotnetMalaga 2016 where I compared the three famous JavaScript frameworks Angular 1, React and Angular2. Video of the presentation can be found in: https://www.youtube.com/watch?v=Pc_sAc2q5qI. Source code can be found in: https://github.com/epeicher/Hypotheke

2. Migrando de Angular 1 a React
y a Angular 2!?
@glomenar

3. Roberto Aranda
Lead Developer en Sequel Business Solutions
SQL
Backend
Front end apasionado
10+ años desarrollando software
@glomenar
ese.rober@gmail.com

4. Agenda
Angular 1
React
Angular 2

5. Agenda
Angular 1
React
Angular 2

6. Una historia

7. 2014

8. Hypotheke

9. Hypotheke?

10. AngularJS 1
Superheroic JavaScript MVVM Framework
Creado por Google es uno de los frameworks de JavaScript más
usados
Tiene todo lo necesario para crear una Single Page Application
Usa un event loop conocido como $digest loop para aplicar cambios

11. Show me the
Code

12. 2016

13. React
A JavaScript library for building user interfaces
Creado por Facebook es una apuesta segura estos días
Declarativo y basado en Componentes
Usa el concepto de Virtual DOM para minimizar el rendering

14. ImplicacionesCreas elementos HTML en tus ficheros JavaScript
Inventan un nuevo lenguaje para aliviar el paso anterior
denominado JSX
JSX es simplemente insertar HTML en el fichero JavaScript
Hay que compilar JSX como un paso previo
No se llama compilar, se llama transpilar
Se usa Babel que realiza la compilación
Para usar el navegador, necesitas dos librerias: React y ReactDOM
Los componentes de React se pueden crear como clases ES6
extendiendo React.Component
No se llama ES6, se llama ES2015

15. Javascript
Fatigue
Saul: “How’s it going?”
Me: “Fatigued.”
Saul: “Family?”
Me: “No, Javascript.”

16. create-react-app
Paquete NodeJs para crear aplicaciones con React, incluye el
transpilador, bundler, hot-realoading, server, etc. con
Zero Configuration

17. Vamos a verlo

18. 2016... y pico

19. AngularJS 2
One framework
Creado por Google no es una evolución de Angular 1 sino una re-
escritura desde cero
También está basado en Componentes pero contiene mucho más
que UI
Mejora notablemente el rendimiento gracias a una nueva
estrategia de detección de cambios
Usa una librería externa llamada ZoneJs para notificar los cambios

20. Vamos al turrón

21. Conclusiones
Hay una clara tendencia al diseño orientado a Componentes, no
solo en React y Angular 2 sino en otros frameworks
El Front End Development ha cambiado y cambia a gran velocidad
como se puede ver comparando Angular 1 y 2
A pesar de las diferencias se identifican patrones comunes. Los
frameworks son herramientas pero los buenos principios los
pones tu: Single Responsibility y Separation of Concerns
React es solo una librería de UI mientras que Angular es un
framework completo. Esto implica la necesidad de tomar más
decisiones en desarrollo y más diferencias entre aplicaciones.
React facilita la Composición de una manera natural y simple,
Angular 2 parece más verbose

22. No hay ni habrá un Framework que los gobierne a
todos

23. ¿Preguntas?