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

Keynote: Angular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps @IJS Munich, Oct 2018

Keynote: Angular, React, Vue and Co. – peacefully united thanks to Web Components and Micro Apps @IJS Munich, Oct 2018

15934fa2aa7b2ce21f091e9b7cffa856?s=128

Manfred Steyer
PRO

October 16, 2018
Tweet

Transcript

  1. @ManfredSteyer Angular, React, Vue and Co. peacefully united thanks to

    Web Components and Micro Apps Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
  2. @ManfredSteyer About me… • Manfred Steyer • SOFTWAREarchitekt.at • Angular

    Trainings and Consultancy • Google Developer Expert (GDE) Page ▪ 3 Manfred Steyer
  3. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB
  4. @ManfredSteyer Version with two cores ;-) Challenge: Resources!

  5. @ManfredSteyer Challenges today: Complexity

  6. @ManfredSteyer Coordination b/w teams

  7. @ManfredSteyer Long Time Maintain- ability Maintain + Extend for 10

    - 20 yrs
  8. @ManfredSteyer There are milk products lasting longer than some JavaScript

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

  10. @ManfredSteyer 1) Web Components

  11. @ManfredSteyer Framework independent Components

  12. @ManfredSteyer Can be dynamically loaded into the browser!

  13. @ManfredSteyer Umbrella Term for several Standards

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

  15. @ManfredSteyer Can be pollyfilled down to IE11

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

  17. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super();

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

    this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] } customElements.define('customer-selector', CustomerSelector);
  19. @ManfredSteyer API <script src="customer-selector.min.js"></script> […] <customer-selector></customer-selector>

  20. @ManfredSteyer Generating Custom Elements Angular Elements Vue.js + Vue CLI

    Wrap by hand/ Community Solutions
  21. @ManfredSteyer 2) Micro Apps

  22. @ManfredSteyer Idea System Team A Team B Framework Architecture Maintainability?

    Hard to change!
  23. @ManfredSteyer Idea µService µService µService

  24. @ManfredSteyer Idea µApp µApp µApp

  25. @ManfredSteyer Folie▪ 29 Pro Contra

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

    SPA
  27. @ManfredSteyer ✓ Simple  Loosing State  Load a new

    Application  Consistent Look and Feel
  28. @ManfredSteyer

  29. @ManfredSteyer Web Components for Shared Widgets?

  30. @ManfredSteyer µService Providing a (SPA based) Shell µApp µApp µApp

    Shell ▪ iframes ▪ Bootstrapping several SPAs
  31. @ManfredSteyer Wrap µApps into Web Components • Unified API for

    Shell • Nesting
  32. @ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture

    Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
  33. @ManfredSteyer 3) DEMO

  34. @ManfredSteyer Choosing a Solution

  35. @ManfredSteyer Some General Advice Shared state, navigation b/w apps Hyperlinks

    Legacy Apps or *very very* strong isolation? iframes Separate Deployment/ mix Technologies? Web Components Monolith w/ Libs and Monorepo little much yes no yes no Not a good fit for public web sites
  36. @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
  37. @ManfredSteyer Contact and Downloads [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Slides & Examples