Slide 1

Slide 1 text

Angular 2 Minhas Impressões

Slide 2

Slide 2 text

@Component({selector: 'talk'}) @View({template: '

Google I/O

'}) // Component controller class TalkComponent { constructor() { this.name = 'Paulo Pires'; this.twitter = '@paulo_hp'; } }

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Angular 1.x

Slide 6

Slide 6 text

Angular 1.4 Performance Melhorada Novo Router e i18n Suporte a CommonJS Melhoria nas animações E muito mais...

Slide 7

Slide 7 text

Angular 1.4 (use este hoje!)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Angular 2

Slide 10

Slide 10 text

/angular/angular

Slide 11

Slide 11 text

TypeScript typescriptlang.org

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

es6rocks.com

Slide 15

Slide 15 text

webcomponents.org

Slide 16

Slide 16 text

Sem controllers

Slide 17

Slide 17 text

3 tipos de directives

Slide 18

Slide 18 text

@Component

Slide 19

Slide 19 text

@Viewport

Slide 20

Slide 20 text

@Decorator

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Sem Two-Way data-binding

Slide 25

Slide 25 text

Agora vou ter que manipular e construir formularios na unha? pergunta

Slide 26

Slide 26 text

Fluxo de dados unidirecional... Posso usar Flux? pergunta

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Novo Router

Slide 29

Slide 29 text

/angular/router

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Real Modules

Slide 32

Slide 32 text

Tchau $scope

Slide 33

Slide 33 text

@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 = ''; } }

Slide 34

Slide 34 text

...

Slide 35

Slide 35 text

Ultra Fast Change Detection

Slide 36

Slide 36 text

DI Melhorada

Slide 37

Slide 37 text

/angular/di.js

Slide 38

Slide 38 text

import {Inject} from 'di'; import {Electricity} from './electricity'; @Inject(Electricity) export class Fridge { constructor(electricity) { this.electricity = electricity; } getEggs() { return '3 eggs'; } }