Tweet
Tweet

Slide 1

Slide 1 text

@ManfredSteyer Angular, React, Vue and Co. peacefully united thanks to Web Components and Micro Apps Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer

Slide 2

Slide 2 text

@ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz ✓ 64 KB RAM ✓ Disks with 170 KB ✓ Similar to Agat in eastern Europe?

Slide 3

Slide 3 text

@ManfredSteyer Version with two cores ;-) Challenge: Resources!

Slide 4

Slide 4 text

@ManfredSteyer Challenges today: Complexity

Slide 5

Slide 5 text

@ManfredSteyer Coordination b/w teams

Slide 6

Slide 6 text

@ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10 - 20 yrs

Slide 7

Slide 7 text

@ManfredSteyer There are milk products lasting longer than some JavaScript frameworks

Slide 8

Slide 8 text

@ManfredSteyer Contents 1) Web Components 2) Micro Apps 3) DEMO

Slide 9

Slide 9 text

@ManfredSteyer About me… • Manfred Steyer SOFTWAREarchitekt.at • Angular Trainings and Consultancy • Google Developer Expert (GDE) • Trusted Collaborator in the Angular Team Page ▪ 9 Manfred Steyer Public: Vienna, Frankfurt, Stuttgart, Düsseldorf, Munich In-House: Europe http://www.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 Can be dynamically loaded into the browser!

Slide 13

Slide 13 text

@ManfredSteyer Umbrella Term for Several Standards

Slide 14

Slide 14 text

@ManfredSteyer Standards Templates HTML Imports Custom Elements Shadow DOM

Slide 15

Slide 15 text

@ManfredSteyer Can be pollyfilled down to IE11

Slide 16

Slide 16 text

@ManfredSteyer API class CustomerSelector extends HTMLElement { […] }

Slide 17

Slide 17 text

@ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '
[…]
'; } […] }

Slide 18

Slide 18 text

@ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '
[…]
'; } […] } customElements.define('customer-selector', CustomerSelector);

Slide 19

Slide 19 text

@ManfredSteyer API […]

Slide 20

Slide 20 text

@ManfredSteyer Generating Custom Elements Angular Elements Vue.js + Vue CLI Wrap by hand/ Community Solutions

Slide 21

Slide 21 text

@ManfredSteyer 2) Micro Apps

Slide 22

Slide 22 text

@ManfredSteyer Idea System Team A Team B Framework Architecture Maintainability? Hard to change!

Slide 23

Slide 23 text

@ManfredSteyer Idea µService µService µService

Slide 24

Slide 24 text

@ManfredSteyer Idea µApp µApp µApp

Slide 25

Slide 25 text

@ManfredSteyer Folie▪ 28 Pro Contra

Slide 26

Slide 26 text

@ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp SPA

Slide 27

Slide 27 text

@ManfredSteyer

Slide 28

Slide 28 text

@ManfredSteyer ✓ Simple  Loosing State  Load a new Application  Consistent Look and Feel

Slide 29

Slide 29 text

@ManfredSteyer

Slide 30

Slide 30 text

@ManfredSteyer Web Components for Shared Widgets?

Slide 31

Slide 31 text

@ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ Consider Lazy Loading!

Slide 32

Slide 32 text

@ManfredSteyer Common Interface for Shell • Unified API for Shell • Send data down to µApps • Receive events from µApps • Web Components?

Slide 33

Slide 33 text

@ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture Shared Widget Shared Widget Shared Widget Web Components for shared Widgets

Slide 34

Slide 34 text

@ManfredSteyer 3) DEMO

Slide 35

Slide 35 text

@ManfredSteyer Choosing a Solution

Slide 36

Slide 36 text

@ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Bootstrap several SPAs Monolith w/ Libs and Monorepo little much yes no yes no Not a good fit for public web sites Wrap as Web Components?

Slide 37

Slide 37 text

@ManfredSteyer Micro-Architecture npm- Packages Web Components Monorepo Inner Sourcing …

Slide 38

Slide 38 text

@ManfredSteyer Blog > SOFTWAREarchitekt.at • A Software Architect's Approach Towards Using Angular (And SPAs In General) For Microservices Aka Microfrontends • Micro Apps With Web Components Using Angular Elements • Angular Elements: A dynamic Dashboard … • Angular, React, Vue.Js And Co. Peacefully United Thanks To Micro Apps And Web Components

Slide 39

Slide 39 text

@ManfredSteyer Conclusion Web Components: Decoupling from your Framework Micro App: Decoupling b/w Teams & Projects Web Components + Micro App = ❤️ Best Technology for your current project

Slide 40

Slide 40 text

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