The state of Angular tooling

Dublin, Ireland – 2019

WASSIM CHEGHAM – @manekinekko

Angular's Future

Smaller,

Faster,

Better

The Angular Ecosystem

Microsoft

Senior Cloud Advocate

Wassim CHEGHAM

@manekinekko

@wassimchegham

Klingon

(author)

xLayers.dev

(author)

Angular Core Team

Compodoc

(co-author)

Universal

(Alumni.)

ngx.tools

(author)

Node.js Foundation Invited Member

@angular/cli

Schematics

Schematics: Blueprints for the CLI

Default

Extend

Replace

Custom

@ManekiNekko

Create your own Schematic

npm install -g @angular-devkit/schematics-cli
schematics blank --name=foo   

CREATE /foo/README.md (639 bytes)
CREATE /foo/.gitignore (191 bytes)
CREATE /foo/.npmignore (64 bytes)
CREATE /foo/package.json (540 bytes)
CREATE /foo/tsconfig.json (656 bytes)
CREATE /foo/src/collection.json (205 bytes)
CREATE /foo/src/foo/index.ts (310 bytes)
CREATE /foo/src/foo/index_spec.ts (456 bytes)

@ManekiNekko

The Builder API

The Angular Tooling system to develop and interact with Builders and external tools, which can perform common tasks: Linting, Building...

The Builder API is...

@ManekiNekko

Introducing CLI Builders

Tooling api

Builders api

@angular-devkit/architect

deploy... xyz

cli, GUI... xyz

The purpose of Builder API

@ManekiNekko

Deploy

@angular/fire

@azure/ng-deploy

@zeit/ng-deploy

angular-cli-ghpages

@netlify-builder/deploy

@ManekiNekko

Telemetry

Why collect usage data?

Share anonymous usage data with the Angular team or your internal Analytics server in order to improve the CLI (read more).

–The Angular team

⚠️ Telemetry is OPT-IN

Opt-in and opt-out at any time.

Disabled by default.

Must be enabled at the project level.

@ManekiNekko

Differential Loading

Differential Loading...

Reduce the payload size for all modern browsers.

Still support legacy browser and HTML crawler.

On By default since version 8.

@ManekiNekko

Output in index.html

<!-- For modern browsers -->
<script type="module" src="polyfills-es2015.js"></script>
<script type="module" src="runtime-es2015.js"></script>
<script type="module" src="style-es2015.js"></script>
<script type="module" src="vendor-es2015.js"></script>
<script type="module" src="main-es2015.js"></script>

<!-- For Legacy browsers -->
<script nomodule src="polyfills-es5.js"></script>
<script nomodule src="runtime-es5.js"></script>
<script nomodule src="style-es5.js"></script>
<script nomodule src="vendor-es5.js"></script>
<script nomodule src="main-es5.js"></script>

@ManekiNekko

@angular/bazel

A modern* build and test orchestration system.

Bazel:

@ManekiNekko

* +10 years old.

Bazel isn't replacing Webpack nor the CLI nor any other build tool.

Disclaimer

@ManekiNekko

your app

distributed cache

distributed execution

Benefits of Bazel

@ManekiNekko

They use Bazel...

With Angular, just use the CLI.

# For new apps
npm install -g @angular/bazel
ng new my-app --collection=@angular/bazel
ng build

# For existing apps
ng add @angular/bazel
ng build

Should I learn Bazel?

@ManekiNekko

Universally Fullstack

Android, C & C++, C#, D, Docker, Go, Groovy, Kotlin, iOS, Java, JavaScript, Jsonnet, Objective, OCaml, C, Proto Buffers, Python, Rust, Sass, Scala, Shell, TypeScript, etc...

@ManekiNekko

@angular/elements

Angular

Components

W3C

Custom

Elements

Angular Elements: Self Bootstrapping

@ManekiNekko

Registering as Custom Elements

angular.io/guide/elements

import { Component } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { PopupComponent } from './popup.component';

@Component({
  selector: 'app-root',
  template: `
    <h1>My Custom Element</h1>
  `,
})
export class AppComponent {
  constructor() {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent);
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

@ManekiNekko

@angular/platform-webworker

WebWorkers Support...

Recommended for heavy computations.

Run your own code off the main thread.

@ManekiNekko

WebWorkers: Automatic Bundling

ng generate web-worker app

CREATE tsconfig.worker.json (212 bytes)
CREATE src/app/app.worker.ts (157 bytes)
UPDATE src/tsconfig.app.json (192 bytes)
UPDATE angular.json (3893 bytes)
UPDATE src/app/app.component.ts (593 bytes)

https://next.angular.io/guide/web-worker

@ManekiNekko

@angular/router

Dynamic imports: ES2015 FTW!!

# Before
{
  path: 'home',
  loadChildren: 'home/home.module#HomeModule'
},


# After
{
  path: 'home',
  loadChildren: () => import('home/home.module').then(m => m.HomeModule)
},

@ManekiNekko

@angular/core

Ivy: A new compiler

Simpler debugging.

Lower memory footprint.

Faster tests.

Smaller and Faster.

NON-BREAKING CHANGES.

@ManekiNekko

Faster Tests...

-38%

In Framework.

-80%

In Material.

@ManekiNekko

Lower Memory Usage...

-30%

In Framework.

-91%

In Material.

@ManekiNekko

npm i -g @angular/cli@next
ng new shiny-ivy-app

Try Ivy in version 9

@ManekiNekko

36kb

7.3kb

2.7kb

Ivy minified

Ivy compressed

Today (compressed – no zone.js)

10kb

Initial target

Smaller Bundle Size

Try Version 9 TODAY

@ManekiNekko

npm i -g @angular/cli@next

# OR

ng update @angular/cli @angular/core --next

# OR for Angular version 8
ng new shiny-app --enable-ivy

The State of Angular

Schematics for custom CLI commands.

Builders for custom CLI workflows.

Bazel for faster and scalable builds.

WebWorker for smooth UX.

Getting ready for Ivy in version 9.

Differential loading for better TTI.

Dynamic Imports FTW!

Help us by Opting-in for Telemetry!