Tools for Fast Angular Applications

Angular grew significantly in the past few years from both a tooling and developer experience standpoint. This talk will explore many of the features and newer improvements in the pipeline that allow anyone to build and deploy performant apps with very little overhead.

Through real demos and examples, we’ll cover Ivy, bundle budgeting, differential serving, automatic code-splitting, and more! In the second part of the talk, we’ll focus on how to efficiently prefetch and preload different modules and components.

Transcript

1. @mgechev
   Tools for Fast Angular Applications
   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. @mgechev
    

    View Slide

14. @yourtwitter
    Angular CLI
    Introduced this feature in
    v8.0.0
    

    View Slide

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

    View Slide

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

    View Slide

17. twitter.com/mgechev
    lazy-loading
    

    View Slide

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

    View Slide

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

    View Slide

20. @mgechev
    

    View Slide

21. @mgechev
    

    View Slide

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

    View Slide

23. @mgechev
    

    View Slide

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

    View Slide

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

    ...
    ];
    

    View Slide

26. @mgechev
    

    View Slide

27. @mgechev
    

    View Slide

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

29. twitter.com/mgechev
    

    View Slide

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

    View Slide

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

    View Slide

32. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. @mgechev
    

    View Slide

38. @mgechev
    

    View Slide

39. @mgechev
    early
    alpha
    

    View Slide

40. @mgechev
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. @yourtwitter
    Angular projects
    without compression
    >27%
    

    View Slide

45. @yourtwitter
    >80%
    Angular projects
    without CDN
    

    View Slide

46. @mgechev
    

    View Slide

47. @mgechev
    Partnering with
    

    View Slide

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

    View Slide

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

    github.com/mgechev

    blog.mgechev.com
    

    View Slide