What's coming to Angular version 9

Transcript

1. @yourtwitter
   What's coming to Angular version 9
   NG Bolivia
   twitter.com/mgechev

   github.com/mgechev

   blog.mgechev.com
   

   View Slide

2. @mgechev
   Annual Angular Conferences
   

   View Slide

3. ngAtlanta
   !
   ngIndia
   "
   Angular NL
   #
   ng-conf
   !
   ngVikings
   $
   Angular Day
   %
   Angular in
   Depth
   &
   ngDenver
   !
   NG-MY
   '
   ng-japan
   (
   NG-DE
   )
   ng-SriLanka
   *
   Angular
   Connect
   +
   ngSpain
   ,
   NGRome
   %
   NG
   Honduras
   -
   ngTaiwan
   .
   ngTalks
   &
   NG-BE
   /
   ngBolivia
   0
   AngularMix
   !
   ngPoland
   1
   AngularUP
   2
   ngChina
   3
   

   View Slide

4. ngAtlanta
   !
   ngIndia
   "
   Angular NL
   #
   ng-conf
   !
   ngVikings
   $
   Angular Day
   %
   Angular in
   Depth
   &
   ngDenver
   !
   NG-MY
   '
   ng-japan
   (
   NG-DE
   )
   ng-SriLanka
   *
   Angular
   Connect
   +
   ngSpain
   ,
   NGRome
   %
   NG
   Honduras
   -
   ngTaiwan
   .
   ngTalks
   &
   NG-BE
   /
   ngBolivia
   0
   AngularMix
   !
   ngPoland
   1
   AngularUP
   2
   ngChina
   3
   

   View Slide

5. @mgechev
   Over 780 Angular Meetups Worldwide
   

   View Slide

6. @mgechev
   How to contribute?
   

   View Slide

7. @yourtwitter
   @mgechev
   ● Organize a meetup
   ● Help with the docs
   ● Write a blog post
   ● Help on StackOverflow
   ● Answer questions on gitter
   ● Introduce a bug fix
   ● …
   Ways to contribute
   

   View Slide

8. @mgechev
   

   View Slide

9. @mgechev
   

   View Slide

10. @mgechev
    What’s new in version 8
    

    View Slide

11. What’s new in version 8.3
    redesign of the
    default app
    ng deploy faster builds
    

    View Slide

12. What’s new in version 8.3
    redesign of the
    default app
    ng deploy faster builds
    

    View Slide

13. @mgechev
    

    View Slide

14. @mgechev
    

    View Slide

15. What’s new in version 8.3
    redesign of the
    default app
    ng deploy faster builds
    

    View Slide

16. @mgechev
    

    View Slide

17. @angular/fire @azure/ng-deploy @zeit/ng-deploy
    angular-cli-ghpages @netlify-builder/deploy
    

    View Slide

18. @mgechev
    Your favorite platform not in the list?
    

    View Slide

19. @mgechev
    github.com/angular-schule/ngx-deploy-starter
    @JohannesHoppe
    

    View Slide

20. What’s new in version 8.3
    redesign of the
    default app
    ng deploy faster builds
    

    View Slide

21. @mgechev
    Now let’s talk about the future
    

    View Slide

22. @yourtwitter
    @mgechev
    Ivy
    ● Simpler debugging
    ● Lower memory usage
    ● Faster tests
    ● Smaller
    ● Faster compilation
    ● Improved type checking
    ● Backwards compatible
    
    

    View Slide

23. @mgechev
    Planning to release Ivy in version 9
    

    View Slide

24. @mgechev
    Planning to release Ivy in version 9
    
    

    View Slide

25. Faster tests
    -38% Framework unit
    tests time
    -80% Material unit
    tests time
    

    View Slide

26. Lower memory requirements
    -30% Framework unit
    tests memory
    -91% Material unit
    tests memory
    

    View Slide

27. @mgechev
    Tree-shakability
    Runtime
    Generated code
    Triangle of the bundle size
    

    View Slide

28. @mgechev
    Tree-shakability
    Runtime
    Generated code
    Triangle of the bundle size
    

    View Slide

29. @mgechev
    Tree-shakability
    Runtime
    Generated code
    Triangle of the bundle size
    

    View Slide

30. @mgechev
    Tree-shakability
    Runtime
    Generated code
    Triangle of the bundle size
    

    View Slide

31. @mgechev
    

    View Slide

32. @mgechev
    Try version 9 today!
    npm i -g @angular/cli@next
    

    View Slide

33. @yourtwitter
    ng new my-app
    Angular CLI 9.0.0-next.0 - Ivy by default!
    

    View Slide

34. @mgechev
    Some technical details
    

    View Slide

35. @mgechev
    VE
    @Component({
    selector: 'app',
    template: ' ...'
    })
    class AppComponent { ... }
    app.ngfactory.js
    app.ngsummary.json
    app.metadata.json
    app.component.js
    app.component.d.ts
    

    View Slide

36. @mgechev
    VE
    @Component({
    selector: 'app',
    template: ' ...'
    })
    class AppComponent { ... }
    app.ngfactory.js
    app.ngsummary.json
    app.metadata.json
    app.component.js
    app.component.d.ts
    

    View Slide

37. @mgechev
    Ivy
    @Component({
    selector: 'app',
    template: ' ...'
    })
    class AppComponent { ... }
    app.component.js
    app.component.d.ts
    

    View Slide

38. @mgechev
    Don’t worry about any of this
    the Angular CLI will take care of everything
    

    View Slide

39. Build like Google
    

    View Slide

40. @yourtwitter
    @mgechev
    Benefits of Bazel
    ● Incremental builds
    ● Sharing cache between team & CI
    ● Full-stack support
    ● Scale on the cloud
    

    View Slide

41. Few Bazel users
    Google Lucidchart LogiOcean
    Evertz
    Microsystems
    …
    

    View Slide

42. Speed improvements for Angular’s CI build
    0
    1000
    2000
    3000
    4000
    Before RBE After RBE
    

    View Slide

43. @yourtwitter
    npm i -g @angular/bazel

    ng new my-app --collection=@angular/bazel
    Try Bazel in version 8
    

    View Slide

44. @mgechev
    Should I learn Bazel?
    

    View Slide

45. @yourtwitter
    @mgechev
    Should I learn Bazel?
    ● You don’t need Bazel to use Angular
    ● It’s worth it to understand Bazel
    ● Teaches good practices
    ● Skill you can reuse across
    technologies
    

    View Slide

46. @yourtwitter
    @mgechev
    Recap
    ● Thankful to the amazing community
    ● Angular CLI 8.3
    ● Redesign of the ng new app
    ● ng deploy
    ● Planning Ivy for version 9
    ● Check out Bazel for builds at scale
    

    View Slide

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

    github.com/mgechev

    blog.mgechev.com
    

    View Slide