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

What's coming to Angular version 9

What's coming to Angular version 9

Minko Gechev

August 24, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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/[email protected]

    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 [email protected]/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