migrando para o angular 2

44

Upload: andre-baltieri

Post on 08-Feb-2017

77 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Migrando para o Angular 2
Page 2: Migrando para o Angular 2

André BaltieriMicrosoft MVP desde 2013Web Developer desde 2005Trabalhos no BRA, EUA, ENG, HOL

http://balta.io/

Page 3: Migrando para o Angular 2

AgendaPor que mudou?ResumãoMudanças no MindsetBindingsHTTP, Services e ObservablesFormuláriosDiretivasPipesAnimationsMobile/PWA

Migrando para oAngular 2

Page 4: Migrando para o Angular 2

Por que mudou?Angular 1 surgiu em 2009Introduziu o MVC ao mundo FrontendResolveu vários problemasNão existia reatividadeNem conceitos de Web ComponentsOs Watchers… ahhh os watchersReact mudou muita coisaComponentizaçãoPerformance

Page 5: Migrando para o Angular 2

ResumãoREACT É UMA LIB (Que pode ser usado no Angular 2)Framework completoHTTPServicesPipesFormsDirectivesComponentsTestesA migração não é assim tão dolorosa vai!

Page 6: Migrando para o Angular 2

MindsetModels, Views e Controllers já eram!Tudo é um ComponentComponent faz uso de

ServicesDirectivesPipes

São testáveisMenores e mais fáceis de lidarManutenabilidadeFacilidade de reescrita

Page 7: Migrando para o Angular 2

BindingsAngular 1Two Way Data Binding por padrãoOne Way controlado pelo ::

{{::name}}

Angular 2[ ] = Bind do JS para a tela( ) = Bind da tela para o JS[( )] = Two Way Data Binding

Page 8: Migrando para o Angular 2

Bindings

Page 9: Migrando para o Angular 2

HTTP, Services e ObservablesAngular 1HTTPServicesFactoriesPromises

Angular 2HTTPServices**Observables/Promises

Page 10: Migrando para o Angular 2

HTTP, Services e Observables

Page 11: Migrando para o Angular 2

HTTP, Services e Observables

Page 12: Migrando para o Angular 2

HTTP, Services e Observables

Page 13: Migrando para o Angular 2

HTTP, Services e Observables

Page 14: Migrando para o Angular 2

PromisesImagine um atendimento qualquer onde você não é atendido assim que chega, mas sim, recebe uma senha, para ser chamado futuramente.É o meio utilizado pelo Angular 1 como padrão.Você decide quais ações tomar quando:• A requisição for realizada com

sucesso• Retornando um payload

• A requisição falha• Retornando um erro

Page 15: Migrando para o Angular 2

ObservablesSão fluxos de eventos publicados por alguma fonteVocê se inscreve (subscribe) para observá-losÉ o modelo mais recomendadoVocê decide quais ações tomar quando:• A requisição for realizada com sucesso

• Retornando um payload• A requisição falha

• Retornando um erroArmazena resultadoPodemos usar Retry

Page 16: Migrando para o Angular 2

Observables

Page 17: Migrando para o Angular 2

Observables

Page 18: Migrando para o Angular 2

Observables

Page 19: Migrando para o Angular 2

FormuláriosAngular 1Ng-formNg-messages

Fonte: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Angular 2FormBuilderFormGroupValidators

Page 20: Migrando para o Angular 2

FormuláriosAngular 1

Page 21: Migrando para o Angular 2

FormuláriosAngular 1

Page 22: Migrando para o Angular 2

Formulários

Page 23: Migrando para o Angular 2

Formulários

Page 24: Migrando para o Angular 2

Formulários

Page 25: Migrando para o Angular 2

Formulários

Page 26: Migrando para o Angular 2

Formulários

Page 27: Migrando para o Angular 2

DiretivasAngular 1Inicialmente usadas para componentizarControladas por um Controller*Built-in Directives

Angular 2Restrita a atributos e estruturasComponentes são Components!

Attribute Directives mudam a aparência ou comportamente de um elemento.

Structural Directives mudam o layout do DOM, adicionando ou removendo outros elementos.

Page 28: Migrando para o Angular 2

Attribute Directives

Page 29: Migrando para o Angular 2

Attribute Directives

Page 30: Migrando para o Angular 2

Attribute Directives

Page 31: Migrando para o Angular 2

Structure Directives

Page 32: Migrando para o Angular 2

Structure Directives

Page 33: Migrando para o Angular 2

Structure DirectivesO asterisco (*) é apenas um Syntax Sugar, que simplifica a leitura e escrita do template que vai sobrepor a diretiva.

Page 34: Migrando para o Angular 2

Structure Directives

Page 35: Migrando para o Angular 2

PipesAngular 1Parcialmente equivalente aos Filters

Angular 2Utilizados para modificar alguma informação nas Views

Page 36: Migrando para o Angular 2

Pipes

Page 37: Migrando para o Angular 2

Pipes

Page 38: Migrando para o Angular 2

Pipes

IMPORTAR O ExponentialStrenght NAS DECLARAÇÕES DO @NgModule

Page 39: Migrando para o Angular 2

Animations

Page 40: Migrando para o Angular 2

Animations

Page 41: Migrando para o Angular 2

Animations

Page 42: Migrando para o Angular 2

Mobile e PWANão é apenas um framework WebAngular CLISuporte MobilePWAAbstração do DOM

Native Script

Page 43: Migrando para o Angular 2

André [email protected]://andrebaltieri.net/http://youtube.balta.io/http://balta.io/

DÚVIDAS?

Page 44: Migrando para o Angular 2

OBRIGADO