Tweet
Tweet

Slide 1

Slide 1 text

@ManfredSteyer Advancing into new areas with Angular Elements & Ivy Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

@ManfredSteyer

Slide 3

Slide 3 text

@ManfredSteyer [Igor Minar, Angular Connect 2018 Keynote]

Slide 4

Slide 4 text

@ManfredSteyer

Slide 5

Slide 5 text

@ManfredSteyer Angular Elements

Slide 6

Slide 6 text

@ManfredSteyer Web Components

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@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

Slide 10

Slide 10 text

@ManfredSteyer 1) Web Components

Slide 11

Slide 11 text

@ManfredSteyer Framework independent Components

Slide 12

Slide 12 text

@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

Slide 13

Slide 13 text

@ManfredSteyer Usage

Slide 14

Slide 14 text

@ManfredSteyer DEMO 1]

Slide 15

Slide 15 text

@ManfredSteyer All this can be polyfilled down to IE11 (more or less)

Slide 16

Slide 16 text

@ManfredSteyer Polyfill

Slide 17

Slide 17 text

@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)

Slide 18

Slide 18 text

@ManfredSteyer 2) Angular Elements

Slide 19

Slide 19 text

@ManfredSteyer Angular Elements Wrap Angular Components Expose Custom Elements

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@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); } }

Slide 24

Slide 24 text

@ManfredSteyer DEMO 2]

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@ManfredSteyer 3) Ivy (Angular 8)

Slide 27

Slide 27 text

@ManfredSteyer Angular Compiler HTML Template JavaScript Angular Compiler

Slide 28

Slide 28 text

@BASTAcon & @ManfredSteyer Ivy New Compiler/ View Engine More treeshakable Code No Breaking Changes Public with Angular 8

Slide 29

Slide 29 text

@BASTAcon & @ManfredSteyer [Miško Hevery, ngconf 2018 Keynote]

Slide 30

Slide 30 text

@BASTAcon & @ManfredSteyer

Slide 31

Slide 31 text

@ManfredSteyer Angular Elements + Ivy + Tree Shaking* Custom Element 1 „Runtime“ * UI-centric code

Slide 32

Slide 32 text

@ManfredSteyer DEMO 3]

Slide 33

Slide 33 text

@ManfredSteyer

Slide 34

Slide 34 text

@ManfredSteyer Where Ivy can help ✓ Widgets based on @angular/core, @angular/common  Libs like @angular/forms or @angular/router

Slide 35

Slide 35 text

@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)

Slide 36

Slide 36 text

@ManfredSteyer More on SOFTWAREarchitekt.at

Slide 37

Slide 37 text

@ManfredSteyer Summary Angular: full fledged SPAs Angular Elements: Lightweight Scenarios Widgets CMS Integration Enriching Existing Applications Ivy: Better Treeshakability

Slide 38

Slide 38 text

@ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer d http://softwarearchitekt.at/workshops Slides & Examples