Building Fast Angular Applications From End-to-End

Transcript

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

   github.com/mgechev

   blog.mgechev.com
   ⚡
   

   View Slide

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

   View Slide

3. @yourtwitter
   Network performance Description or Image
   @twitterhandle
   

   View Slide

4. @yourtwitter
   Shipping less JavaScript
   

   View Slide

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

   View Slide

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

   View Slide

7. @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
   

   View Slide

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

   View Slide

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

   View Slide

10. @yourtwitter
    Differential loading
    
    
    
    Differential loading
    
    
    
    
    
    
    

    View Slide

11. @yourtwitter
    Differential loading
    
    
    
    Differential loading
    
    
    
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

14. twitter.com/mgechev
    lazy-loading
    

    View Slide

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

    View Slide

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

    View Slide

17. @mgechev
    

    View Slide

18. @mgechev
    

    View Slide

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

    View Slide

20. @mgechev
    

    View Slide

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

    ...
    ];
    

    View Slide

22. @mgechev
    

    View Slide

23. @mgechev
    

    View Slide

24. 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
    

    View Slide

25. twitter.com/mgechev
    

    View Slide

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

    View Slide

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

    View Slide

28. @mgechev
    

    View Slide

29. @yourtwitter
    Prefetch visible links
    $ npm install ngx-quicklink
    

    View Slide

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

    View Slide

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

    View Slide

32. @mgechev
    

    View Slide

33. @mgechev
    

    View Slide

34. twitter.com/mgechev
    

    View Slide

35. 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
    

    View Slide

36. 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
    

    View Slide

37. 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
    

    View Slide

38. 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,
    }
    ];
    

    View Slide

39. 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,
    }
    ];
    

    View Slide

40. 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,
    }
    ];
    

    View Slide

41. @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]
    )
    

    View Slide

42. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

45. @mgechev
    

    View Slide

46. @yourtwitter
    One more thing
    to make your apps faster
    ⚡
    

    View Slide

47. @yourtwitter
    Angular projects
    without compression
    >27%
    

    View Slide

48. @yourtwitter
    >80%
    Angular projects
    without CDN
    

    View Slide

49. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

52. @mgechev
    Thank you!
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com
    

    View Slide