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

Angular v7

Angular Future

Smaller, Faster, Easier

Angular Future

Smaller, Faster, Easier

 @ManekiNekko

slides.com/wassimchegham

Angular, what's coming next? (DevFest Nantes)

By Wassim Chegham

Angular, what's coming next? (DevFest Nantes)

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

  • 5,337