Original: https://codingcat.dev/podcast/1-25-micro-frontends

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

Links

• microfrontend-resources
• Example of using the app
• https://www.angulararchitects.io/en/
• https://micro-frontends.org/
• https://itnext.io/handling-data-with-web-components-9e7e4a452e6e
• https://micro-frontends.zeef.com/elisabeth.engel?ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc
• https://github.com/rajasegar/awesome-micro-frontendshttps://basecamp.com/shapeup