1. History
    1. 2011: Microservices
    2. 2016 - Thought Works added to the technology radar
    3. Nov 2017: Thought Works recommended Single-Spa for Micro-frontends implementation
    4. 2019: Martin Fowler wrote his article about Micro-frontends and promoted Micro-frontends architecture in his article “Micro Frontends.”
    5. Oct 2020: By the end of 2020, Zack Jackson released his masterpiece “Module Federation” as a plugin in Webpack 5
    6. Apr 2021: Thought-works started to recommend Module Federation for Micro-frontends implementations
  2. Atomic Design
    1. Atoms
    2. Molecules
    3. Organisms
    4. Templates
    5. Pages
  3. Benefits
    1. Independent Artifacts
    2. Autonomous teams
    3. Flexible technology choices
    4. Scalable development
    5. Easier maintenance
  4. Challenges
    1. Parent/child integration
    2. Operational overhead
    3. Consistent user experience
  5. Micro-Frontends Communication
    1. User interface communication
      1. Parent to fragment
      2. Fragment to parent
      3. Fragment to fragment
      4. Publish/Subscribe with the Broadcast Channel API
    2. Sharing state
      1. Web Workers
      2. Props and callbacks
      3. Custom Events
      4. Pub Sub library(windowed-observable)
      5. Custom implementation
  6. Composition of Micro-frontends
    1. Client-side composition
      1. Fragments
      2. Libraries
        1. single-spa/single-spa
        2. frintjs/frint
        3. smapiot/piral
    2. Edge-side composition
      1. Lambda@Edge
      2. Rendering Example
        1. Next.js using Lambda@Edge and Serverless Framework
        2. Cloudflare Workers using a framework called Flareact
      3. AWS Lambda + CloudFront
    3. Server-side composition
      1. Layout Server
      2. Fragments Server
      3. Fragment Gateway
      4. Libraries
        1. Ara Framework
        2. OpenComponents
        3. Piral
        4. Tailor
    4. Build Time Composition
      1. Shared libraries
      2. Static Site Generators
      3. Bit
  7. Defining Micro-Frontends
    1. Horizontal split
    2. Vertical split
  8. Identifying micro-frontends in our applications
    1. Core Subdomains
    2. Supporting Subdomains
    3. Generic Subdomains