Wassim Chegham PRO
Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev
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
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
Tooling api
Builders api
@angular-devkit/architect
deploy... xyz
cli, GUI... xyz
The purpose of Builder API
@ManekiNekko
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 buildShould 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
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)@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-appTry 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-ivyThe 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!
@ManekiNekko
Angular's Future
Smaller,
Faster,
Easier
@ManekiNekko
@manekinekko
slides.com/wassimchegham
Angular's Future – Smaller, Faster, Better
By Wassim Chegham
Angular's Future – Smaller, Faster, Better
The Angular CLI has made creating and managing Angular apps a breeze. And it does not stop there. Want to have a glimpse into what Angular has in store for the future? In this talk, we will learn about Bazel and how the new build system works, what the Angular DevKit is, how to customize the CLI with Schematics and Builders and much more.
