Angular Ivy

o futuro é agora!

William Grasel

@willgmbr

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
  • v8 Maio 2019
  • v9 Nov 2019

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


  $ ng update @angular/cli @angular/core

Compiler

Component Compiler

é o core do Angular

Component Compiler

  • O compiler já foi reescrito algumas vezes!
  • Mantendo a retrocompatibilidade
  • Compilando cada vez mais rápido
  • Gerando bundle menores
  • Gerando aplicações mais rápidas

Project Ivy

  • Novo compiler/renderer de componentes
  • Geração de aplicações mais rápidas e menores
  • Compilação de aplicações mais rápida e inteligente
  • Localization: compilação individual de componentes
  • Melhor Type Checking no template para input/output
  • Mensagens de erros mais fáceis de entender 
  • Metaprogramação, high-order componentes, e muitas outras coisas...

Evolution

Código gerado por um

Hello World Component

Renderer v1 (ng v2)

ViewEngine v2 (ng v4)

Ivy Renderer

Mas não é só isso!!1

Tree Shaking

Tree Shaking é a técnica de eliminar código morto!

// some-lib.js

export function someFun () {
  ...
}

export function unusedFun () {
  ...
}
// index.js

import { someFun } from './some-lib'

function main() {
  someFun();
}

main();

Exemplo

// some-lib.js

export function someFun () {
  ...
}

export function unusedFun () {
  ...
}
// index.js

import { someFun, unusedFun } from './some-lib'

function main(x) {
  someFun();
  if(x) {
    unusedFun();
  }
}

main(false);

Mas nem sempre funciona...

Rendering Pipeline

Render2 Pipeline

Template Data

Template HTML

Interpreter

DOM

AOT

Build Time

App Execution Time

Render2: Template Data

<div class="menu">
  Hello World!
</div>
viewDef([
  elementDef(0, 'div', ['class', 'menu'], null, ...),
  textDef('Hello World!', ...)
])

Render2: Interpreter

viewDef([
  elementDef(0, 'div', ['class', 'menu'], null, ...),
  textDef('Hello World!', ...)
])
function createViewNodes(view: ViewDef) {
  view.nodes.forEach(node => {
    if (node.isElementDef) elementStart(node);
    if (node.hasLis) listener(node);
    ...
  })
}

Impossível de fazer

Tree Shaking

=/

Ivy Pipeline

Template HTML

Instructions

DOM

AOT

Build Time

App Execution Time

Ivy: Instructions

<div class="menu">
  Hello World!
</div>
import { elementStart, text } from '@angular/core';

elementStart(0, 'div', ['class', 'menu']);
text(1, 'Hello World!');

Só que não...

A atual API de bootstrap ainda não permite eliminar todo código morto! =/

Smaller Bundles

Angular Hello world app minified uncompressed

Is Ivy ready?

SIM!!1

Você já pode usar desde a v8!

ng new my-app --enable-ivy

Ainda não estava ligado por padrão, mas já estava pronto para uso em produção!

Várias aplicações dentro do Google já estão usando Ivy em produção a bastante tempo

Alguns módulos ainda não eram compatíveis com o Ivy, então sua app ainda poderia falhar na compilação

Na v9 o Ivy vai vir ligado por PADRÃO!

🎉🎉🎉

Renderer2 só será desligado na v11, caso você ainda precise dele por qualquer motivo!

What is next?

Ivy é muito mais do que um bundle pequeno!

Muita coisa vai ser habilitada com o Ivy!

Que tal Lazy Load por componente?

Lazy Load Atual

main.js

chunk_0.js

chunk_1.js

/home

/about

/cart

Ivy: Lazy Load por Componente

main.js

chunk_0.js

chunk_1.js

shell.js

nav-bar.js

cart.js

Google IO '19

Ivy Demo

Perguntas?

Obrigado!

Angular Ivy: o futuro é agora!

By William Grasel

Angular Ivy: o futuro é agora!

O Ivy é o novo compilador de componentes do Angular, algo que promete revolucionar o fremework, melhorando o tamanho e velocidade das nossas aplicações, e permitindo muitas coisas que antes não eram possíveis! Apesar disso ele já está em desenvolvimento a quase dois anos! Quando será que a gente vai poder usar e colher seus frutos? Vamos descobrir tudo isso juntos nessa palestra!

  • 740
Loading comments...

More from William Grasel