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

AngularConnect, 2nd Day Keynote

Minko Gechev
September 20, 2019

AngularConnect, 2nd Day Keynote

Minko Gechev

September 20, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. @yourtwitter
    2nd Day Keynote
    Minko Gechev
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com

    View Slide

  2. @yourtwitter
    @mgechev
    Agenda
    ● Web platform & standards
    ● Automate DX
    ● Enable best practices
    ● Enable extensibility
    ● Build at scale

    View Slide

  3. @mgechev

    View Slide

  4. @mgechev

    View Slide

  5. @mgechev

    View Slide

  6. @mgechev

    View Slide

  7. @yourtwitter
    @mgechev
    Angular Chrome Collaboration
    ● PWAs
    ● Web Performance
    ● Web Standards
    ● Testing
    ● Much more!

    View Slide

  8. @mgechev
    web.dev/angular

    View Slide

  9. @yourtwitter
    @mgechev
    web.dev/angular
    ● Fast
    ● Reliable
    ● Installable
    ● Accessible

    View Slide

  10. twitter.com/
    mgechev

    View Slide

  11. @mgechev
    Performance Optimizations
    in Angular by Mert Değirmenci
    How Angular Works

    by Kara Erickson

    View Slide

  12. @mgechev
    Automating DX
    schematics++

    View Slide

  13. @mgechev

    View Slide

  14. @yourtwitter
    Route-level code-splitting
    const routes: Routes = [
    {
    path: 'about',
    loadChildren: import('./about/about.module')
    .then(m => m.AboutModule);
    },

    ...
    ];

    View Slide

  15. @yourtwitter
    @mgechev
    ● Define an NgModule
    ● Declare a lazy route
    ● Declare a default route in the NgModule
    ● Define a component for the default route
    ● (Optional) Introduce a routing module
    Creating a lazy route

    View Slide

  16. $ ng g module ranking --route ranking --module app.module
    Angular CLI version 8.1

    View Slide

  17. Module name
    $ ng g module ranking --route ranking --module app.module
    Angular CLI version 8.1

    View Slide

  18. Path to the lazy route
    $ ng g module ranking --route ranking --module app.module
    Angular CLI version 8.1

    View Slide

  19. Parent module
    $ ng g module ranking --route ranking --module app.module
    Angular CLI version 8.1

    View Slide

  20. @mgechev

    View Slide

  21. @mgechev

    View Slide

  22. @mgechev

    View Slide

  23. @mgechev

    View Slide

  24. @mgechev

    View Slide

  25. @mgechev

    View Slide

  26. @mgechev
    Intelligent Tooling
    schematics & constraints

    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
    Preloading

    View Slide

  29. @mgechev

    View Slide

  30. @mgechev

    View Slide

  31. @mgechev

    View Slide

  32. @mgechev

    View Slide

  33. @mgechev

    View Slide

  34. @mgechev

    View Slide

  35. @mgechev

    View Slide

  36. @mgechev

    View Slide

  37. @mgechev

    View Slide

  38. @mgechev

    View Slide

  39. @mgechev

    View Slide

  40. @mgechev
    Power in Constraints by Rado Kirov

    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
    angular.io/guide/build

    View Slide

  43. @mgechev
    Component style budgets
    v8.2.0
    github.com/angular/angular-cli/pull/15127

    View Slide

  44. @mgechev
    Enabling Best Practices
    schematics & builders API

    View Slide

  45. @mgechev

    View Slide

  46. @mgechev

    View Slide

  47. @mgechev
    Angular Collaborators Program

    View Slide

  48. @mgechev
    Angular Collaborators Program
    Manfred Steyer

    View Slide

  49. twitter.com/
    mgechev

    View Slide

  50. @mgechev
    Improves TTI with over 30%

    View Slide

  51. @mgechev
    Angular projects
    without compression
    >27%

    View Slide

  52. @mgechev
    >80%
    Angular projects
    without CDN

    View Slide

  53. @mgechev
    ng deploy

    View Slide

  54. @mgechev

    View Slide

  55. @mgechev
    @angular/fire @azure/ng-deploy @zeit/ng-deploy
    angular-cli-ghpages @netlify-builder/deploy ngx-deploy-npm

    View Slide

  56. @mgechev
    Shmuela Jacobs
    Cloud Developer Advocate, Microsoft

    View Slide

  57. @mgechev
    @angular/fire @azure/ng-deploy @zeit/ng-deploy
    angular-cli-ghpages @netlify-builder/deploy ngx-deploy-npm

    View Slide

  58. @mgechev

    View Slide

  59. @mgechev
    Enabling Extensibility
    builders API

    View Slide

  60. View Slide

  61. @yourtwitter
    @mgechev
    Builders API
    ● Provides extensibility points to the CLI
    ● Implement a custom functionality
    ● Introduce builder with ng-add schematic
    ● Update angular.json
    ● Optionally introduce custom config

    View Slide

  62. @mgechev
    ng run app:builder

    View Slide

  63. @mgechev
    @BenjaminDobler

    View Slide

  64. @yourtwitter
    @mgechev
    ● All the deployment builders
    ● @ud-angular-builders/jest - Jest builder
    ● Nx tooling
    ● ngx-build-plus - custom webpack config
    ● @richapps/ngtron - electron support in the CLI
    ● @richapps/ngnode - build node.js apps with the CLI
    ● Over 60 more
    Other community builders

    View Slide

  65. @mgechev
    Learn more about builders
    angular.io/guide/cli-builder

    View Slide

  66. @mgechev
    Building at Scale
    Bazel + builders API

    View Slide

  67. View Slide

  68. @mgechev
    Who’s using Bazel

    View Slide

  69. View Slide

  70. @mgechev
    Bazel & Angular Layering
    Bazel
    Plugins for Node.js & Angular
    Builders API & Angular CLI

    View Slide

  71. @mgechev
    Bazel & Angular Layering
    Bazel
    Plugins for Node.js & Angular
    Builders API & Angular CLI

    View Slide

  72. Bazel 1.0.0 release
    this month

    View Slide

  73. @mgechev
    Bazel & Angular Layering
    Bazel
    Plugins for Node.js & Angular
    Builders API & Angular CLI

    View Slide

  74. @mgechev
    Bazel & Angular Layering
    Bazel
    Plugins for Node.js & Angular
    Builders API & Angular CLI

    View Slide

  75. @mgechev

    View Slide

  76. @mgechev

    View Slide

  77. @mgechev
    youtu.be/J1lnp-nU4wM

    View Slide

  78. @mgechev
    bazel.angular.io

    View Slide

  79. @yourtwitter
    @mgechev
    ● You don’t need Bazel to use Angular
    ● It’s worth it to understand Bazel as a
    software engineer
    ● Teaches good practices
    ● Reusable skills across technologies
    Should I learn Bazel?

    View Slide

  80. @yourtwitter
    @mgechev
    ● Moving the web platform forward
    ● Automating DX
    ● Working on intelligent tooling
    ● Enabling best practices
    ● Building at scale
    Recap

    View Slide

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

    github.com/mgechev

    blog.mgechev.com

    View Slide