Charla dada dentro de la Semana del Impulso TIC DevFest Asturias, GDG Asturias Avilés, Centro Niemeyer, 3 de noviembre de 2016 https://goo.gl/Udysyl Angular 1 estaba muerto, en el verano de 2015 nadie quería programar. Sobre todo porque iba a salir Angular 2. ¿Qué hizo que esto cambiase? La salida de Angular 1.5 y la nueva arquitectura de componentes hizo que volviese a la vida y que el cambio a Angular 2 fuera mucho más simple.

1. El viaje de Angular1 a Angular2
Antonio de la Torre
#DevFestAsturias 03/11/2016
@adelatorrefoss

2. Angular
“AngularJS is a structural
framework for dynamic web apps.
It lets you use HTML as your
template language and lets you
extend HTML's syntax to express
your application's components
clearly and succinctly. Angular's
data binding and dependency
injection eliminate much of the code
you would otherwise have to write.
Angular teaches the browser new
syntax through a construct we call
directives.“
https://docs.angularjs.org/guide/introduction

3. Oyendo hablar de
Angular2 desde el
verano pasado
(2015)
y que Angular 1
está muerto.

4. Antonio de la Torre
Software Developer

5. Me mudé en Julio
tras 12 años en Madrid

6. #Movember
mobro.co/tonodelatorre

7. ¿Qué aporta
Angular?
● Completo.
● Te ahorra la fontanería.
● Bien documentado.
● Mucha comunidad.
● Patrón reconocido MVC.
● ES6.
● Opinionado
(pero si no te gusta tengo otra)

8. Mundo viejuno
aka Angular < 1.5

12. Ejemplo de código:
https://angularjs.org/#create-components

13. from
angular.module('directives')
.directive('pony', function(){
return {
scope: {
name: '='
},
controllerAs: 'vm',
controller: function($scope){
var vm = this;
vm.name = $scope.name;
// we have to add a watcher on $scope.name to make this work
$scope.$watch('name', function(newName){
vm.name = newName;
});
},
template: '<p>{{vm.name}}</p>'
}
});

14. to
angular.module('directives')
.directive('pony', function(){
return {
bindToController: {
name: '='
},
controllerAs: 'vm',
scope: true,
controller: function(){},
template: '<p>{{vm.name}}</p>'
}
});

15. Componentes

16. React es lo que
está de moda

17. Los COMPONENTES están de moda

19. ReduxFlux

20. https://facebook.github.io/flux/docs/overview.html#structure-and-data-flow
Flux

21. https://egghead.io/series/getting-started-with-redux
Redux

22. Three Principles of Redux
Single source of truth
The state of your whole application is stored in an object tree within a single store.
State is read-only
The only way to change the state is to emit an action, an object describing what
happened.
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.http://redux.js.org/docs/introduction/ThreePrinciples.html

23. https://css-tricks.com/learning-react-redux/

24. https://css-tricks.com/learning-react-redux/

25. Javascript Fatigue

26. “The Javascript pendulum has swung from
restrictive, monolithic frameworks to
modular, boilerplate-hindered libraries.”
EricClemmons
https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.nzcp66xkh

27. Javascript Fatigue Fatigue

28. Don’t try to know everything – it’s impossible in
modern web development.
I find it important to remain human. Don’t overdo
discipline, don’t become a life improvement
machine. Periods of boredom and doing nothing are
important for recuperating and inspiration.
AxelRauschmayer
http://www.2ality.com/2016/02/js-fatigue-fatigue.html

29. Guías de estilo
vienen en nuestra ayuda

30. Guías de estilo de
John Papa y Todd Motto
para Angular 1.4 mejoró la situación
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
https://github.com/toddmotto/angular-styleguide

32. Y Angular crea
.component()

33. Aparece Angular 1.5 (febrero 2016)
última release 1.x => 2.0

34. Angular 1 Changelog
1.3.0 superluminal-nudge (2014-10-13)
1.4.0 jaracimrman-existence (2015-05-26)
1.3.20 shallow-translucence (2015-09-29)
1.5.0 ennoblement-facilitation (2016-02-05)
1.2.30 patronal-resurrection (2016-07-21) only version branch that supports IE8
1.5.8 arbitrary-fallbacks (2016-07-22)
1.4.13 croaking-elderweed (2016-10-10)
1.6.0-rc.0 bracing-vortex (2016-10-26)https://github.com/angular/angular.js/blob/master/CHANGELOG.md

35. Angular 2 Changelog
2.0.0-alpha.27 (2015-06-17)
2.0.0-alpha.55 (2015-12-15)
2.0.0-beta.17 (2016-04-28)
2.0.0-rc.0 (2016-05-02)
2.0.0-rc.7 (2016-09-13)
2.0.0 proprioception-reinforcement
(2016-09-14)
https://github.com/angular/angular/blob/master/CHANGELOG.md
2.1.0 incremental-metamorphosis
(2016-10-12)
2.2.0-beta.1 (2016-10-27)
2.1.2 (2016-10-27)

36. La arquitectura de
componentes en Angular 1.5

37. La arquitectura de componentes
● Solo controlan su propia vista y datos
● Tienen una API bien definida
● Una aplicación es un árbol de componentes
● Eliminó la magia negra de las directivas
● No hace falta conocer el ciclo de compilación a fondo
● No es necesario acceder al $scope

38. ES6
Clases
Módulos
Arrow function
Array (y nuevos tipos)
...

39. Migrating from 1.4 to 1.5
https://docs.angularjs.org/guide/migration
Angular 1.5 takes a big step towards preparing developers for a smoother transition to
Angular 2 in the future. Architecting your applications using components, multi-slot
transclusion, one-way bindings in isolate scopes, using lifecycle hooks in directive
controllers and relying on native ES6 features (such as classes and arrow functions) are
now all possible with Angular 1.5.

40. Ejemplo de código:
https://docs.angularjs.org/guide/component

41. Guía de estilo Angular 1.5 de Todd Motto
Scope
- Stateful components
- Stateless components
Directives
- Directives should be used solely for decorating the DOM.
Eventos
- Comunicación con el padre por eventos. $event

42. Pasar datos de componentes hacia arriba:
About events
https://toddmotto.com/angular-1-5-lifecycle-hooks
Okay, bear with me, we’re in the final phase. This is where things get… interesting.
Instead of just passig back this.user into the function, we’re going to fake an $event
Object, which complies with how Angular 2 does this (using EventEmitter), and also
provides global consistency between your templates to fetch data back through the

44. El lío del router
● ngRoute para v1.4
● ngComponentRouter para v1.5
● RouterModule para v2
● ui-router (estándar de facto en todas)

45. Angular 2

46. Ventajas
● Componentes
● Independiente de la plataforma
● Web workers
● Server side rendering
● Typescript
● Rx
http://slides.com/gruizdevilla/angular-2-workshop#/
https://www.youtube.com/watch?v=7vSPfmHWIjA

47. tipos
anotaciones

48. RxJS
eventos
Event Sourcing
Martin Fowler (2005)

49. Ventajas
● ES6 (Módulos y clases)
● No ng-class, no ng-click, all are DOM native
attributes.
An Angular 2 Force Awakens - John Papa
Ng Conf 2016 4 May

50. some code...
<html>
<head>
<title>Angular 2</title> </head>
<!-- ... -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

51. some code...
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name"
placeholder="name">
</div>
`})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}

52. some code...
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },...];
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span>
{{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name"
placeholder="name"/>
</div>
</div>
`,
styles: [`...`]
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}

54. Guías de estilo (otra vez)

55. Angular 2 Style Guide by John Papa
The Angular 2 Style Guide
https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md
“The Angular 2 Style Guide has been moved
to the Official Angular 2 docs.”

56. Angular 2 migration guide by Todd Motto
“Convert your Angular 1 knowledge into Angular 2.
Select a topic and start learning!”
http://ngmigrate.telerik.com/

57. Formación!

58. Cursos
Egghead
https://egghead.io/technologies/angular2
John Papa
https://www.pluralsight.com/blog/software-development/john-papa-angular2
John's newest Pluralsight course: Angular 2: First Look

59. Conferencias
https://github.com/mikedice/ngconf2016-slides/blob/master/ngconf-slides.md
Publicado el 4 may. 2016
http://angularconnect.com/2016/sessions/
Publicado el 27 sept. 2016

60. Combo!

61. Angular + Redux
Managing state with Redux and Angular 1
http://blog.rangle.io/managing-state-redux-angular/
Angular 1.x Redux: Introduction
https://egghead.io/courses/getting-started-with-redux
Build Redux Style Applications with Angular2, RxJS, and ngrx/store
https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs

62. ¿Qué tal el viaje?
¿Tiene sentido?
gracias
@adelatorrefoss