AngularConnect, 2nd Day Keynote

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
September 20, 2019

AngularConnect, 2nd Day Keynote

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

September 20, 2019
Tweet

Transcript

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

  2. @yourtwitter @mgechev Agenda • Web platform & standards • Automate

    DX • Enable best practices • Enable extensibility • Build at scale
  3. @mgechev

  4. @mgechev

  5. @mgechev

  6. @mgechev

  7. @yourtwitter @mgechev Angular Chrome Collaboration • PWAs • Web Performance

    • Web Standards • Testing • Much more!
  8. @mgechev web.dev/angular

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

    Accessible
  10. twitter.com/ mgechev

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

    Works
 by Kara Erickson
  12. @mgechev Automating DX schematics++

  13. @mgechev

  14. @yourtwitter Route-level code-splitting const routes: Routes = [ { path:

    'about', loadChildren: import('./about/about.module') .then(m => m.AboutModule); },
 ... ];
  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
  16. $ ng g module ranking --route ranking --module app.module Angular

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

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

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

    app.module Angular CLI version 8.1
  20. @mgechev

  21. @mgechev

  22. @mgechev

  23. @mgechev

  24. @mgechev

  25. @mgechev

  26. @mgechev Intelligent Tooling schematics & constraints

  27. @mgechev

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

  30. @mgechev

  31. @mgechev

  32. @mgechev

  33. @mgechev

  34. @mgechev

  35. @mgechev

  36. @mgechev

  37. @mgechev

  38. @mgechev

  39. @mgechev

  40. @mgechev Power in Constraints by Rado Kirov

  41. @mgechev A performance budget is a limit for pages which

    the team is not allowed to exceed. Addy Osmani
  42. @yourtwitter Performance Budgets enforces constraints to let you have guarantees

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

  44. @mgechev Enabling Best Practices schematics & builders API

  45. @mgechev

  46. @mgechev

  47. @mgechev Angular Collaborators Program

  48. @mgechev Angular Collaborators Program Manfred Steyer

  49. twitter.com/ mgechev

  50. @mgechev Improves TTI with over 30%

  51. @mgechev Angular projects without compression >27%

  52. @mgechev >80% Angular projects without CDN

  53. @mgechev ng deploy

  54. @mgechev

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

  56. @mgechev Shmuela Jacobs Cloud Developer Advocate, Microsoft

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

  58. @mgechev

  59. @mgechev Enabling Extensibility builders API

  60. None
  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
  62. @mgechev ng run app:builder

  63. @mgechev @BenjaminDobler

  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
  65. @mgechev Learn more about builders angular.io/guide/cli-builder

  66. @mgechev Building at Scale Bazel + builders API

  67. None
  68. @mgechev Who’s using Bazel

  69. None
  70. @mgechev Bazel & Angular Layering Bazel Plugins for Node.js &

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

    Angular Builders API & Angular CLI
  72. Bazel 1.0.0 release this month

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

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

    Angular Builders API & Angular CLI
  75. @mgechev

  76. @mgechev

  77. @mgechev youtu.be/J1lnp-nU4wM

  78. @mgechev bazel.angular.io

  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?
  80. @yourtwitter @mgechev • Moving the web platform forward • Automating

    DX • Working on intelligent tooling • Enabling best practices • Building at scale Recap
  81. @mgechev Thank you! twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com