Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tools for Fast Angular Applications

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.

Minko Gechev

May 01, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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