> Canonical URL: https://codingcat.dev/podcast/1-25-micro-frontends

# Creating Macro Benefits from Micro Frontends

🎧 Podcast Episode · S1E25June 9, 2021[AI & MCP Agents](/topic/ai)

# Creating Macro Benefits from Micro Frontends

![](https://cdn.sanity.io/images/hfh83o0w/production/ee6b49a7ff8b7966607a7e397a1b0bb91a3b742c-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Alex Gogan](https://cdn.sanity.io/images/hfh83o0w/production/7356c03082ff5c65875a53628155e39365c4d185-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Gogan](/guest/alex-gogan)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/5gkLrF5jX6ny5R1O8GSIBx)[Apple](https://podcasts.apple.com/us/podcast/1-25-creating-macro-benefits-of-micro-frontends/id1491655542?i=1000524796530)[YouTube](https://www.youtube.com/watch?v=rgHttPaek8A)[Pocket Casts](https://pca.st/episode/f64e0c95-3ba9-4dfb-ae1d-492b078c0857)[Castbox](https://castbox.fm/episode/id2508485-id390367352)[Castro](https://castro.fm/episode/cKpIqV)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Creating Macro Benefits from Micro Frontends✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Creating Macro Benefits from Micro Frontends: start with Alex Gogan, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**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**](https://www.youtube.com/watch?v=rgHttPaek8A) or explore the architectural notes, chapters, and official documentation links below.

## Questions

[Alex's Slides](https://docs.google.com/presentation/d/1nUkmecPIQJGohxuyGWUSmQ06MCT6xVPpqWOVs0mC8qE/edit?usp=sharing)

- **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

- **Can we talk about Basecamp on how you are using that for project organization?**

- took a lot of inspiration on [ShapeUp](https://basecamp.com/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

- **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

- **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

- **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

- **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](https://github.com/billyjov/microfrontend-resources)
- [Example of using the app](https://apply.joinsherpa.com/explore/USA)
- [https://www.angulararchitects.io/en/](https://www.angulararchitects.io/en/)
- [https://micro-frontends.org/](https://micro-frontends.org/)
- [https://itnext.io/handling-data-with-web-components-9e7e4a452e6e](https://itnext.io/handling-data-with-web-components-9e7e4a452e6e)
- [https://micro-frontends.zeef.com/elisabeth.engel?ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc](https://micro-frontends.zeef.com/elisabeth.engel?ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc)
- [https://github.com/rajasegar/awesome-micro-frontends](https://github.com/rajasegar/awesome-micro-frontends) [https://basecamp.com/shapeup](https://basecamp.com/shapeup)

## Video Chapters & Timestamps

Jump directly to any segment of [**Creating Macro Benefits from Micro Frontends**](https://www.youtube.com/watch?v=rgHttPaek8A) on YouTube using the timestamped chapters below:

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

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Creating Macro Benefits from Micro Frontends Full Video](https://www.youtube.com/watch?v=rgHttPaek8A) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **:20: ** [https://readocracy.com](https://readocracy.com)
- **:00:00: ** [https://ultimatecourses.com/courses/angular](https://ultimatecourses.com/courses/angular)
- **Show Pick: ** [Ultimate Courses (picked by Alex Patterson)](https://ultimatecourses.com/courses/angular)
- **Show Pick: ** [Readocracy (picked by Alex Gogan)](https://readocracy.com/)
- [**Alex Gogan Guest Profile & Episodes on CodingCat.dev**](/guest/alex-gogan)
- [**Alex Gogan on GitHub**](https://github.com/alx-andru)
- [**Alex Gogan Official Website**](https://alexandrugogan.com)
- [**Angular Developer Guide:**](https://angular.dev/overview) Signals, standalone components, and enterprise Angular workflows
- [**web.dev UI & Design Patterns:**](https://web.dev/learn/design) Responsive web design, typography, color systems, and UX patterns
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Creating and Using Kendo UI**](/podcast/2-24-making-progress-with-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**](/podcast/1-40-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**](/post/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**](https://angular.dev/overview) (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**](https://www.youtube.com/watch?v=rgHttPaek8A) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Angular, check out our related guide: [**Creating and Using Kendo UI**](/podcast/2-24-making-progress-with-kendo-ui).

## ✏️ Episode Summary

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 -

## episode picks.

### 🐾 Alex Gogan

- [Readocracy](https://readocracy.com/)

### 🐾 Alex Patterson

- [Ultimate Courses](https://ultimatecourses.com/courses/angular)

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)