What's New in Angular version 8

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

@mgechev Angular version 8 is coming out soon!

@mgechev Release schedule Two major releases a year

@yourtwitter @mgechev • Following SemVer • Predictable & guaranteed •
Place for innovation Release policy

@mgechev Still…major release means potential breaking changes

@mgechev

@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

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

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

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

@mgechev

@mgechev Angular Community

@mgechev angular.io grew >50% in 2018

@mgechev How to contribute?

@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

@mgechev

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

@mgechev Angular Collaborators Program Manfred Steyer

twitter.com/mgechev

@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

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

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

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

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

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

@mgechev

@mgechev Builders allow you to override existing commands

@mgechev

@mgechev Partnering with

@mgechev Work in progress…

@mgechev Build like Google

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

@mgechev Few Bazel users Google Lucidchart LogiOcean

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

@mgechev Bazel opt-in preview

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

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

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

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

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

@yourtwitter @mgechev Work pending in Angular Ivy • Smaller •
Faster compilation • Improved type checking

@mgechev Ivy opt-in preview

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

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

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

What's New in Angular version 8

What's New in Angular version 8

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript