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 update

Atualizando o Angular da v6 para v7


  $ ng update @angular/cli @angular/core

Migrando 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:

  1. ng add @angular/pwa
  2. ng add @angular/material
  3. ng generate @angular/material:dashboard

Configurando e Publicando SSR:

  1. ng add @nguniversal/express-engine
  2. ng add @ng-toolkit/serverless                      --provider firebase                                    --firebaseProject [your_project_ID]
  3. 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í.

  • 2,812