Are you ready for Angular v8?And Beyond...
DevFest Nantes, October 18, 2018
Wassim Chegham aka. @ManekiNekko
SFEIR
Head Of Open Source Program Office at SFEIR
Bazel
Schematics
Components Dev. Kit
Observables
Angular Elements
Angular Ivy
What's coming next in the Angular ecosystem?
SFEIR
Wassim Chegham aka. @ManekiNekko
SFEIR
Head Of Open Source Program Office at SFEIR
DevFest Nantes, October 18, 2018
Exciting Things In
🎉🎊✨
The Angular Community!
GDE & Advocate for the Angular core team
Node.js Foundation Member
Do open source at manekinekko
SFEIR
Head Of Open Source Program Office
GDE for the Google Assistant team
GDE for the GCP teams
Tweet at @manekinekko
Blog at @wassimchegham
Wassim Chegham
@ManekiNekko
Compodoc Core Team
Angular Console Core Team
#HACKTOBERFEST
Let's chat #IRL
@manekinekko
check me out at
Built with latest Angular and Angular CLI
PWA (cacheable & installable — only)
Full Material Design components
Search experience (with Algolia)
Search Filters
Search Facets
Search Sorting
autocomplete with hot words highlighting
Deep Linking URL (bookmark)
Infinite scrolling pagination
Voice search (via DialogFlow)
Serverless arch. with Firebase Cloud Functions
Deployed on Firebase Hosting
BLAZING FAST
HAVE YOU EVER WANTED AN APP THAT'S
#HACKTOBERFEST
Angular 6 & 7
Building a better developer experience
@ManekiNekko
Bazel:
Build like Google
@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
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...
Angular Bazel Rules
ts_web_test_suite, ts_devserver, rollup_bundle...
Real "Entreprise-y" Application
built with
@ManekiNekko
Soon in the Angular CLI
BUILD.bazel
angular.json
Angular/Bazel Roadmap
Packaging for Angular libraries
Code-Splitting — Lazy Loaded Modules ✓
Integration with the CLI
Remote Build Execution (internal) ✓
Remote Build Caching (internal)
Read more...
@ManekiNekko
(BONUS)
CI/CD with Google Cloud Builds and Kubernetes
Schematics:
Extend Angular CLI
@ManekiNekko
@angular/cli
Scaffold..........
Generate..........
...........Build
...........Repeat
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
Add new dependencies in one single command!!
@angular/cli@7.0.0
Interactive prompts in schematics!
Angular v7 support 👀
TypeScript v3
Node.js v10
Angular Schematics are Open
You can Build Your Own!!
Create your own Schematic
@ManekiNekko
@ManekiNekko
Voila!!
Tutorial on blog.angular.io
Component Dev. Kit:
UI Components Building Blocks
@ManekiNekko
Virtual Scrolling
Tutorial on blog.angular.io
Observables as a Standard: Streams everywhere
@ManekiNekko
We are all heavy 'Observable' developers
Angular
RxJS
NgRx
@ManekiNekko
Unify across libraries
Benefits of Standardisation
Ship less code to the browser
Fewer polyfills to maintain
Useful Out Of The Box
map()
filter()
reduce()@ManekiNekko
Process DOM events in a standard way
document
.querySelector("#img")
.on("load")
.subscribe(e => { ... })@ManekiNekko
Star and Watch the issue (#544)
Reach out to your dev community
Help make Observables a Standard in the DOM
@ManekiNekko
Angular Elements:
Angular as Custom Elements
@ManekiNekko
HTML Templates
HTML Imports
Shadow DOM
Custom Elements
Part of the Web Components specifications
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
Ivy:
Angular's new Renderer
@ManekiNekko
Goals
Smaller Size
Simpler Debugging
Faster Compilation
Non-Breaking Changes!!!!!!
Smaller Size
36kb
7.3kb
2.7kb
Ivy minified
Ivy compressed
Today (compressed)
(no zone.js)
10kb
Initial target
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>
app, {{title}}
</h1>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'works!';
}
import * as core from '@angular/core';
export class AppComponent {
static ngComponentDef = core.ɵdefineComponent({
type: AppComponent,
tag: 'app-root',
template: template: (rf: core.ɵRenderFlags, ctx: ManualComponent) => {
if (rf & 1) {
core.ɵE(0, 'h1');
core.ɵT(1, 'app, ');
core.ɵT(2);
core.ɵe();
}
if (rf & 2) {
core.ɵt(2, ctx.title);
}
},
factory: () => new AppComponent()
})
}
Smaller Size
Non-Breaking Changes
+600
Roadmap
Hello World <5kB ✓
IVy Runtine ✓
IVy Template Compiler ✓
Internal Validation (by Google teams)
Public Release
Expected to be enabled in v8
Faster Builds with Bazel
Extend CLI with Schematics
UX Components with CDK
Observables as a Standard
Angular Components as CE
Faster Compiler
Elements Slot Support
Material Design 2018 Visual Refresh
@angular/labs
@angular/fire
CLI Reference (next.angular.io/cli)
ONE MORE THING...
ONE MORE THING...
Angular v7
Announced Today*
Angular v7
Announced Today*
* Pacific Time