Angular V8 - Features and Changes

v8

`whoami`

M. Ahsan Ayaz

Senior Software Engineer

  • #googleIORecapWITPK

  • #googleIORecap

  • #womenInTechPK

Hashtags for the event

A bit... but a lot about Angular

It's not just a framework

It is a Community

And the community is amazing!

An example....

Vin Lim

@vinlim

Henry Lim (@henrylim96)

Angular Team's Core Values

  • Apps user love to use
  • Apps developers love to build
  • A community where everyone feels welcome

source: Google I/O 19

Angular Team's Survey from public enterprises

  • Angular CLI
  • Opinionated Architecture
  • The Community

source: Google I/O 19

Angular Ecosystem

Animations

Augury

CLI

CDK

Web Components

Compiler

Forms

HTTP

i18n

Karma

Labs

Language Services

Material

Protractor

PWA

Router

Universal

ng add

Adding third-party libraries/tools to your angular projects

Schematics

Schematic execute the transformations in memory

If anything fails in the process, nothing is written on the disc

Can be used to scaffold projects, installing/updating dependencies.

Schematics

ng add

@angular/ionic

@nativescript/schematics

ng add much more

@angular/pwa

 

@angular/elements

@ngrx/schematics

ngx-build-plus

...

source: Google I/O 19

Community Projects / Tools

Stackblitz

NX

ngx-bootstrap

Angular Material

NgRx

ngx-device-detector

*Shameless plug

Have you seen someone updating project dependencies?

It somehow feels like...

ng update

Updating third-party libraries/tools to your angular projects

ng update can potentially:

  • Add/edit some files in your project.
  • Delete some files
  • Install additional packages

So what is new?

CDK - Drag n Drop

CDK - Virtual Scrolling

Differential Loading

The CLI now creates different bundles for modern and legacy browsers

Smaller bundle size for the bundle for modern browsers

Avoids adding unnecessary polyfills

Everything is out of the box, no additional config needed

Bundle sizes may decrease from 7 to 20%

source: Google I/O 19

IVY - Opt-in Preview

source: NGCONF 2019

IVY - Opt-in Preview

ng new awesome-app --enable-ivy

IVY - Opt-in Preview

source: NGCONF 2019

IVY is right now in the opt-in preview

Not all third-party libraries support IVY

Bazel - Experimental Support

A tool that orchestrates the build process (Webpack, Typescript, etc) to speed up & optimize the overall build flow

Bazel - Experimental Support

Bazel - Experimental Support

Bazel - Experimental Support

Bazel - Experimental Support

What Changed?

@angular/http is not supported anymore

Use @angular/common/http instead

Using {static: (false | true)} for @ViewChild and @Content Child

What to Expect in V9?

IVY being the default rendering engine

Stable support for Bazel with Angular CLI

Enhanced IVY API

Install me

That's it! Questions?

Thank You !

Senior Software Engineer

Klarna

Angular V8 - Features and Changes

By Ahsan Ayaz

Angular V8 - Features and Changes

  • 119
Loading comments...

More from Ahsan Ayaz