Angular Extreme Performance

16 de nov. de 20179 gostaram2,062 visualizações

1. O documento discute vários pilares para melhorar o desempenho de aplicações front-end, incluindo bundling, minificação, tree shaking, compilação à frente do tempo e precarregamento de módulos. 2. É explicada a diferença entre compilação no momento de execução e compilação à frente do tempo no Angular e seus benefícios para o desempenho. 3. Também são apresentadas outras técnicas como detecção de mudanças inteligente, uso de web workers e renderização do lado do servidor para melhorar

N R
Pilares da Performance
Front-end
Network performance Runtime performance

Bundling
1
2 Minification…+
3 Tree-shaking
4 AOT
5 Lazy-load
6 Service Worker
Network performance

W
Webpack
Tools
B
Browserify
R
Rollup
R
SystemJS
G
Gulp
G
Grunt
G
GCC
?
…

#2 Minification…+
Dead code
Ofuscation
Minification
UglifyJS

JIT AoT
#4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

• Compilamos para gerar um código mais eficiente para as VMs
Compilar?
• Versão 2 > cada componente tem seu PRÓPRIO Change
detector.
• O Angular precisa ‘compilar' todo o template para também
conseguir aplicar o tree shaking

1 2
componente.js
(transpilado do typescript)
Entendendo um
Componente Angular
componente-internal.js
(ngfactory)
my-component

JIT
JIT
(Just in time)
Compilation
my-component.ts my-component.js
…

JIT
JIT
(Just in time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, verifica se é para iniciar em JIT ou AoT.
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.

JIT
JIT
(Just in time)
Compilation
my-component.js
• Angular precisa ‘compilar’
esse template e criar tudo
isso via javascript, nosso
internal component ou
(ngfactory)
• Com isso criar o
Change detector
desse componente.
…

• TODO o código do Angular foi IMPORTADO e TODO SEU
COMPILER e suas dependências também.
KEEP CALM!
• Não há ABSOLUTAMENTE NENHUMA técnica de
performance nesse código (minificação, tree shaking
etc…)
• Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo
uma aplicação Angular

AoT
AoT
(Ahead of time)
Compilation
ng serve —aot
ng build—aot

AoT
AoT
(Ahead of time)
Compilation
• Também tem muito benefício em runtime
performance, veremos mais na frente.

JIT AoT
Recap #4 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

#5 lazy-load
People
Component01 Person
Component
02

People
Module
People
Service
People
Component
Person
Module
Person
Service
Person
Component
App
Component
App
Routing
App
Module
/
/person/:id
lazylazy
eager
#5 lazy-load

HTTP2
1
2 ServiceWorker
3 Application Shell
4 CacheAPI
5 Pre-fetching
Outras técnicas

Em breve teremos hello world do
Angular com apenas:
40kb!

AoT
1
3 Change Detection
4 trackby
5 WebWorkers
Runtime performance
enableProdMode
2
6 Server-side rendering

JIT AoT
#1 AoT
JIT
(Just in time)
Compilation
AoT
(Ahead of time)
Compilation

AoT
AoT
(Ahead of time)
Compilation
• Baixa todos os Javascripts.
• Angular é iniciado, inicia com AoT
• Angular precisa compilar TODOS os componentes em JIT
• A aplicação é iniciada.

JIT
JIT
(Just in time)
Compilation
my-component.js
…
my-component-
internal.js

JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
create()

JIT
JIT
(Just in time)
Compilation
my-component.tscreate()

JIT
JIT
(Just in time)
Compilation
my-component-
internal.js
detectChanges()

ChangeDetection.Default
user === valorAntigoDoUser ?
user.name === valorAntigoDoUser.name ?
user.bio === valorAntigoDoUser.bio ?
user.propsInView * n
MUTABILIDADE

ChangeDetection.OnPush
user === valorAntigoDoUser ?
run change detection! :-)
IMUTABILIDADE

• Angular universal
Ferramentas
• Vue.js Server-Side
• import ReactDOMServer from 'react-dom/server';

https://github.com/mgechev/angular-performance-checklist
https://blog.thoughtram.io
https://victorsavkin.com
https://twitter.com/jeffbcross
Referências
https://angular.io

Mais conteúdo relacionado

Mais procurados (20)

Meetup #17Raphael Moraes

BaaS com Firebase 3Andre Baltieri

React Native na globo.comGuilherme Heynemann Bruzzi

Angular 2Loiane Groner

Ionic Reativo com RxJS e ngRxLoiane Groner

Projetos reativos com Angular, RxJS e Redux (ngRx)Loiane Groner

Devfest Cerrado: Angular 2 Loiane Groner

React + Flux (Alt)Cezar Luiz

Angular 2 em 60 minutosLoiane Groner

JS Experience 2017 - React + Redux. Pensando em ReduxiMasters

DevFest Nordeste: Ionic 2Loiane Groner

Typescript: the Fun Parts (BrazilJS 2017)Loiane Groner

Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa

DevFest BH: Ionic 2Loiane Groner

Android DevConference - Dagger 2: uso avançado em projetos AndroidiMasters

Open Source Mobile Experience: Ionic 2Loiane Groner

Primeiros passos com promessas no AngularJSCauê Alves

Android Studio: Primeiros PassosRomualdo Andre

React Native - Experiência Nativa para o usuário e experiência Web para o des...Emiliano Barbosa

Introdução ao FlywayJadson Santos

Meetup #17Raphael Moraes

BaaS com Firebase 3Andre Baltieri

React Native na globo.comGuilherme Heynemann Bruzzi

Angular 2Loiane Groner

Ionic Reativo com RxJS e ngRxLoiane Groner

Projetos reativos com Angular, RxJS e Redux (ngRx)Loiane Groner

Devfest Cerrado: Angular 2 Loiane Groner

React + Flux (Alt)Cezar Luiz

Angular 2 em 60 minutosLoiane Groner

JS Experience 2017 - React + Redux. Pensando em ReduxiMasters

DevFest Nordeste: Ionic 2Loiane Groner

Typescript: the Fun Parts (BrazilJS 2017)Loiane Groner

Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa

DevFest BH: Ionic 2Loiane Groner

Android DevConference - Dagger 2: uso avançado em projetos AndroidiMasters

Open Source Mobile Experience: Ionic 2Loiane Groner

Primeiros passos com promessas no AngularJSCauê Alves

Android Studio: Primeiros PassosRomualdo Andre

React Native - Experiência Nativa para o usuário e experiência Web para o des...Emiliano Barbosa

Introdução ao FlywayJadson Santos

Destaque (9)

Por que Stanford trocou Java por JavaScript?Luiz Duarte

Angular - Um novo change detectionGustavo Costa

Ionic 2 como ferramenta para desenvolvimento móvelGustavo Costa

Angular vs. ReactOPITZ CONSULTING Deutschland

www.opitz-consulting.com How do Angular and React compare? Can we compare them at all? Actually, it's like comparing apples to oranges, but even so, we have to compare them. As it turns out, both frameworks are a nice example of co-evolution. They aren't as different as they used to be a few years ago. After showing the key concepts of both frameworks, our experts Dr. Marius Hofmeister and Stephan Rauh presented a small list of criteria helping to decide when to use which at iJS Conference in Munich on 25/10/17.

Introduction to AngularjsManish Shekhawat

AngularJS is a JavaScript framework for building dynamic web applications. It augments HTML with custom attributes and directives to bind data and behaviors to the DOM. Key features include two-way data binding, reusable components, dependency injection, routing, and templating. AngularJS uses an MVC or MVVM pattern, with scopes providing the view model. The framework enhances HTML, encourages test-driven development, and makes single page apps possible.

Angular Seminar [한빛미디어 리얼타임 세미나]Woojin Joe

Building Universal Applications with Angular 2Minko Gechev

Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications. In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.

Getting Started with Angular 2FITC

FITC events. For digital creators. Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Getting Started with Angular 2 with Rob McDiarmid OVERVIEW Angular 2 is a powerful framework that lets you create fast and scalable web apps with clean and readable code. With the lessons learned from previous web frameworks and the advantages of modern web technologies, the Angular team has created a framework that will push the limits of what SPAs are capable of. In this session we’ll go through building an Angular 2.0 app from the ground up. In the process, you will learn how it handles core concepts like components, templates, services, and routing. You’ll also see how angular takes advantage of ES6 modules, Web Components, and TypeScript. By the end of the session, you’ll have a good understanding of why you might want to use Angular 2 for your next project and how to get started. OBJECTIVE Demonstrate what Angular 2 has to offer and reduce the barrier to entry. TARGET AUDIENCE Web Developers interested in learning Angular 2. ASSUMED AUDIENCE KNOWLEDGE Intermediate experience with JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN 1. Core concepts of the Angular 2 framework 2. How to use ES6 modules 3. The benefits of TypeScript annotations 4. How to setup an Angular 2 project from scratch 5. The ecosystem of tools that Angular 2 apps will be built on

Introduction to Angular 2Knoldus Inc.

Por que Stanford trocou Java por JavaScript?Luiz Duarte

Angular - Um novo change detectionGustavo Costa

Ionic 2 como ferramenta para desenvolvimento móvelGustavo Costa

Angular vs. ReactOPITZ CONSULTING Deutschland

Introduction to AngularjsManish Shekhawat

Angular Seminar [한빛미디어 리얼타임 세미나]Woojin Joe

Building Universal Applications with Angular 2Minko Gechev

Getting Started with Angular 2FITC

Introduction to Angular 2Knoldus Inc.

Anúncio

Semelhante a Angular Extreme Performance (20)

TDC2017 | São Paulo - Trilha Containers How we figured out we had a SRE team ...tdc-globalcode

Strider CD - Deploy Contínuo com JavaScriptTaller Negócio Digitais

Apache Wicket derruba o padrão JSFBruno Borges

Git v2COTIC-PROEG (UFPA)

TDC2018SP | Trilha Serveless - Pra que SERVErless?tdc-globalcode

Deploy automático em projeto PHP - PHPSPIMA 2016Felipe Klerk Signorini

Sempre buscando atuar com inteligência na área de desenvolvimento, como DevOps, arquiteto, líder de projeto e desenvolvedor fullstack, sempre visando a melhor implementação (tecnologia certa para a tarefa certa), análise de custo benefício, eficiência, arquitetura macro de serviços, fluxograma de desenvolvimento, automatização de tarefas e controle de qualidade e principalmente valor ao negócio.

CPqD Developer Suite - SPIN Campinas - Reunião #56CPqD

O documento discute ferramentas de software livre para desenvolvimento de software, incluindo JIRA para gerenciamento de projetos, Enterprise Architect para modelagem, Subversion para controle de versão, Gerrit para revisão de código, Jenkins para integração contínua, Nexus para gerenciamento de dependências, TestLink para gerenciamento de testes, Selenium para teste automatizado, e SonarQube para análise de qualidade e métricas de código. Essas ferramentas são integradas na CPqD Developer Suite.

Introdução à Programação Web com AngularElmano Cavalcanti

1) O documento descreve uma aula sobre desenvolvimento web com Angular, incluindo a instalação das ferramentas necessárias e a criação de um projeto Angular simples para gerenciar listas de tarefas. 2) É apresentado um modelo de dados para armazenar as tarefas, um template HTML para exibir os dados e um componente para conectar o modelo ao template. 3) O fluxo básico de execução de uma aplicação Angular é explicado, ligando o bootstrap, componentes, templates e data binding.

Twitter, Apache Camel e Enterprise Integration PatternsBruno Borges

O documento apresenta o framework Apache Camel, os padrões de integração empresarial e como o Camel pode ser usado para integrar com o Twitter. O Camel permite implementar padrões de integração através de endpoints e rotas de mensagens entre sistemas usando diferentes linguagens como Java, XML e Scala. O componente Camel Twitter permite enviar, receber e buscar dados do Twitter como tweets e timelines dentro de rotas Camel.

Quer ser um Full-Stack Developer? Essas são algumas "coisinhas" que você prec...Bruno Oliveira

Aplicações Web modernas são compostas de diversos componentes que vão além de um servidor web e um banco de dados. O objetivo dessa talk é apresentar uma arquitetura avançada de uma aplicação web pontuando os conhecimentos que um desenvolvedor Full-Stack Python deve adquirir. Tópicos abordados: IaaS/PaaS Web Frameworks Servidor Web e Servidor de Aplicação Cache Fila de Tarefas Assíncronas Monitoramento Deploy

Putting a-heat-with-thermostatRicardo Martinelli de Oliveira

Integração ContínuaScrumHalf Tool

O documento discute integração contínua, incluindo seus conceitos, benefícios e pré-requisitos. A integração contínua envolve construir e testar automaticamente o software sempre que novas mudanças são implementadas para garantir que o software esteja sempre em um estado funcional. Isso ajuda a detectar bugs cedo e manter o software de alta qualidade. Pré-requisitos incluem controle de versão, builds automatizados e testes automatizados.

Novidades PHP 7.4 e 8.0!Marcos Marcolin

Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Marcelo Marques Gonçalves

Resumo Sessão Técnica "ArcGIS 10.1 Desktop Developer Migration Topics" do ESR...Bruno Caimar

TDC2018SP | Trilha Arq .Net - Performance e featuretdc-globalcode

O documento discute otimização de performance em desenvolvimento de software. Em 3 frases ou menos, o documento enfatiza que otimização prematura pode ter impactos negativos, que performance depende do contexto e que é importante entender detalhadamente como o código funciona. O palestrante também lista diversas ferramentas e abordagens de programação para analisar seu impacto na performance.

Desenvolvimento Ágil de Aplicações Java na Nuvem com o AWS Elastic BeanstalkAmazon Web Services LATAM

Google AppEngine: Desafios da adoção de cloud no mercado de segurosGustavo Concon

Como desenvolver com um sistema com um front-end colossal?Mozart Diniz

TDC 2018Leandro Ferreira

O documento discute as vantagens de usar o sistema de build Buck para projetos Android com arquitetura de mono repositório. O Buck permite builds mais rápidos ao permitir a paralelização de tarefas e rebuilds apenas das partes afetadas por mudanças. Embora tenha sido um processo difícil de transição devido à necessidade de manter históricos, o uso do Buck tornou builds e testes muito mais rápidos para o aplicativo móvel do Nubank.

TDC2017 | São Paulo - Trilha Containers How we figured out we had a SRE team ...tdc-globalcode

Strider CD - Deploy Contínuo com JavaScriptTaller Negócio Digitais

Apache Wicket derruba o padrão JSFBruno Borges

Git v2COTIC-PROEG (UFPA)

TDC2018SP | Trilha Serveless - Pra que SERVErless?tdc-globalcode

Deploy automático em projeto PHP - PHPSPIMA 2016Felipe Klerk Signorini

CPqD Developer Suite - SPIN Campinas - Reunião #56CPqD

Introdução à Programação Web com AngularElmano Cavalcanti

Twitter, Apache Camel e Enterprise Integration PatternsBruno Borges

Quer ser um Full-Stack Developer? Essas são algumas "coisinhas" que você prec...Bruno Oliveira

Putting a-heat-with-thermostatRicardo Martinelli de Oliveira

Integração ContínuaScrumHalf Tool

Novidades PHP 7.4 e 8.0!Marcos Marcolin

Aplicativos hibridos-com-ionic-voce-tambem-pode-comecar-a-desenvolver-agora-t...Marcelo Marques Gonçalves

Resumo Sessão Técnica "ArcGIS 10.1 Desktop Developer Migration Topics" do ESR...Bruno Caimar

TDC2018SP | Trilha Arq .Net - Performance e featuretdc-globalcode

Desenvolvimento Ágil de Aplicações Java na Nuvem com o AWS Elastic BeanstalkAmazon Web Services LATAM

Google AppEngine: Desafios da adoção de cloud no mercado de segurosGustavo Concon

Como desenvolver com um sistema com um front-end colossal?Mozart Diniz

TDC 2018Leandro Ferreira

Anúncio

Mais de Gustavo Costa (8)

Trabalho remoto + Carreira Internacional em T.IGustavo Costa

Este documento descreve a jornada do autor na área de Tecnologia da Informação, desde seus primeiros estágios em 2009 até seu trabalho remoto atual para empresas internacionais. Ele detalha como buscou experiência através de cursos, projetos de código aberto e ensinando outros, e como desenvolveu habilidades como comunicação e liderança. O autor também discute como aprender inglês o levou a empregos remotos no exterior e um aumento significativo na renda.

Angular Extreme Performance - V2Gustavo Costa

Sabemos que os frameworks Javascript modernos estão usando o que há de melhor e mais moderno no mercado e disponibilizando no seu ecossistema para os dois maiores pilares da performance de uma aplicação front-end: network e runtime, mas quais são as ferramentas que eu posso usar no build do meu projeto? O que essa sopa de letrinhas: JIT, AOT, Tree-shaking, Uglify, GCC, Lazy loading, Ivy … são capazes de fazer para melhorar a performance de network do meu projeto? Também veremos sobre Server Rendering, trackBy, Angular OnPush Component, React Pure Component, Imutabilidade, AOT… Eles podem fazer milagres na performance de runtime do seu projeto, e várias dessas técnicas e ferramentas existem e são aplicáveis seja no Angular, React, Vue ou o velho Javascript vanilla.

Google Calendar API - Getting StartedGustavo Costa

Getting Started with NgRx (Redux) AngularGustavo Costa

This document provides an introduction to NgRx, a library for managing application state in Angular applications using the Redux pattern. It discusses NgRx goals like organizing and managing state, communicating changes, and performance benefits. It also covers Redux principles like single source of truth, pure functions for state changes, and read-only state. The document demonstrates the basic NgRx pattern of actions, reducers, selectors, and effects. It provides examples of setting up NgRx in an Angular application and key NgRx concepts like actions, reducers, selectors, effects, immutable data, and smart/dumb components.

Angular.JS - Estado AtualGustavo Costa

Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa

Abra sua cabeça, apps híbridos - PhoneGap/CordovaGustavo Costa

Mobile - Abra sua cabeça.Gustavo Costa

Trabalho remoto + Carreira Internacional em T.IGustavo Costa

Angular Extreme Performance - V2Gustavo Costa

Google Calendar API - Getting StartedGustavo Costa

Getting Started with NgRx (Redux) AngularGustavo Costa

Angular.JS - Estado AtualGustavo Costa

Desenvolvendo APPs Com Angular.JS + CordovaGustavo Costa

Abra sua cabeça, apps híbridos - PhoneGap/CordovaGustavo Costa

Mobile - Abra sua cabeça.Gustavo Costa

Angular Extreme Performance

1. Extreme Performance

2. Gustavo Costa

3. @willgmbr

4. N R Pilares da Performance Front-end Network performance Runtime performance

5. Bundling 1 2 Minification…+ 3 Tree-shaking 4 AOT 5 Lazy-load 6 Service Worker Network performance

6. W Webpack Tools B Browserify R Rollup R SystemJS G Gulp G Grunt G GCC ? …

7. #1 Bundling

8. #1 Bundling

9. #2 Minification…+ Dead code Ofuscation Minification UglifyJS

10. #3 Tree Shaking

11. JIT AoT #4 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation

12. • Compilamos para gerar um código mais eficiente para as VMs Compilar? • Versão 2 > cada componente tem seu PRÓPRIO Change detector. • O Angular precisa ‘compilar' todo o template para também conseguir aplicar o tree shaking

13. 1 2 componente.js (transpilado do typescript) Entendendo um Componente Angular componente-internal.js (ngfactory) my-component

14. JIT JIT (Just in time) Compilation my-component.ts my-component.js …

15. JIT JIT (Just in time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, verifica se é para iniciar em JIT ou AoT. • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.

16. JIT JIT (Just in time) Compilation my-component.js • Angular precisa ‘compilar’ esse template e criar tudo isso via javascript, nosso internal component ou (ngfactory) • Com isso criar o Change detector desse componente. …

17. ng serve

18. • TODO o código do Angular foi IMPORTADO e TODO SEU COMPILER e suas dependências também. KEEP CALM! • Não há ABSOLUTAMENTE NENHUMA técnica de performance nesse código (minificação, tree shaking etc…) • Isso é que faz deixar o ‘auto reload’ rápido desenvolvendo uma aplicação Angular

19. AoT AoT (Ahead of time) Compilation ng serve —aot ng build—aot

20. AoT AoT (Ahead of time) Compilation • Também tem muito benefício em runtime performance, veremos mais na frente.

21. JIT AoT Recap #4 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation

22. Vue

23. #5 lazy-load People Component01 Person Component 02

24. People Module People Service People Component Person Module Person Service Person Component App Component App Routing App Module / /person/:id lazylazy eager #5 lazy-load

26. Lazy demo

30. HTTP2 1 2 ServiceWorker 3 Application Shell 4 CacheAPI 5 Pre-fetching Outras técnicas

31. easy

32. Angular CLI

33. Build time! ng build --prod

34. #5 compression

36. GCC + BROTLI

38. Em breve teremos hello world do Angular com apenas: 40kb!

39. AoT 1 3 Change Detection 4 trackby 5 WebWorkers Runtime performance enableProdMode 2 6 Server-side rendering

40. JIT AoT #1 AoT JIT (Just in time) Compilation AoT (Ahead of time) Compilation

41. JIT JIT (Just in time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, verifica se é para iniciar em JIT ou AoT. • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.

42. AoT AoT (Ahead of time) Compilation • Baixa todos os Javascripts. • Angular é iniciado, inicia com AoT • Angular precisa compilar TODOS os componentes em JIT • A aplicação é iniciada.

43. JIT JIT (Just in time) Compilation my-component.ts my-component.js …

44. JIT JIT (Just in time) Compilation my-component.js … my-component- internal.js

45. JIT JIT (Just in time) Compilation my-component- internal.js create()

46. JIT JIT (Just in time) Compilation my-component.tscreate()

47. JIT JIT (Just in time) Compilation my-component- internal.js detectChanges()

48. AoT AoT (Ahead of time) Compilation

49. 3x - 10x

50. #2 enableProdMode

51. SMARTER? #3 Change Detection

52. ChangeDetection.Default user === valorAntigoDoUser ? user.name === valorAntigoDoUser.name ? user.bio === valorAntigoDoUser.bio ? user.propsInView * n MUTABILIDADE

53. ChangeDetection.OnPush user === valorAntigoDoUser ? run change detection! :-) IMUTABILIDADE

54. ChangeDetection Demo

55. Notifique o Angular!

56. markForCheck();

58. #4 trackby

59. #5 WebWorkers Event Loop Single thread

60. #6 Server-side rendering

62. AoT !== SSR Otimiza JS Gera HTML/CSS

63. • Angular universal Ferramentas • Vue.js Server-Side • import ReactDOMServer from 'react-dom/server';

64. https://github.com/mgechev/angular-performance-checklist https://blog.thoughtram.io https://victorsavkin.com https://twitter.com/jeffbcross Referências https://angular.io