O'Reilly logo
live online training icon Live Online training

Building micro-frontends

Scaling projects and teams in the frontend ecosystem

Luca Mezzalira

We're heading toward a future where applications will be increasingly complex and managed by teams of multiple developers. Micro-frontends allow any project to avoid strong technology constraints. Micro-frontends—the technical representation of a business subdomain (as domain-driven design teaches us)—provide strong boundaries and usually interact as little as possible with other micro-frontends, following the single responsibility principle. They facilitate the communication between teams (colocated or distributed) thanks to an API’s contract between the different parts of an application. With this shift in mindset, you can approach any project focused on high reusability for agencies or team scalability for products.

Join expert Luca Mezzalira for a deep dive into micro-frontends. You'll learn how structuring a frontend application with micro-frontends allows you to define a bounded context for a specific area of your application, potentially use different approaches or technologies inside the same application, atomically deliver your artifacts instead of using a big bang deployment structure around a bounded context, and work with distributed or co-located teams in a more efficient way.

What you'll learn-and how you can apply it

By the end of this live online course, you’ll understand:

  • How to structure a micro-frontend in your web application
  • The technology benefits of using micro-frontends
  • The challenges faced when working with micro-frontends (i.e., solid automation in place or code duplication)
  • The impact of micro-frontends within a team-based structure

And you’ll be able to:

  • Work by contracts between two elements, such as micro-frontends and microservices
  • Define the bounded context of your applications
  • Structure an architecture for embracing micro-frontends

This training course is for you because...

  • You're a software architect who has to develop a web application, and you need to spread the work across multiple teams, including colocated and distributed teams.
  • You're a technical lead on a frontend project, and you need to facilitate the development between teams.
  • You're a developer with similar frontend projects, and you need to customize them for different customers.
  • You're a dev manager working on a large project, and you need to scale and organize your teams in an effective way.
  • You're a CTO leading a product, and you need to structure your organization in a flexible manner without creating many constraints.

Prerequisites

Recommended preparation:

Recommended follow-up:

About your instructor

  • I’m a Chief Architect with 15 years of experience, a Google Developer Expert on Web Technologies and the London Javascript community Manager. I had the chance to work on cutting-edge projects for mobile, desktop, web, TVs, set top boxes and embedded devices. I am currently managing DAZN, a sports video platform based on the cloud with millions of users that are watching live and on-demand contents.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Introduction to micro-frontends (40 minutes)

  • Lecture: The current status of frontend applications; what are microfrontends?; core principles; benefits of working with microfrontends; who is using them?
  • Knowledge checkpoint
  • Q&A

Architectural implementation (40 minutes)

  • Lecture: How to structure an application using micro-frontends; core elements of a micro-frontend application—bootstrap, single-spa, microsites and single-page applications, single page; routing; caching and DSL
  • Knowledge checkpoint
  • Q&A
  • Break (10 minutes)

Automation as a first-class object (30 minutes)

  • Lecture: Testing and static analysis; CI/CD; sequential versus parallel automation execution; DAZN automation pipeline
  • Knowledge checkpoint
  • Q&A

Technical challenges (25 minutes)

  • Lecture: Mindset shift; working by contracts; code reusability; dependency management; SEO
  • Knowledge checkpoint
  • Q&A
  • Break (10 minutes)

Teams organization (25 mins)

  • Lecture: Benefits with colocated teams; benefits with distributed teams; team structure—core teams, features teams
  • Knowledge checkpoint
  • Q&A

Wrap-up and Q&A (20 minutes)

  • Lecture: Core micro-frontend elements recap; bibliography and links to resources; next steps