Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Microfrontends with Angular: Your 7-Points-Plan

Microfrontends with Angular: Your 7-Points-Plan

Manfred Steyer

February 25, 2020
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer Contents: 6+1 Steps #1 Composition #2 Routing #3 Compiling

    #4 Loading #5 Communication #6 Sharing +1: Security
  2. @ManfredSteyer About me… Manfred Steyer, ANGULARarchitects.io Angular Trainings and Consultancy

    Frankfurt, Munich, Vienna In-House: everywhere https://ANGULARarchitects.at/workshops Google Developer Expert for Angular Trusted Collaborator in the Angular Team Manfred Steyer
  3. @ManfredSteyer Main Reasons for Microfrontends Decoupling b/w teams Autarkic teams

    Varying technology/ architecture Separate Deployment
  4. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend

    Shell ▪ iframes ▪ Serverside Shell? ▪ Bootstrapping several SPAs
  5. @ManfredSteyer µService Providing a (SPA based) Shell µFrontend µFrontend µFrontend

    Shell ✓ Usability  SPA-Frameworks are not intented for this style  We need our own "Meta-Framework"
  6. @ManfredSteyer Sharing Libs Microfrontend 1 Microfrontend 2 Libraries: Angular, Bootstrap,

    … UMD Drawbacks: Complexity, no isolation ngx-build-plus
  7. @ManfredSteyer Lazy Loading const script = document.createElement('script'); script.src = 'client-a/main.js';

    document.body.appendChild(script); const clientA = document.createElement('client-a'); clientA['visible'] = true; document.body.appendChild(clientA);
  8. @ManfredSteyer Communication via Service Bus in Shell self._serviceBus = new

    Subject<…>(); self._serviceBus.subscribe(…); self._serviceBus.next(myMessage);
  9. @ManfredSteyer Idea First, evaluate whether "Seperate Ways" works Start with

    framework specific components (easy) Share them via npm or a monorepo Make sure you can expose them as Web Components later (e. g. w/ Angular Elements)
  10. @ManfredSteyer Possibilities HTTP-only Cookie • Same origin Token (e. g.

    JWT) • Request in Shell and share via Service Bus or Session Storage • Consider OAuth 2 and OpenId Connect • Avoid Local Storage • Avoid sharing via URL
  11. @ManfredSteyer Contact and Downloads [web] ANGULARarchitects.io [twitter] ManfredSteyer d Slides

    & Examples Frankfurt, Munich, Vienna In-House: everywhere http://softwarearchitekt.at/workshops