TDC2016SP - TypeScript em aplicações modernas

Preview:

Citation preview

Novidades do AngularJS 2.0Mudanças, melhorias e muito mais

@_ntakashi

/ntakashii

ntakashi.net

nicolas.tcs@hotmail.com

Tópicos

AngularJS 1.x O que é o AngularJS 2.0? Motivação Princípios Promessas Diga adeus Quick FAQ DEMO

AngularJS 1.x

Framework JavaScript Open Source Iniciado em 2009 Baseado no ECS5 e jqLite (subset JQuery) Performance questionável Famosão

O que é o AngularJS 2.0?

Framework MVW – Model View Whatever Inspirado no AngularJS 1.x Totalmente reescrito Performático Flexível Open Source

Motivação

AngularJS 2.0 é até 5x mais rápido que a versão atual;

Muito mais simples de aprender; Novos padrões.

Princípios

Mobilidade Flexibilidade Agilidade

Promessas

Cross Platform; Performance; Migração simples; Flexibilidade; Older browsers support

Melhorias – Framework DI

Melhor controle sobre escopo dos objetos; Child injectors; Depêndencias opcionais.

Melhorias – Diretivas

Component Directives; Decorator Directives; Template Directives.

Melhorias – Rotas

JSON baseado em Route Config; Convenção de configuração opcional; Parâmetros Estáticos; Padrões de rotas parametrizados; URL resolver; Suporte a Query String; Navigation Model; Manipulação de erro 404; Location Service; Manipulação de histórico.

Diga adeus.

$Scope Controller Muitas Diretivas

Diga adeus

Ng-bind; Ng-class; Ng-show; Ng-src; Ng-href; Ng-style; Ng-Hide; Ng-click

Bootstraping – AngularJS 1.x

Criar um módulo Declarar o ng-app Criar um Controller Declarar o ng-Controller Criar um template

Bootstraping – AngularJS 2.0

Criar um componente Criar um template Chamar o método BootStrap – (Angular2/Core) Transpilar

Quick FAQ

Sou obrigado a utilizar TypeScript? Posso utilizar Flux? Então o AngularJS 2.0 é o ReactJS do Google?

Quick FAQ

Angular-Translate vai ser compatível com a nova versão? A checagem de tipo torna a app mais lenta? Vou precisar reescrever tudo da app feita com a versão 1.x?

Quick FAQ

Eu vou ter que escrever HTML inline? Começo meu projeto com AngularJS 2.0?

Quick FAQ

Todo List App utilizando AngularJS 2.0