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

Sustainable Client Architectures with Micro Apps

Sustainable Client Architectures with Micro Apps

Avatar for Manfred Steyer

Manfred Steyer

December 03, 2018
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitect.io • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 4 Manfred Steyer Public and In-House http://softwarearchitect.io/workshops
  2. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB
  3. @ManfredSteyer UI Composition w/ Hyperlinks µApp SPA µApp SPA µApp

    SPA <a href="…>…</a> <a href="…>…</a>
  4. @ManfredSteyer ✓ Simple  Loosing State  Load a new

    Application  Consistent Look and Feel
  5. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell ▪ iframes ▪ Bootstrapping several SPAs ▪ Consider Lazy Loading!
  6. @ManfredSteyer Common Interface for µApps • Shell should not know

    details of µApp and used Frameworks! • µApp provides events • µApp consumes events • Wrap µApp as Web Component?
  7. @ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Shell-Architecture

    Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
  8. @ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag

    const script = document.createElement('script'); script.src = [...]; content.appendChild(script);
  9. @ManfredSteyer Lazy Loading const content = document.getElementById('content'); // Add script-Tag

    const script = document.createElement('script'); script.src = [...]; content.appendChild(script); // Add Element const element: HTMLElement = document.createElement('client-a'); element.addEventListener('message', (event) => [...]); element.setAttribute('appState', [...]); content.appendChild(element);
  10. @ManfredSteyer Bundles Custom Element 1 Custom Element 2 Custom Element

    3 Libraries: Angular, Bootstrap, … Libraries: Angular, Bootstrap, …
  11. @ManfredSteyer Compiling down to JavaScript (more or less) e. g.

    w/ Stencil, Angular Ivy Custom Element 1 Custom Element 2 Custom Element 3
  12. @ManfredSteyer Sharing Libs Custom Element 1 Custom Element 2 Custom

    Element 3 Libraries: Angular, Bootstrap, … UMD Drawbacks: Complexity, no isolation
  13. @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 Monorepo little much yes no yes no Not a good fit for public web sites Wrap as Web Component?
  14. @ManfredSteyer Blog > SOFTWAREarchitect.io • 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
  15. @ManfredSteyer Conclusion Micro App: Decoupling b/w Teams & Projects Best

    Technology for your current project Web Components + Micro App = ❤️ You need to evaluate!