Angular, what's coming next

Wassim Chegham

@ManekiNekko

NgTalks, Kharkivโ€“Ukraine, 2018

@ManekiNekko

Exciting things in 2018

๐ŸŽ‰๐ŸŽŠโœจ for Angularย โœจ๐ŸŽŠ๐ŸŽ‰

Google Developer Expert

for the Angular team

Core Team (ESM Modules)

Node.js Foundation

Do open source at manekinekko

SFEIR

Head Of Open Source Program Office

for the Google Assistant team

for the GCP team

Google Developer Expert

Google Developer Expert

Tweet at @manekinekko

Blog at @wassimchegham

Wassim Chegham

@ManekiNekko

let's chat IRL

@manekinekko

check me out at

Bazel

Schematics

CDK

Observables

Angular Elements

Ivy

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

Now, built with

@ManekiNekko

Angular/Bazel Roadmap

Packaging for Angular libraries

Code-splitting โ€” Lazy Loaded Modules

Integration with the CLI

Read more...

@ManekiNekko

Schematics:

Extend Angular CLI

@ManekiNekko

Scaffold. Generate. Build. Repeat.

Schematics: Custom CLI template for your project

Defaults

Extend

Replace

@ManekiNekko

ng updateย <package>

ng addย <package>

ng add @angular/pwa
ng add @ng-bootstrap/schematics
ng add @angular/material
ng add @clr/angular
ng add @angular/elements

Add new dependencies in one single command!!

Tutorial on blog.angular.io

Angular Schematics are Open

You can Build Your Own

NOW!!

Component Dev. Kit:

UI Components Building Blocks

@ManekiNekko

Tutorial on blog.angular.io

Observables as a Standard: Streams everywhere

@ManekiNekko

We are all heavy Observables 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

Angular

Component

Custom

Element

โž 

@ManekiNekko

Can you spot the Angular Element? *

<cheese-burger>
  <hamburger-buns ketchup="2ts">
    <lettuce-leaf></lettuce-leaf>
    <pickled-cucumber></pickled-cucumber>
    <chili-pepper></chili-pepper>
    <caramelized-onion></caramelized-onion>
    <bacon-strips cooked="true"></bacon-strips>
    <american-cheese slice="2"></american-cheese>
    <ground-beef pound="1"></ground-beef>
  </hamburger-buns>
</cheese-burger>

* You can't

Angular

Component

Custom

Element

Angular Elements

@ManekiNekko

Registering Components as Custom Elements

registerAsCustomElements([SearchComponent], () =>

 platformBrowserDynamic()
    .bootstrapModule(SearchModule)

);

@ManekiNekko

1. Proof of concept

2. Use in angular.io

3. Stable Release

4. Usable Outside Angular

Status & Roadmap

Ivy:

Angular's new Renderer

@ManekiNekko

Goals

Smaller Size

Simpler Debugging

Faster Compilation

Non-Breaking Changes

Roadmap

1. Hello World <5kBย 

2. API Compatible

3. Smaller bundle size

4. Internal Validation (by Google teams)

5. Public Release

6. Default in v8ย 

ย 

Faster Builds with Bazel

Extend CLI with Schematics

UI Components with CDK

Observables as a Standard

Angular Components as CE

Faster Renderer: Ivy

v6.1: blog.angular.io

ย @ManekiNekkoย 

thanks for listening...

slides.com/wassimchegham

Angular, what's coming next? (ngTalks)

By Wassim Chegham

Angular, what's coming next? (ngTalks)

Angular, what's coming next? (in English)

  • 3,907