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

What's New in Angular version 8

What's New in Angular version 8

Minko Gechev

May 27, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. @yourtwitter
    What’s New in Angular
    Minko Gechev
    twitter.com/mgechev

    github.com/mgechev

    blog.mgechev.com

    View Slide

  2. @mgechev
    Angular version 8 is coming out soon!

    View Slide

  3. @mgechev
    Release schedule
    Two major releases a year

    View Slide

  4. @yourtwitter
    @mgechev
    ● Following SemVer
    ● Predictable & guaranteed
    ● Place for innovation
    Release policy

    View Slide

  5. @mgechev
    Still…major release means potential breaking changes

    View Slide

  6. @mgechev

    View Slide

  7. @mgechev
    0
    7.5
    15
    22.5
    30
    v2 to v4 v4 to v5 v5 to v6 v6 to v7
    Air France / KLM Upgrade times

    View Slide

  8. @yourtwitter
    ng update @angular/cli @angular/core
    Migrate to latest Angular

    View Slide

  9. @yourtwitter
    [
    {
    path: ‘a',
    loadChildren:
    './a.module#AModule'
    },
    ...
    ];
    Version 7 Version 8

    View Slide

  10. @yourtwitter
    [
    {
    path: ‘a',
    loadChildren:
    './a.module#AModule'
    },
    ...
    ];
    [
    {
    path: 'a',
    loadChildren:
    import('./a.module')
    .then(m => m.AModule);
    },

    ...
    ];

    Version 7 Version 8

    View Slide

  11. @mgechev

    View Slide

  12. @mgechev

    View Slide

  13. @mgechev
    Angular Community

    View Slide

  14. @mgechev
    angular.io grew >50% in 2018

    View Slide

  15. @mgechev
    How to contribute?

    View Slide

  16. @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

  17. @mgechev

    View Slide

  18. @mgechev

    View Slide

  19. @mgechev
    Angular Collaborators Program
    Adam Plumer Deborah Kurata Sam Julien Markus Padourek Manfred Steyer
    Jason Bedard Cédric Exbrayat JiaLi Passion Joost Koehoorn

    View Slide

  20. @mgechev
    Angular Collaborators Program
    Manfred Steyer

    View Slide

  21. twitter.com/mgechev

    View Slide

  22. @yourtwitter
    @mgechev
    Differential loading
    ● Produce ES5 bundles for newer browsers
    ● Do not send polyfills to modern browsers
    ● Smaller payload
    ● Do not downlevel modern features
    ● Faster execution
    ● Smaller payload

    View Slide

  23. @mgechev
    -65KB polyfills
    ~2-10% smaller bundles

    View Slide

  24. @mgechev
    Step 1: Load HTML Step 2: Look at script tags Step 2: Download right
    version
    Differential loading

    View Slide

  25. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  26. @yourtwitter
    Differential loading



    Differential loading






    View Slide

  27. @yourtwitter
    @mgechev
    Differential loading
    ✅ Simple deployment infrastructure
    ✅ Proposal for a browser standard
    WHATWG

    View Slide

  28. @mgechev
    Version 8 features
    Builders Deploy Web Workers
    SW
    Improvements
    Code-splitting
    with import
    AngularJS
    $location
    support
    Better IDE
    completion
    Simplified
    “Getting started”
    guide

    View Slide

  29. @mgechev
    Version 8 features
    Builders Deploy Web Workers
    SW
    Improvements
    Code-splitting
    with import
    AngularJS
    $location
    support
    Better IDE
    completion
    Simplified
    “Getting started”
    guide

    View Slide

  30. @mgechev

    View Slide

  31. @mgechev
    Builders allow you to override existing commands

    View Slide

  32. @mgechev

    View Slide

  33. @mgechev
    Partnering with

    View Slide

  34. @mgechev
    Work in progress…

    View Slide

  35. @mgechev
    Build like Google

    View Slide

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

    View Slide

  37. @mgechev
    Few Bazel users
    Google Lucidchart LogiOcean

    View Slide

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

    View Slide

  39. @mgechev
    Bazel opt-in preview

    View Slide

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

    ng new my-app [email protected]/bazel
    Try Bazel in version 8

    View Slide

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

    View Slide

  42. @mgechev
    Backwards compatible
    97% Passing unit,
    integration,
    screenshot tests
    at Google

    View Slide

  43. @mgechev
    Faster tests
    -38% Framework unit
    tests time
    -80% Material unit
    tests time

    View Slide

  44. @mgechev
    Lower memory requirements
    -30% Framework unit
    tests memory
    -91% Material unit
    tests memory

    View Slide

  45. @yourtwitter
    @mgechev
    Work pending in Angular Ivy
    ● Smaller
    ● Faster compilation
    ● Improved type checking

    View Slide

  46. @mgechev
    Ivy opt-in preview

    View Slide

  47. @yourtwitter
    ng new my-app --enable-ivy
    Try Ivy in version 8

    View Slide

  48. @yourtwitter
    @mgechev
    Recap
    ● Release schedule
    ● Evergreen Angular
    ● Collaborators program
    ● Differential loading & Builders API
    ● Bazel & Ivy in opt-in preview

    View Slide

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

    github.com/mgechev

    blog.mgechev.com

    View Slide