What's New in Angular version 8

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 --collection=@angular/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