What's New in Angular version 8

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
May 27, 2019
Programming
4
1.5k

What's New in Angular version 8

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 27, 2019
Tweet

Want more?

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
0
13
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
2
440
82bafb0432ce4ccc9dcc26f94d5fe5bc?s=48 mgechev
1
53
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
1
130
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
67
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
67
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
4
130
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
150
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
220
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
410
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
110
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
200

Transcript

  1. 1.

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

  2. 2.

    @mgechev Angular version 8 is coming out soon!

  3. 3.

    @mgechev Release schedule Two major releases a year

  4. 4.

    @yourtwitter @mgechev • Following SemVer • Predictable & guaranteed •

    Place for innovation Release policy
  5. 5.

    @mgechev Still…major release means potential breaking changes

  6. 6.

    @mgechev

  7. 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
  8. 8.

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

  9. 9.

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

    Version 7 Version 8
  10. 10.

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

    [ { path: 'a', loadChildren: import('./a.module') .then(m => m.AModule); },
 ... ]; 
 Version 7 Version 8
  11. 11.

    @mgechev

  12. 12.

    @mgechev

  13. 13.

    @mgechev Angular Community

  14. 14.

    @mgechev angular.io grew >50% in 2018

  15. 15.

    @mgechev How to contribute?

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

    @mgechev

  18. 18.

    @mgechev

  19. 19.

    @mgechev Angular Collaborators Program Adam Plumer Deborah Kurata Sam Julien

    Markus Padourek Manfred Steyer Jason Bedard Cédric Exbrayat JiaLi Passion Joost Koehoorn
  20. 20.

    @mgechev Angular Collaborators Program Manfred Steyer

  21. 21.

    twitter.com/mgechev

  22. 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
  23. 23.

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

  24. 24.

    @mgechev Step 1: Load HTML Step 2: Look at script

    tags Step 2: Download right version Differential loading
  25. 25.

    @yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading

    </title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
  26. 26.

    @yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading

    </title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
  27. 27.

    @yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal

    for a browser standard WHATWG
  28. 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
  29. 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
  30. 30.

    @mgechev

  31. 31.

    @mgechev Builders allow you to override existing commands

  32. 32.

    @mgechev

  33. 33.

    @mgechev Partnering with

  34. 34.

    @mgechev Work in progress…

  35. 35.

    @mgechev Build like Google

  36. 36.

    @yourtwitter @mgechev Benefits of Bazel • Incremental builds • Sharing

    cache between team & CI • Full-stack support • Scale on the cloud
  37. 37.

    @mgechev Few Bazel users Google Lucidchart LogiOcean

  38. 38.

    @mgechev Speed improvements for Angular’s CI build 0 1000 2000

    3000 4000 Before RBE After RBE
  39. 39.

    @mgechev Bazel opt-in preview

  40. 40.

    @yourtwitter npm i -g @angular/bazel
 ng new my-app --collection=@angular/bazel Try

    Bazel in version 8
  41. 41.

    @yourtwitter @mgechev Ivy • Simpler debugging • Backwards compatible •

    Lower memory usage • Faster tests • Smaller • Faster compilation • Improved type checking
  42. 42.

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

    Google
  43. 43.

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

    unit tests time
  44. 44.

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

    Material unit tests memory
  45. 45.

    @yourtwitter @mgechev Work pending in Angular Ivy • Smaller •

    Faster compilation • Improved type checking
  46. 46.

    @mgechev Ivy opt-in preview

  47. 47.

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

  48. 48.

    @yourtwitter @mgechev Recap • Release schedule • Evergreen Angular •

    Collaborators program • Differential loading & Builders API • Bazel & Ivy in opt-in preview
  49. 49.

    @mgechev Thank you! twitter.com/mgechev
 github.com/mgechev
 blog.mgechev.com