Angular 2

44
Angular 2 Minhas Impressões

Transcript of Angular 2

Page 1: Angular 2

Angular 2Minhas Impressões

Page 2: Angular 2

@Component({selector: 'talk'}) @View({template: '<h1>Google I/O</h1>'})// Component controllerclass TalkComponent { constructor() { this.name = 'Paulo Pires'; this.twitter = '@paulo_hp'; }}

Page 3: Angular 2
Page 4: Angular 2
Page 5: Angular 2

Angular 1.x

Page 6: Angular 2

Angular 1.4Performance Melhorada

Novo Router e i18n Suporte a CommonJS

Melhoria nas animações E muito mais...

Page 7: Angular 2

Angular 1.4(use este hoje!)

Page 8: Angular 2

Angular 1.5(pode ser o elo até o 2.0)

Page 9: Angular 2

Angular 2

Page 10: Angular 2

/angular/angular

Page 11: Angular 2

TypeScript

typescriptlang.org

Page 12: Angular 2

Será que a checagem de tipo em tempo de execução pode deixar a app mais lenta?

pergunta

Page 13: Angular 2

Eu devo usar o TypeScript para meu novo app em Angular2?

pergunta

Page 14: Angular 2

es6rocks.com

Page 15: Angular 2

webcomponents.org

Page 16: Angular 2

Sem controllers

Page 17: Angular 2

3 tipos de directives

Page 18: Angular 2

@Component

Page 19: Angular 2

@Viewport

Page 20: Angular 2

@Decorator

Page 21: Angular 2

Mas isso não quebra a separação de 'concerns' que o Angular tanto prega?

pergunta

Page 22: Angular 2

Então vou ter que mudar tudo? Converter todos meus controllers para directives?

pergunta

Page 23: Angular 2

O Angular2 é tipo o React.js, no fim das contas? Vou ter que escrever HTML inline?

pergunta

Page 24: Angular 2

SemTwo-Way data-binding

Page 25: Angular 2

Agora vou ter que manipular e construir formularios na unha?

pergunta

Page 26: Angular 2

Fluxo de dados unidirecional... Posso usar Flux?

pergunta

Page 27: Angular 2

Então o Angular2 é o React implementado pela Google?

pergunta

Page 28: Angular 2

Novo Router

Page 29: Angular 2

/angular/router

Page 30: Angular 2

Começo meu novo projeto com o Router velho ou com o novo?

pergunta

Page 31: Angular 2

Real Modules

Page 32: Angular 2

Tchau $scope

Page 33: Angular 2

@Component({ selector: 'sample-app', componentServices: [ NameList ]})@Template({ url: './templates/sample-app.html', directives: [Foreach]})class SampleApp { constructor() { this.names = NameList.get(); this.newName = ''; } addName(newname) { this.names.push(newname.value); newname.value = ''; }}

Page 34: Angular 2

...<ul> <li *foreach="#name in names"></li></ul>...

Page 35: Angular 2

Ultra Fast Change Detection

Page 36: Angular 2

DI Melhorada

Page 37: Angular 2

/angular/di.js

Page 38: Angular 2

import {Inject} from 'di';import {Electricity} from './electricity';

@Inject(Electricity)export class Fridge { constructor(electricity) { this.electricity = electricity; }

getEggs() { return '3 eggs'; }}

Page 39: Angular 2
Page 40: Angular 2

Não estapronto paraproducão!

Page 41: Angular 2
Page 42: Angular 2

Experimente!

Page 43: Angular 2

perguntas?

Page 44: Angular 2

Obrigado!