William Grasel PRO
Desenvolvedor Web, Google Developer Expert, Microsoft Most Valuable Professional, palestrante, consultor e coordenador do AngularSP.
Angular:
Do Passado Ao Futuro
William Grasel
@willgmbr | slides.com/williamgrasel
Timeline
GWT - Google Web Toolkit
GMail - 2004
AngularJS
Criado em 2009
Aberto em 2010
Angular v2
Iniciou o desenvolvimento em 2014
Concluído em out de 2016
Angular v4
Em março de 2017
Nova API de Animations
Novo website: angular.io
Novo cliente Http
Angular v5
Novembro de 2017
Suporte oficial a PWA
Suporte oficial a Server Side Rendering
Bundle menor e mais rápido
AngularJS 1.7
Maio de 2018
Último grande lançamento
Entrara em LTS por 3 anos
Angular v6
Maio de 2018
Angular Elements
"ng update" e "ng add"
Guia oficial de atualização: update.angular.io
Angular Material CDK
Angular v7
Outubro de 2018
Melhorias de Performance
Pronpts para linha de comando
Drag and Drop
Virtual Scrolling
Angular v8 e além...
Simplificação da API de Modulos
Project Ivy
Semantic Versioning
Semantic Versioning
X . Y . Z
MAJOR MINOR PATCH
O AngularJS 1.x não usava SemVer corretamente!
Agora é apenas Angular!
Uma major version por semestre
- v2 Set 2016
- v4 Mar 2017
- v5 Nov 2017
- v6 Maio 2018
- v7 Out 2018
Long Term Support (LTS)
- Toda major version será LTS
- Suporte total de 18 meses para cada
- Sendo 6 meses de desenvolvimento ativo
- E 12 meses de bugfix e paths de segurança
Objetivos
- Datas de lançamento previsíveis
- Atualização incremental retrocompatível
- Estabilidade e Confiança
Modelo Google de Trabalho
E se a sua app pudesse se atualizar sozinha?
Será q eu preciso atualizar algo?
$ ng updateAtualizando o Angular da v6 para v7
$ ng update @angular/cli @angular/coreMigrando do AngularJS 1.x para Angular 2+ com o
ngUpgrade
Angular CLI
Ferramenta de Linha de Comando
- Cria novas apps e libs
- Servidor de desenvolvimento
- Testes de unidade e E2E
- Build completo de produção
- Segue o Style Guide oficial
- Atualiza seu projeto
Angular Schematics
- Ferramenta de extensão da CLI
- Usa o modelo de AST: Abstract Syntax Tree
- Adicione novos schematics com ng add <package>
Exemplos de uso para Schematics
Configurando uma PWA com Material:
- ng add @angular/pwa
- ng add @angular/material
- ng generate @angular/material:dashboard
Configurando e Publicando SSR:
- ng add @nguniversal/express-engine
- ng add @ng-toolkit/serverless --provider firebase --firebaseProject [your_project_ID]
- npm run build:prod:deploy
Compiler
Component Compiler
é o core do Angular
Component Compiler
- O compiler é quase todo reescrito a cada versão
- Mantendo a retrocompatibilidade
- Compilando cada vez mais rápido
- Gerando bundle menores
- Detecção de mudança cada vez mais rápida
- É possível mudar a detecção de mudança
- Ou implementar na mão a lá setState do React
Projeto Ivy
- Novo compiler de componentes para v7
- Aproveitando ao máximo o Tree Shaking
- Hello World app vai ter apenas 2,7kb!
- Full Feature app com menos de 30kb!
- Já pode ser testado no AngularCLI:
Cade a galera?
50+ Conferencias Internacionais!!
Stack Overflow Survey 2018
Startups também usam Angular?
Trafego da documentação no angular.io
Estatísticas mais recentes do NPM público:
Obrigado!
Angular: Do Passado Ao Futuro
By William Grasel
Angular: Do Passado Ao Futuro
O Angular continua sendo um dos framework mais importantes do mercado. É fortemente usado por bancos, por grandes players do mercado e até mesmo pela NASA. Entenda as novidades criadas pelo Google e o que vem por aí.
