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.

  • 5,016