Tweet
Tweet

Slide 1

Slide 1 text

@mgechev Building Fast Angular Applications by Default Minko Gechev twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com

Slide 2

Slide 2 text

@yourtwitter Description or Image @twitterhandle Agenda ● Network performance ● Runtime performance ● Good practices ● Application in production ● Initial rendering

Slide 3

Slide 3 text

@yourtwitter Network performance Description or Image @twitterhandle

Slide 4

Slide 4 text

@yourtwitter @mgechev Good practices ● Ship fewer bytes of JavaScript ● Lazy loading ● Preloading & prefetching ● Server-side rendering ● Write efficient code

Slide 5

Slide 5 text

@yourtwitter Shipping less JavaScript

Slide 6

Slide 6 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes

Slide 7

Slide 7 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes

Slide 8

Slide 8 text

@yourtwitter @mgechev Differential loading ● Produce ES5 bundles for newer browsers ● Do not send polyfills to modern browsers ● Smaller payload ● Do not downlevel modern features ● Faster execution ● Smaller payload

Slide 9

Slide 9 text

@mgechev -40KB polyfills -7% each bundle

Slide 10

Slide 10 text

@mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading

Slide 11

Slide 11 text

@mgechev Step 1: Load HTML Step 2: Request JS Differential serving Step 3: Return JS based on userAgent

Slide 12

Slide 12 text

@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal for a browser standard WHATWG

Slide 13

Slide 13 text

@yourtwitter Differential loading Differential loading

Slide 14

Slide 14 text

@yourtwitter Differential loading Differential loading

Slide 15

Slide 15 text

@mgechev

Slide 16

Slide 16 text

@yourtwitter Angular CLI Introduced this feature in v8.0.0

Slide 17

Slide 17 text

@yourtwitter @mgechev ● Set the target in tsconfig.json to es2015 ● Set the minimum supported browsers in browserlist Differential loading with Angular CLI version 8

Slide 18

Slide 18 text

@yourtwitter @mgechev ● Minification/dead code elimination ● Differential loading or serving ● Code-splitting Shipping fewer bytes

Slide 19

Slide 19 text

twitter.com/mgechev lazy-loading

Slide 20

Slide 20 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 21

Slide 21 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 22

Slide 22 text

@mgechev

Slide 23

Slide 23 text

@mgechev

Slide 24

Slide 24 text

@mgechev https://www.youtube.com/watch?v=MMPl9wHzmS4

Slide 25

Slide 25 text

@yourtwitter @mgechev ● Component-level ● Route-level Code-splitting could be

Slide 26

Slide 26 text

@mgechev

Slide 27

Slide 27 text

@yourtwitter Route-based code-splitting const routes: Routes = [ { path: 'settings', loadChildren: './settings/settings.module#SettingsModule' }, { path: 'article', loadChildren: './article/article.module#ArticleModule' } ];

Slide 28

Slide 28 text

@yourtwitter Route-based code-splitting in Ivy const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ];

Slide 29

Slide 29 text

@yourtwitter Route-based code-splitting in Ivy const routes: Routes = [ { path: 'settings', loadChildren: import('./settings/settings.module') .then(m => m.SettingsModule); },
 ... ]; Experimental

Slide 30

Slide 30 text

@yourtwitter @mgechev 1. Definition of a lazy module 2. Declaration of a lazy route 3. Definition of a component 4. Declaration of a eager route Steps for creating a lazy-loaded module

Slide 31

Slide 31 text

@mgechev

Slide 32

Slide 32 text

@yourtwitter Route-based code-splitting with the future Angular CLI $ ng g module about --route=about --module=index

Slide 33

Slide 33 text

@yourtwitter @mgechev Questions

Slide 34

Slide 34 text

@mgechev

Slide 35

Slide 35 text

@mgechev

Slide 36

Slide 36 text

twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Pre-fetching

Slide 37

Slide 37 text

twitter.com/mgechev

Slide 38

Slide 38 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 39

Slide 39 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 40

Slide 40 text

@mgechev

Slide 41

Slide 41 text

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

Slide 42

Slide 42 text

@yourtwitter Prefetch visible links import { QuicklinkStrategy } from 'ngx-quicklink'; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] }) export class AppRoutingModule {}

Slide 43

Slide 43 text

@yourtwitter Prefetch visible links import { QuicklinkModule } from 'ngx-quicklink'; @NgModule({ imports: [ ... QuicklinkModule ], exports: [ ... QuicklinkModule, ] }) export class SharedModule {}

Slide 44

Slide 44 text

@yourtwitter @mgechev ● Prefetch visible links ● Predictive prefetching ● Prefetch on mouse over Prefetching strategies

Slide 45

Slide 45 text

@mgechev

Slide 46

Slide 46 text

@mgechev

Slide 47

Slide 47 text

@mgechev early alpha

Slide 48

Slide 48 text

@mgechev A performance budget is a limit for pages which the team is not allowed to exceed. Addy Osmani

Slide 49

Slide 49 text

@yourtwitter Performance Budgets enforces constraints to let you have guarantees v8.0.0 https://angular.io/guide/build

Slide 50

Slide 50 text

@yourtwitter Angular projects without compression >27%

Slide 51

Slide 51 text

@yourtwitter >80% Angular projects without CDN

Slide 52

Slide 52 text

@yourtwitter ng deploy $ ng add [PROVIDER] $ ng run app:deploy

Slide 53

Slide 53 text

@mgechev

Slide 54

Slide 54 text

@mgechev Partnering with

Slide 55

Slide 55 text

@yourtwitter @mgechev Questions

Slide 56

Slide 56 text

@yourtwitter Server-side rendering

Slide 57

Slide 57 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 58

Slide 58 text

@yourtwitter @mgechev ● Faster initial contentful paint ● Better SEO ● Better time to interactive? Benefits of SSR

Slide 59

Slide 59 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 60

Slide 60 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 61

Slide 61 text

@mgechev https://addyosmani.com/blog/rehydration/

Slide 62

Slide 62 text

twitter.com/mgechev Destructive Rehydration DOM Component tree

Slide 63

Slide 63 text

twitter.com/mgechev Progressive Rehydration DOM ( )

Slide 64

Slide 64 text

twitter.com/mgechev Progressive Rehydration DOM ( )

Slide 65

Slide 65 text

twitter.com/mgechev ( ) Progressive Rehydration DOM

Slide 66

Slide 66 text

twitter.com/mgechev ( ) Progressive Rehydration DOM

Slide 67

Slide 67 text

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1

Slide 68

Slide 68 text

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1

Slide 69

Slide 69 text

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1

Slide 70

Slide 70 text

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1 ChildCmp2

Slide 71

Slide 71 text

twitter.com/mgechev ( ) Progressive Rehydration DOM ChildCmp1 ChildCmp2

Slide 72

Slide 72 text

twitter.com/mgechev ( ) Progressive Rehydration DOM RootCmp ChildCmp1 ChildCmp2

Slide 73

Slide 73 text

@yourtwitter Progressive bootstrapping

Slide 74

Slide 74 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 75

Slide 75 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 76

Slide 76 text

@mgechev Step 1: Request page Step 2: Render page Step 3: Paint & load JS Server-side rendering Step 4: Bootstrap app

Slide 77

Slide 77 text

twitter.com/mgechev Progressive loading DOM

Slide 78

Slide 78 text

twitter.com/mgechev Progressive loading DOM ⌨ Key down

Slide 79

Slide 79 text

twitter.com/mgechev Progressive loading DOM ChildCmp

Slide 80

Slide 80 text

@yourtwitter Faster Rendering

Slide 81

Slide 81 text

@yourtwitter @mgechev ● Discovery of dependencies ● Efficient code generation ● Efficient runtime Runtime optimizations

Slide 82

Slide 82 text

@mgechev Model View dependencies Compiler
 
 
 
 Front-end Back-end Input Output

Slide 83

Slide 83 text

@mgechev

{{ comment.body + 'foo' }}

if (rf & 1) { // Create } if (rf & 2) { ɵtextBinding(3, ɵinterpolation1(" ", ctx.comment.body, " " ...)); }

Slide 84

Slide 84 text

@yourtwitter @mgechev ● Tree-shakeable code ● Monomorphic executions Efficient code generation

Slide 85

Slide 85 text

@mgechev Tree-shakeable code import { ɵelementStart, … } from ... if (rf & 1) { ɵelementStart(0, "div", _c0); ɵelementStart(2, "p", _c2); ɵtext(3); ɵelementEnd(); ɵelementEnd(); } if (rf & 2) { ɵtextBinding(3, ... ɵinterpolation1( ...) } The compiler imports only what given component needs

Slide 86

Slide 86 text

@yourtwitter @mgechev In collaboration with v8 team to make sure we generate code optimizable by the JavaScript engine Monomorphic code

Slide 87

Slide 87 text

@yourtwitter @mgechev Summary ● Reducing the bundle size ● Speeding up user navigations ● Automated deployment via CLI ● Progressive rehydration ● Compile-time optimizations

Slide 88

Slide 88 text

@yourtwitter @mgechev Questions

Slide 89

Slide 89 text

@mgechev Thank you! twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com