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
WHAT'S COMING NEXT IN ANGULAR?
Wassim Chegham – @ManekiNekko
Head Of Open Source Program Office at SFEIR
NG-BE, December 7, 2018
Bazel
CLI & Schematics
Material & CDK
Angular Elements
Angular Ivy
Source: https://2018.stateofjs.com/front-end-frameworks/angular/
What happened?
NO. Fake News!!!!
Source: https://2018.stateofjs.com/front-end-frameworks/conclusion/
Is It The Fall Of Angular?
0
500,000
1,000,000
1,500,000
Dec 2015
Dec 2016
Dec 2017
Nov 2018
THANK YOU!
Source: https://2018.stateofjs.com/front-end-frameworks/conclusion/
Is It The Fall Of Angular?
Definitely Not!
SFEIR.com
Head Of Open Source
WΛSSIM CHΞGHΛM
Other Contributions...
Klingon
(author)
xLayers.app
(author)
Angular Console
Core Team Member
Compodoc
(co-author)
?????????
Universal
(former member)
Angular Core Team 💕
I'm joining the
As a contributor
GCP
Actions On Google
Angular
Core Values
@ManekiNekko
Apps that users love to use
Apps that developers love to build
Community where everyone feels welcome
Building a better Developer Experience
Angular 6—7—8
@ManekiNekko
Schematics:
Extend Angular CLI
@ManekiNekko
@angular/cli
Scaffold..........
Generate..........
...........Build
...........Repeat
@ManekiNekko
Schematics: Custom CLI template for your project
Defaults
Extend
Replace
@ManekiNekko
ng update <package> (v6+)
Updating to Angular N+1...
@ManekiNekko
ng add <package> (v6+)
ng add @angular/pwa
ng add @ng-bootstrap/schematics
ng add @angular/elements
ng add @clr/angular
ng add @angular/material
ng add ngx-bootstrap
Add new dependencies in one single command!!
@ManekiNekko
@stephenfluin
Angular Schematics are Open
You can Build Your Own!!
Create your own Schematic
@ManekiNekko
Et Voila!!
@ManekiNekko
@angular/cli v7
Interactive prompts in schematics!
TypeScript v3
Node.js v10
Build Profiling
Stable phase
@ManekiNekko
@angular/cli v7.x
Opt-in Bazel support
@ManekiNekko
@angular/cli v7.x
Upgrade existing project
@ManekiNekko
Tutorial on blog.angular.io
angular.io/cli
Bazel:
Build it harder
Make it lighter
Do it faster
Makes us stronger
@ManekiNekko
Benefits of Bazel
SPEED
SCALE
POLYGLOT
Fully incremental, Local & distributed caching and parallel execution
Multi or Monorepo, Any size codebase, and Any size group
TypeScript, Go, Java, SASS..., Windows, MacOS, and Linux
@ManekiNekko
bazel build //all_the_things
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 Bazel Rules
ts_web_test_suite, ts_devserver, rollup_bundle...
@ManekiNekko
Real "Entreprise-y" Application
built with
@ManekiNekko
Soon in the Angular CLI (#repo)
BUILD.bazel
angular.json
@ManekiNekko
Angular/Bazel Roadmap
Packaging for Angular libraries
Code-Splitting — Lazy Loaded Modules
Remote Build Caching (internal)
Remote Build Execution (internal)
✓
✓
@ManekiNekko
✓
Integration with the CLI (optional)
Read more...
@ManekiNekko
Component Dev. Kit:
UI Components Building Blocks
@ManekiNekko
Material Design 2018 Refresh
CDK Tutorial on blog.angular.io
Angular Elements:
Angular as Custom Elements
@ManekiNekko
HTML Templates
HTML Imports
Shadow DOM
Custom Elements
Part of the Web Components specifications
@ManekiNekko
Angular Elements: Standards-Based CE
Angular
Component
Custom
Element
➠
@ManekiNekko
Can you spot the Angular Element? *
* You can't
Angular
Component
Custom
Element
Angular Elements: Self Bootstrapping
@ManekiNekko
Registering Components as Custom Elements
@ManekiNekko
Use in angular.io
Stable Release
Works Everywhere
Available Now
Status & Roadmap
✓
✓
✓
✓
@ManekiNekko
Ivy:
Angular's new Renderer
@ManekiNekko
Goals & Benefits
Smaller Size
Simpler Stack Traces
Faster Compilation
Non-Breaking Changes!!!!!!
@ManekiNekko
import {
Component
} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{ title }}</h1>
`
})
export class AppComponent {
title = 'ivy';
}import * as tslib_1 from "tslib";
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
var AppComponent = /** @class */ (function () {
function AppComponent() {
this.title = 'ivy';
}
AppComponent.ngComponentDef = i0.ɵdefineComponent({
type: AppComponent,
selectors: [["app-root"]],
factory: function AppComponent_Factory(t) {
return new (t || AppComponent)();
},
consts: 2,
vars: 1,
template: function AppComponent_Template(rf, ctx) {
if (rf & 1) {
i0.ɵelementStart(0, "h1");
i0.ɵtext(1);
i0.ɵelementEnd();
} if (rf & 2) {
i0.ɵtextBinding(1, i0.ɵinterpolation1("", ctx.title, ""));
}
}, encapsulation: 2
});
AppComponent = tslib_1.__decorate([
Component({
selector: 'app-root',
template: "\n\t<h1>{{ title }}</h1> \n "
})
], AppComponent);
return AppComponent;
}());
export { AppComponent };Smaller Size: New Instruction Set
@ManekiNekko
Smaller Size: Tree Shakeable Features
Template Syntax
Dependency Injection
Content Projection
Structural Directives
Lifecycle Hooks
Pipes
Queries
Listeners
@ManekiNekko
36kb
7.3kb
2.7kb
Ivy minified
Ivy compressed
Today (compressed – no zone.js)
10kb
Initial target
Smaller Size 🎉
Faster Compilation
INCREMENTALITY
thanks to
LOCALITY
@synalx
@ManekiNekko
Non-Breaking Changes
+600 apps
@ManekiNekko
Roadmap
IVy Runtime (CD & rendering)
IVy Template Compiler (HTML to code)
Internal Validation (by Google teams)
Expected to be available in...
When it is ready!
✓
✓
@ManekiNekko
Faster Builds with Bazel
CLI extensions with Schematics
UX Components with CDK
Angular Components as CE
Faster Compiler
@ManekiNekko
Angular Future
Smaller,
Angular Future
Smaller,
Faster,
Faster,
Easier
Easier
+ +
Here is an initiative...
@manekinekko
slides.com/wassimchegham
Angular, what's coming next? (ng-be)
By Wassim Chegham
Angular, what's coming next? (ng-be)
2019 is an existing year for the Angular community. These slides cover the roadmap of some of the upcoming features. We talk about the new build orchestrator - Bazel, the Material CDK, the new rendering engine - IVy - and many other cool features. We will also see how it would be possible to make Angular run with other front-end technologies. Get ready.
