hypo slides

Migrando de Angular 1 a Reacty a Angular 2!?

@glomenar

Roberto ArandaLead Developer en Sequel Business Solutions

SQL

Backend

Front end apasionado

10+ años desarrollando software

@glomenar

ese.rober@gmail.com

AgendaAngular 1

React

Angular 2

AgendaAngular 1

React

Angular 2

Una historia

2014

Hypotheke

Hypotheke?

AngularJS 1Superheroic 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

Show me theCode

2016

ReactA 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

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

JavascriptFatigue

Saul: “How’s it going?”

Me: “Fatigued.”

Saul: “Family?”

Me: “No, Javascript.”

create-react-appPaquete NodeJs para crear aplicaciones con React, incluye el

transpilador, bundler, hot-realoading, server, etc. con

Zero Configuration

Vamos a verlo

2016... y pico

AngularJS 2One 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

Vamos al turrón

ConclusionesHay 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

No hay ni habrá un Framework que los gobierne a

todos

¿Preguntas?