El viaje de Angular1 a Angular2

Antonio de la Torre

#DevFestAsturias 03/11/2016

@adelatorrefoss

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

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

Antonio de la TorreSoftware Developer

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

#Movembermobro.co/tonodelatorre

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

Mundo viejuno

aka Angular < 1.5

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

fromangular.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>'

}

});

toangular.module('directives')

.directive('pony', function(){

return {

bindToController: {

name: '='

},

controllerAs: 'vm',

scope: true,

controller: function(){},

template: '<p>{{vm.name}}</p>'

}

});

Componentes

React es lo que está de moda

Los COMPONENTES están de moda

ReduxFlux

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

https://egghead.io/series/getting-started-with-reduxRedux

Three Principles of ReduxSingle 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

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

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

Javascript Fatigue

“The Javascript pendulum has swung from restrictive, monolithic frameworks to

modular, boilerplate-hindered libraries.”

Eric Clemmons

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.nzcp66xkh

Javascript Fatigue Fatigue

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 Rauschmayerhttp://www.2ality.com/2016/02/js-fatigue-fatigue.html

Guías de estilovienen en nuestra ayuda

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

Y Angular crea

.component()

Aparece Angular 1.5 (febrero 2016)

última release 1.x => 2.0

Angular 1 Changelog1.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

Angular 2 Changelog2.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)

La arquitectura de componentes en Angular 1.5

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

ES6

Clases

Módulos

Arrow function

Array (y nuevos tipos)

...

Migrating from 1.4 to 1.5https://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.

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

Guía de estilo Angular 1.5 de Todd MottoScope

- Stateful components

- Stateless components

Directives

- Directives should be used solely for decorating the DOM.

Eventos

- Comunicación con el padre por eventos. $event

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

$ctrl.updateUser($event); call we delegate down into the child component. The $event

argument is a real thing in Angular, you can use it with ng-submit and so on. If you

remember this function:

El lío del router

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

Angular 2

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

tipos

anotaciones

RxJS

eventos

Event SourcingMartin Fowler (2005)

Ventajas● ES6 (Módulos y clases)● No ng-class, no ng-click, all are DOM native

attributes.

An Angular 2 Force Awakens - John PapaNg Conf 2016 4 May

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

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'

};

}

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;

}

}

Guías de estilo (otra vez)

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

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/

Formación!

CursosEgghead

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

Conferenciashttps://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

Combo!

Angular + ReduxManaging 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

¿Qué tal el viaje?

¿Tiene sentido?

gracias

@adelatorrefoss