Damos a un repaso a las principales características de Angular 2 y como aprovechas las nuevas revoluciones en el desarrollo frontend: Web components y TypeScript

1. Empezando con
Angular 2
@raguilera82
linkedin.com/in/rubenaguilera
github.com/raguilera82

2. ¿Cómo os podemos ayudar?
@raguilera82

3. @raguilera82

4. @raguilera82

5. @raguilera82

6. @raguilera82

7. Características
principales
@raguilera82

8. Aprovecha las revoluciones frontEnd
JULIO 2014 JUNIO 2015
Web Components JavaScript
@raguilera82

9. Web Components
CUSTOM ELEMENTS
HTML IMPORTS
TEMPLATES
SHADOW DOM
@raguilera82

10. Soporte de navegadores
@raguilera82

11. Estado actual de JavaScript
@raguilera82

12. Variables de bloque
var tipo = ‘gato’
if (tipo){
var tipo = ‘perro’
console.log(tipo)
}
console.log(tipo)
let tipo = ‘gato’
if (tipo){
let tipo = ‘perro’
console.log(tipo)
}
console.log(tipo)
@raguilera82

13. Template Strings
let nombre = ‘Mateo’
let cadena = `
<div>
<p>Hola ${nombre}</p>
</div>`
console.log(cadena)
let nombre = ‘Mateo’
let cadena = ‘<div><p>Hola
${nombre}</p></div>’
let cadena = ‘<div>’ +
<p>Hola $nombre</p> +
‘</div>’
console.log(cadena)
@raguilera82

14. Arrow Functions
let animal = {
nombre: 'Coco',
identificar: function (){
setTimeout(() => {
console.log(`Identifico a ${this.nombre}`)
},1000)
}
}
animal.identificar()
@raguilera82

15. Promesas (I)
function obtenerDatos () {
return new Promise((resolve, reject) => {
let n = Math.floor(Math.random() * 2) + 1
setTimeout(() => {
if (n === 1) resolve('Datos obtenidos');
else reject(new Error('Error'))
}, 1000);
});
}
@raguilera82

16. Promesas (II)
obtenerDatos()
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
});
@raguilera82

17. Clases
class Animal {
constructor(nombre, raza){
this.nombre = nombre
this.raza = raza
}
correr(){
console.log(`El ${this.raza} corre`)
}
}
@raguilera82

18. Clases (Métodos estáticos)
class Animal {
constructor(nombre, raza){
this.nombre = nombre
this.raza = raza
}
static saludar(nombre){
console.log('Hola soy ' + nombre)
}
}
@raguilera82

19. Clases (Herencia)
class Gato extends Animal{
constructor(nombre){
super(nombre, 'Gato')
}
conquistarMundo(){
console.log(`${this.nombre} puede conquistar el mundo`)
}
}
@raguilera82

20. Modules (I)
export class Calculadora{
sumar(a, b){
return a + b
}
restar(a, b){
return a - b
}
}
@raguilera82

21. Modules (II)
import {Calculadora} from 'calc/Calculadora';
describe('Calculadora', function() {
it ('Should sumar', function() {
let a = 1;
let b = 3;
let calc = new Calculadora();
expect(calc.sumar(a,b)).toBe(4);
});
});
@raguilera82

22. Tipos de datos
let height: number = 6
let name:string = ‘Luis’
let isDone:boolean = false
let notSure:any = 4
notSure = ‘cuatro’
function warnUser(): void{
console.log(‘Warn user’)
}
enum Color{Red, Blue}
let c:color = Color.Red
let twoTypes: string | null
@raguilera82

23. Clases (atributos privados)
class Animal {
private nombre:string
constructor(nombre:string){
this.nombre = nombre
}
toString(){
return `${this.nombre}`
}
}
class Animal {
constructor(private
nombre:string){}
toString(){
return `${this.nombre}`
}
}
@raguilera82

24. Interfaces (implements)
interface Runner{
run()
}
class Persona implements Runner{
constructor(private nombre:string){}
run(){
console.log(`${this.nombre} corre!`)
}
}
@raguilera82

25. Interfaces (Tipo complejo de dato)
interface Direccion{
calle: string
numero: string
portal?: string
}
var direccion:Direccion = {calle: ‘Calle de la manzana’,
numero: ‘4’}
@raguilera82

26. Decorators
import ‘reflect-metadata’
{
"compilerOptions": {
"experimentalDecorators": true
}
}
@Component, @Directive, @Pipe, ...
@raguilera82

27. Simplicidad
Simplifica el diseño de AngularJS
Elimina los 5 tipos de servicios,
el $scope, el DDO, los modules,
directivas propias (ng-click)
La sintaxis es más legible
gracias a TypeScript y los templates
¡Aumenta la productividad de los equipos!
@raguilera82

28. Componentes
@Component({
selector: ‘hello-world’,
template: `<h1>
{{hello}}
</h1>`
})
export class
HelloWorldComponent {
let hello:string = ‘Hello
World!’
constructor(){
console.log(this.hello)
}
}
<body>
<hello-world></hello-world>
</body>
@raguilera82

29. Rendimiento
Mejora el change detection
con programación reactiva
Databinding unidireccional
Optimizado para móviles
https://www.youtube.com/watch?v=UxjgUjVpe24
@raguilera82

30. Data binding
`<p>My favourite {{color}}</p>`
`<p>My favourite <span [textContent]="color"></span></p>`
`<button (click)="onSave()">Save</button>`
`<input [(ngModel)]="color">`
@raguilera82

31. Inyección de dependencias
Heredado de AngularJS
Menor acoplamiento entre clases
Favorece las pruebas unitarias con dobles
Favorece la utilización de TDD
@raguilera82

32. Inyección de dependencias
bootstrap(App, [HelloWorldService])
@Component({
providers: [HelloWorldService]
})
constructor(@Inject(HelloWorldService) private
helloWorldService:HelloWorldService)
@raguilera82

33. Testabilidad
@raguilera82

34. Inyección de dependencias en los tests
import {beforeEachProviders,beforeEach} from ‘angular2/testing’
import {provide} from ‘angular2/core’
beforeEachProviders(()=>[
CarService,
provide(EngineService, {useClass: EngineServiceMock})
])
beforeEach(inject([CarService], (_carService)=>{
carService = _carService
}))

35. Mejoras en el router
Rutas relativas en hijos
Rutas auxiliares con más de un
área de renderizado
Identificadores en cada ruta
para hacer el link por nombre
Paso de cualquier tipo de parámetro
@raguilera82

36. Ejemplo Router
@Component({ ... })
@RouteConfig([
{path:'/crisis-center/...', name: 'CrisisCenter', component:
CrisisListComponent},
{path:'/heroes', name: 'Heroes', component:
HeroListComponent},
{path:'/hero/:id', name: 'HeroDetail', component:
HeroDetailComponent}
])
export class AppComponent { }
@raguilera82

37. Integración con otras tecnologías
@raguilera82

38. Soporte a navegadores
@raguilera82

39. Conclusiones
Sigue y aprovecha todos los estándares web de la W3C
Es una tecnología que no nos limita en ningún campo
Tiene un rendimiento óptimo
Es más simple y comprensible
Permite tener todo nuestro código bajo una red de seguridad
de tests
@raguilera82

40. Estado actual de
Angular 2
@raguilera82

42. Ciclo de sobreexpectación
@raguilera82
Fuente: wikipedia

43. Estrategias de migración
Big Bang Incremental
Aplicaciones pequeñas Aplicaciones grandes
Pocas dependencias Muchas dependencias
Tenemos tiempo No hay tiempo

44. Incremental
Más sencillo si se ha seguido la guia de estilo de John Papa (controller as syntax,
$inject, ...) y estamos en la versión 1.5, todo lo nuevo se va implementando con
TypeScript y Angular 2
Los servicios de AngularJS se reutilizan como clases en Angular 2 lo que cambia
es la forma de inyectar las dependencias. Los controladores se diluyen.
Las directivas con template se tienen que convertir a componentes y las que no
tienen template en directivas de Angular 2

45. angular2/upgrade
//AngularJS
angular.module('heroApp', [])
.directive('heroDetail', upgradeAdapter.
downgradeNg2Component(HeroDetailComponent))
//Angular2
const HeroDetail = upgradeAdapter.upgradeNg1Component
('heroDetail')

46. Para empezar rápidamente
$> npm install -g yo
$> npm install -g generator-ng2
$> mkdir project && cd project
$> yo ng2
@raguilera82