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

Microfrontend ou Comment Briser son Front en Mille Morceaux

Microfrontend ou Comment Briser son Front en Mille Morceaux

Tout comme son grand frère le Backend il y a peu, le Frontend tend à souffrir de la même maladie, à savoir des frontends monolithiques. Les symptômes sont bien connus aujourd’hui: des nouveaux développements qui héritent de choix passés malheureux et qui doivent s'adapter constamment, une maintenabilité complexe et des coûts de migration élevés voire non envisageables.

Le paradigme Microfrontend peut être la réponse à ces problématiques. L'idée simple derrière ce paradigme est de penser une application web comme une composition de fonctionnalités détenues par des équipes autonomes. Cette présentation va aborder tour à tour les différents éléments nécessaires à la mise en place d’une approche Microfrontend: aussi bien de l'organisation des équipes IT, du développement que du déploiement et de la maintenance.

En particulier, les moyens actuels de rendre réellement le développement frontend indépendant et isolé par le biais, par exemple, de custom element et de web components seront présentés ainsi que les manières de les intégrer dans vos nouvelles applications mais aussi dans votre front legacy...

kawan16

June 20, 2019
Tweet

More Decks by kawan16

Other Decks in Programming

Transcript

  1. 8 Single Page Application aka Love At First Sight SPA

    Frontend Back Microservices A PI G A T E W A Y
  2. 13 Microservices aka The Source of Light Develop Independently Maintenability

    Scalability Run Independently Business Driven Technology Agnostic
  3. “ [...] We're seeing an approach emerge that our teams

    call micro frontends. In this approach, a web application is broken up by its pages and features, with each feature being owned end-to-end by a single team. [...] 14 Thoughtwork Technology Radar - November 2016
  4. “ Microfrontend Une approche pragmatique de découpage du frontend pour

    faire face aux évolutions sauvages du monde du frontend 15 Me - June 2019
  5. 16 Benefits for frontend Technology Agnostic Innovation vs Risk Continuous

    Improvement Architectural Organizational Individual Autonomous Teams Maintainability Deployment Agility Skill Management Communication Micro-goals Up-to-date Skill Project Freshness
  6. 21 Build-time Composition Components inside App Change One, Build All

    Dev Independently Version Management Security Risk Rigid Split
  7. 23 Runtime Composition with Iframe Technology Agnostic Not UX/UI Friendly

    Dev / Run Independently Several View In 1 Page Security Communication Inter-frames CORS Not Mobile Compliant
  8. 25 Runtime Composition with Server Side Rendering Components inside App

    Performance Dev / Run Independently DOM API SEO Shared Resources
  9. Runtime Composition with Javascript Script main.js Main Server Client main.js

    https://mf1.com/bundle.js https://mf2.com/bundle.js bundle.js Microfrontend 1 Server bundle.js Microfrontend 2 Server
  10. Runtime Composition with Proxified Javascript Script main.js Main Server Client

    main.js mf1/bundle.js mf2/bundle.js mf1.bundle.js Microfrontend 1 Server mf2.bundle.js Microfrontend 2 Server Proxy
  11. Runtime Composition with Javascript Module main.mjs Main Server Client main.mjs

    mf1.mjs mf2.mjs mf1.unbundle.mjs Microfrontend 1 Server mf2.unbundle.mjs Microfrontend 2 Server Proxy import(“mf1.mjs”) onclick = ( ) => import(“mf2.mjs”)
  12. Runtime Composition with Javascript Module main.js Main Server Client main.mjs

    ???.mjs mf1.mobile.js Microfrontend 1 Server Proxy / / Dont know yet let futureModuleToLoad ... / / Now we know what to do import(futureModuleToLoad) mf1.beginner.js mf1.pro.js
  13. 30 Runtime Composition with Javascript Components inside App Performance Dev

    / Run Independently Support ( ES Module ) Shared Resources Fine-grained & Strategic Composition
  14. 38 Web Component Technology Agnostic Running Specification Dev / Run

    Independently Isolate Code Browser Support Standard Shared Resource
  15. 41 Event = Indirect Dependency ! Product Feature Checkout Feature

    Orchestrator / Interpreter Same domain Mixed domains Event Foreign Event Local Semantic Event Local Semantic Event
  16. 51 Centralized Library vs Distributed Code Sharing NPM Bits Publish

    Bits Server Share Share Sync Project Dependency
  17. 53 Case 1 - Legacy “Monster” AngularJS App <my-app> Keep

    Going ? Solutions Refactor Everything Later... Yes Incremental Upgrade No No
  18. Case 2 - New Multiple Apps But a bit shy

    <app/> Design level <app-2/> <app-3/> Design System As Microfrontend !