Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Antonio de la Torre Software Developer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#Movember mobro.co/tonodelatorre

Slide 7

Slide 7 text

¿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)

Slide 8

Slide 8 text

Mundo viejuno aka Angular < 1.5

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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: '

{{vm.name}}

' } });

Slide 14

Slide 14 text

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

{{vm.name}}

' } });

Slide 15

Slide 15 text

Componentes

Slide 16

Slide 16 text

React es lo que está de moda

Slide 17

Slide 17 text

Los COMPONENTES están de moda

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Redux Flux

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Javascript Fatigue

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Javascript Fatigue Fatigue

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Guías de estilo vienen en nuestra ayuda

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Y Angular crea .component()

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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)

Slide 36

Slide 36 text

La arquitectura de componentes en Angular 1.5

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Angular 2

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

tipos anotaciones

Slide 48

Slide 48 text

RxJS eventos Event Sourcing Martin Fowler (2005)

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

some code... Angular 2 Loading... https://angular.io/docs/ts/latest/tutorial/toh-pt1.html

Slide 51

Slide 51 text

some code... import { Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: `

{{title}}

{{hero.name}} details!

id: {{hero.id}}
name:
`}) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }

Slide 52

Slide 52 text

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: `

{{title}}

My Heroes

  • {{hero.id}} {{hero.name}}

{{selectedHero.name}} details!

id: {{selectedHero.id}}
name:
`, styles: [`...`] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Guías de estilo (otra vez)

Slide 55

Slide 55 text

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.”

Slide 56

Slide 56 text

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/

Slide 57

Slide 57 text

Formación!

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Combo!

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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