Upgrade to Pro — share decks privately, control downloads, hide ads and more …

El viaje de Angular 1 a Angular2

El viaje de Angular 1 a Angular2

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.

359a7444d48909f35a6a3816913fb64c?s=128

Antonio de la Torre Fernández

November 03, 2016
Tweet

Transcript

  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

  9. None
  10. None
  11. None
  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

  18. None
  19. Redux Flux

  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.” Eric Clemmons 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. Axel Rauschmayer 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
  31. None
  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
  43. None
  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; } }
  53. None
  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