1. podcasts
  2. ›
  3. Creating Macro Benefits from Micro Frontends
Alex Gogan
Alex Gogan
Alex Patterson
Alex Patterson
Brittney Postma
Brittney Postma

Creating Macro Benefits from Micro Frontends

Posted: 6/9/2021

Questions

Alex’s Slides

  1. What is a Micro Frontend?

    • architecture & design pattern “An architectural style where independently deliverable frontend applications are composed into a greater whole” - Martin Fowler Missing presentation layer of micro services
    • independent
    • small in scope
    • complete
    • designed to work along each other
    • kinda like power rangers
    • mindset
      • often in the shadow of technical topics focused on intricate details of implementation
      • squads/teams/pods can focus on a value add for their customers/users e.g. team Search can focus entirely on “Finding the right product as fast as possible”
      • enables cross functional collaboration (diverse and inclusive teams can excel)
      • reduces friction between backend/frontend/design/product/ux/analytics/qa

  2. Can we talk about Basecamp on how you are using that for project organization?

  • took a lot of inspiration on ShapeUp for our internal process which we name sherpUp
  • we run a series of projects for 6 weeks, each project can take 2-6 weeks each with at least 2 team members
  • each team is, depending on the topic cross-functional and at least a designer + developer
  • tackle often e2e, if a new feature requires a change in our data model/api/frontend the team will take care of everything
  • teams are independent and enabled
  1. Do micro frontends speed up development time?
  • Yes
  • advocate for incremental development through frequent deployments (~ 10 deployments per week) and close collaboration with partners
  • feature flagging
  • remote configuration
  • keep our tech stack and tooling consistent across all frontends
  1. Can you still utilize a design system?
  • Yes, it becomes easier if everything is in a mono repo
  • currently in the process of migrating the various frontends we have into a monorepo using the nx workspace
  • Adapting Atomic Design (think in atoms, molecules and organisms)
  • Organisms often remain as part of individual apps but adhere to the design system
  • shared CSS classes + variables + mixins help quite a lot
  1. How does a typical architecture look for you?
  • we provide a Javascript SDK that acts as an application shell and turns any website into a host
  • SDK or shell manages and maintains registered embedded elements (what we call micro frontends) that will be appended to the host DOM via iFrames
  • inter-application communication is created through a message bus via post messages
  • hosts are typically not in our control and our embedded elements need to be very flexible and adaptable to various environments e.g. devices/platforms and resolutions but also how much you can interact with each
  1. How does security play into Micro Frontends?
  • we embrace embeddability through iFrames which provide a strict isolation especially in sandbox mode
  • important to limit functionality and content security policies
  • when using post messages to communicate between iFrames, checking for origin/destination and validating payloads is necessary
  • security teams might bring up concerns around click-jacking and end users not being able to distinguish or understand which part of the experience is part the host and which is ours ⇒ we visually indicate through “powered by sherpa°” and logo placements to provide clarity, nothing technical but very relevant
  1. Showtime
  • I’d be able to show our whitelabel solution that consists of 3 independent applications with two embedded elements (micro frontends)
  • do a live code example using our SDK which might be interesting to see how simple it can be

Micro frontend resources https://github.com/billyjov/microfrontend-resources