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

Angular, React, Vue and Co. peacefully united thanks to Web Components and Micro Apps @AngularVienna, Jan 2019

Angular, React, Vue and Co. peacefully united thanks to Web Components and Micro Apps @AngularVienna, Jan 2019

Manfred Steyer

January 18, 2019
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

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 ▪ 2 Manfred Steyer Public: Vienna, Feb 2019 Discount Code: ngVienna (15%) In-House: everywhere http://www.softwarearchitekt.at/workshops
  3. @ManfredSteyer ✓ Commodore 64 ✓ 1982 ✓ ~ 1 MHz

    ✓ 64 KB RAM ✓ Disks with 170 KB
  4. @ManfredSteyer API class CustomerSelector extends HTMLElement { constructor() { super();

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

    this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<div>[…]</div>'; } […] } customElements.define('customer-selector', CustomerSelector);
  6. @ManfredSteyer ✓ Simple  Loosing State  Load a new

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

    Shell ▪ iframes ▪ Bootstrapping several SPAs
  8. @ManfredSteyer µService µApp3 µApp2 µApp1 Shell Web Components for Macro-Architecture

    Shared Widget Shared Widget Shared Widget Web Components for shared Widgets
  9. @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
  10. @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
  11. @ManfredSteyer Contact and Downloads [mail] [email protected] [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer

    d Slides & Examples Vienna, Feb 2019 + In-House Discount Code: ngVienna (15%) http://www.softwarearchitekt.at/workshops