Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advancing into new areas with Angular Elements & Ivy

Advancing into new areas with Angular Elements & Ivy

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

February 25, 2019
Tweet

Transcript

  1. @ManfredSteyer Advancing into new areas with Angular Elements & Ivy

    Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. @ManfredSteyer

  3. @ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]

  4. @ManfredSteyer

  5. @ManfredSteyer Angular Elements

  6. @ManfredSteyer Web Components

  7. @ManfredSteyer Possibilities Component Libraries Enriching existing Apps CMS- Integration Dynamic

    Loading
  8. @ManfredSteyer Contents 1) Web Components 2) Angular Elements 3) Ivy

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

    Trainings and Consultancy • Google Developer Expert (GDE) • External Angular Team Member Page ▪ 9 Manfred Steyer Public: Frankfurt, Stuttgart, Vienna In-House: everywhere http://softwarearchitekt.at/workshops
  10. @ManfredSteyer 1) Web Components

  11. @ManfredSteyer Framework independent Components

  12. @ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

  13. @ManfredSteyer Usage <script src="my-bundle.js"></script> <date-picker min="0" max="100"></date-picker>

  14. @ManfredSteyer DEMO 1]

  15. @ManfredSteyer All this can be polyfilled down to IE11 (more

    or less)
  16. @ManfredSteyer Polyfill

  17. @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)
  18. @ManfredSteyer 2) Angular Elements

  19. @ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements

  20. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]

    }) export class DateModule { }
  21. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]

    }) export class DateModule { }
  22. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]

    }) export class DateModule { constructor(private injector: Injector) { } }
  23. @ManfredSteyer Angular Elements @NgModule({ imports: [BrowserModule], declarations: [DateComponent], entryComponents: [DateComponent]

    }) export class DateModule { constructor(private injector: Injector) { const DateElement = createCustomElement( DateComponent, { injector: this.injector }); customElements.define('date-picker', DateElement); } }
  24. @ManfredSteyer DEMO 2]

  25. @ManfredSteyer Bundle Custom Element 1 Libraries: Angular, RxJS, …

  26. @ManfredSteyer 3) Ivy (Angular 8)

  27. @ManfredSteyer Angular Compiler HTML Template JavaScript Angular Compiler

  28. @BASTAcon & @ManfredSteyer Ivy New Compiler/ View Engine More treeshakable

    Code No Breaking Changes Public with Angular 8
  29. @BASTAcon & @ManfredSteyer [Miško Hevery, ngconf 2018 Keynote]

  30. @BASTAcon & @ManfredSteyer

  31. @ManfredSteyer Angular Elements + Ivy + Tree Shaking* Custom Element

    1 „Runtime“ * UI-centric code
  32. @ManfredSteyer DEMO 3]

  33. @ManfredSteyer

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

    @angular/common  Libs like @angular/forms or @angular/router
  35. @ManfredSteyer Roadmap (details can change) • Ivy behind a flag

    • Try it out! Angular 8 (Spring 2019) • Ivy by default • No breaking changes Angular 9 (Fall 2019)
  36. @ManfredSteyer More on SOFTWAREarchitekt.at

  37. @ManfredSteyer Summary Angular: full fledged SPAs Angular Elements: Lightweight Scenarios

    Widgets CMS Integration Enriching Existing Applications Ivy: Better Treeshakability
  38. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d http://softwarearchitekt.at/workshops Slides & Examples