Creating Macro Benefits from Micro Frontends

Creating Macro Benefits from Micro Frontends is a CodingCat.dev podcast episode featuring Alex Gogan alongside Alex Patterson focused on Angular, Design, React. We sit down to chat with Alex Gogan about how Sherpa is leveraging Microfrontends. 1.25 - Creating Macro Benefits from Micro Frontends: https://codingcat.dev/podcast/1-25-micro-frontends 00:00 - Intro
00:20 - Meet Alex Gogan
03:37 - Slide Deck
05:54 - Micro Frontend adoption
07:30 - Team Collaboration with Bi-Modal
08:24 - Microservices
11:00 - Team Structure in Micro Frontend
13:00 - Visual representation of Micro Frontend
16:45 - Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

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-frontends https://basecamp.com/shapeup

Video Chapters & Timestamps

Jump directly to any segment of Creating Macro Benefits from Micro Frontends on YouTube using the timestamped chapters below:

• 00:00: Intro
• 00:00: Meet Alex Gogan
• 00:00: Slide Deck
• 00:00: Micro Frontend adoption
• 00:00: Team Collaboration with Bi-Modal
• 00:00: Microservices
• 00:00: Team Structure in Micro Frontend
• 00:00: Visual representation of Micro Frontend
• 00:00: Benefits and things to keep in mind
• 00:00: Sherpa and Micro Frontend embedded solutions
• 00:00: How Micro Frontend development impacts project time
• 00:00: Design System in Micro Frontend
• 00:00: Web Components (Angular Elements)
• 00:00: State Management
• 00:00: Module Federation
• 00:00: Purrfect Picks
• 00:00: https://readocracy.com
• 00:00: https://ultimatecourses.com/courses/angular
• 00:00: Micro Frontend Resources

Resources, Links & Official Documentation

• Watch on YouTube: Creating Macro Benefits from Micro Frontends Full Video (plus Subscribe to CodingCat.dev)
• :20: https://readocracy.com
• :00:00: https://ultimatecourses.com/courses/angular
• Show Pick: Ultimate Courses (picked by Alex Patterson)
• Show Pick: Readocracy (picked by Alex Gogan)
• Alex Gogan Guest Profile & Episodes on CodingCat.dev
• Alex Gogan on GitHub
• Alex Gogan Official Website
• Angular Developer Guide: Signals, standalone components, and enterprise Angular workflows
• web.dev UI & Design Patterns: Responsive web design, typography, color systems, and UX patterns
• React Official Reference: Hooks, Server Components, and UI state patterns

Related CodingCat.dev Tutorials & Podcast Episodes

• Creating and Using Kendo UI: We have Alyssa Nicoll and Kathryn Grayson from Progress teach us all about KendoUI and how they maintain this frontend library.
• Creating Code in Your Browser with StackBlitz: We sit down with Tomek Sulkowski to talk about how he started as an original engineer for StackBlitz. We also talk about Web Containers and how StackBlitz is le...
• Design Systems with Web Components: How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization.

Frequently Asked Questions (FAQ)

What are the main takeaways from Creating Macro Benefits from Micro Frontends?

We sit down to chat with Alex Gogan about how Sherpa is leveraging Microfrontends. 1.25 - Creating Macro Benefits from Micro Frontends: https://codingcat.dev/podcast/1-25-micro-frontends 00:00 - Intro
00:20 - Meet Alex Gogan
03:37 - Slide Deck
05:54 - Micro Frontend adoption
07:30 - Team Collaboration with Bi-Modal
08:24 - Microservices
11:00 - Team Structure in Micro Frontend
13:00 - Visual representation of Micro Frontend
16:45 - Throughout this podcast, Alex Gogan breaks down real-world implementation details for Angular, Design, React so developers can apply these patterns directly in production.

How do you implement Angular best practices in production?

When adopting Angular and Design in a production stack, start by validating your configuration against the Angular Developer Guide (Signals, standalone components, and enterprise Angular workflows). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

Where can I watch the full Creating Macro Benefits from Micro Frontends walkthrough and find related code resources?

You can watch the complete video session for Creating Macro Benefits from Micro Frontends on the CodingCat.dev YouTube channel. For a deeper dive into Angular, check out our related guide: Creating and Using Kendo UI.