AngularConnect, 2nd Day Keynote

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