Building Fast Angular Applications From End-to-End

Slide 1

Slide 1 text

@yourtwitter Building Fast Angular Applications From End-to-End Minko Gechev twitter.com/mgechev  github.com/mgechev  blog.mgechev.com ⚡

Slide 2

Slide 2 text

@yourtwitter Description or Image @twitterhandle Agenda ● Network performance ● Tips & tricks ● Application in production

Slide 3

Slide 3 text

@yourtwitter Network performance Description or Image @twitterhandle

Slide 4

Slide 4 text

@yourtwitter Shipping less JavaScript

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 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 8

Slide 8 text

@mgechev -65KB polyfills ~2-10% smaller bundles

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@yourtwitter Differential loading Differential loading

Slide 11

Slide 11 text

@yourtwitter Differential loading Differential loading

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

twitter.com/mgechev lazy-loading

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@mgechev

Slide 18

Slide 18 text

@mgechev

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@mgechev

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@mgechev

Slide 23

Slide 23 text

@mgechev

Slide 24

Slide 24 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 25

Slide 25 text

twitter.com/mgechev

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

@mgechev

Slide 29

Slide 29 text

@yourtwitter Prefetch visible links $ npm install ngx-quicklink

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@mgechev

Slide 33

Slide 33 text

@mgechev

Slide 34

Slide 34 text

twitter.com/mgechev

Slide 35

Slide 35 text

twitter.com/mgechev app-routing.module.ts pseudo code   const routes: Routes = [ { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b

Slide 36

Slide 36 text

twitter.com/mgechev app-routing.module.ts pseudo code   const routes: Routes = [ { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b

Slide 37

Slide 37 text

twitter.com/mgechev app-routing.module.ts pseudo code   const routes: Routes = [ { path: 'a/:id', loadChildren: './a.js' }, { path: 'b', loadChildren: './b.js' } ]; report /a/1 /a/2 /b /a/:id

Slide 38

Slide 38 text

twitter.com/mgechev app-routing.module.ts pseudo code const module = 'settings.module.js'; const path = './settings'; const routes: Routes = [ { path: 'profile/:id', loadChildren: './profile/profile.module.js' }, { path: 'settings', loadChildren: path + '/' + module, } ];

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

@mgechev main.js a.js b.js c.js   p = ( ...pairs) => { // Prefetch chunk // if connection // is sufficient }; p( ['b.js', 0.3], ['c.js', 0.7] ) p( ['a.js', 0.1], ['c.js', 0.9] )   p( ['a.js', 1] )

Slide 42

Slide 42 text

@mgechev

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@mgechev

Slide 46

Slide 46 text

@yourtwitter One more thing to make your apps faster ⚡

Slide 47

Slide 47 text

@yourtwitter Angular projects without compression >27%

Slide 48

Slide 48 text

@yourtwitter >80% Angular projects without CDN

Slide 49

Slide 49 text

@mgechev

Slide 50

Slide 50 text

@mgechev @angular/fire @azure/ng-deploy @zeit/ng-deploy

Slide 51

Slide 51 text

@yourtwitter @mgechev Summary ● Reducing the bundle size ● Speeding up user navigations ● Predictive prefetching ● Automated deployment via CLI

Slide 52

Slide 52 text

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