Advancing into new areas with Angular Elements & Ivy @EnterJS 2019 in Darmstadt

Advancing into new areas with Angular Elements & Ivy @EnterJS 2019 in Darmstadt

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer

June 26, 2019
Tweet

Transcript

  1. 1.

    @ManfredSteyer Advancing into new areas with Angular Elements & Ivy

    Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. 9.

    @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) • External Angular Team Member Page ▪ 9 Manfred Steyer In-House: everywhere Public: Wien - München - Frankfurt http://softwarearchitekt.at/workshops
  3. 16.

    @ManfredSteyer Selected Polyfills • webcomponents-loader.js • Loads Polyfills on demand

    • Custom Elements • Shadom DOM • Templates • native-shim.js • Needed for browsers that DO support polyfills • When downleveled to ES5 • Alternative: Differential Loading (providing ES5 + ES2015 bundles)
  4. 22.

    @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [MyComponent], entryComponents: [MyComponent]

    }) export class MyModule { constructor(private injector: Injector) { const MyElement = createCustomElement( MyComponent, { injector: this.injector }); customElements.define('my-element', MyElement); } }
  5. 34.

    @ManfredSteyer Roadmap (details can change) • Ivy behind a flag

    - try it out! • Currently no Ivy/Elements-Bridge Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
  6. 37.

    @ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core,

    @angular/common  Libs like @angular/forms or @angular/router
  7. 38.

    @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom

    Element 3 Libraries: Angular, RxJS, … UMD ngx-build-plus Drawbacks: Complexity, no isolation webpack: Externals