Adopting a Micro-frontends architecture

luca mezzalira
Apr 8 · 8 min read
DAZN application loading flow
Spotify’s micro-frontends approach

The “DAZN way”

As I mentioned at the beginning of this post, there is another implementation to discuss: the approach taken in DAZN.
DAZN is an OTT service available in several countries that streams live and on-demand contents. Our application is available not only on web and mobile but also on smart TVs, set-top boxes and console, and that’s important to highlight because we often face unique challenges and we need to think out-of-the-box for solving them.

The architecture

In our case, we decided to split the application into multiple subdomains studying upfront how our users were interacting with our web application. For green-field projects, I recommend to deeply understand how your users are going to interact with the application in conjunction with your UX and Product team and follow Domain Driven Design for defining the subdomains and their associated bounded-context.
For the DAZN application, almost every subdomain technically translates into a Single Page Application, but there are some exceptions, for instance, the video player is a component due to the broad scope of that subdomain, then those components are imported inside a micro-frontend as any other library.
Micro-frontends are loaded and orchestrated by the bootstrap, a simple vanilla javascript application embedded in the main HTML page that loads different micro-frontends based on deep-link requests, user status or any request coming from the loaded micro-frontend.

Bootstrap is always available during the application lifecycle
  1. bootstrap is served
  2. bootstrap initialize the application retrieving some configuration from the APIs layer
  3. based on the initial state and the user request (deep-link or default URL) load the correct micro-frontend
  4. the user enjoys our web application based on micro-frontends 🥳!

DAZN Engineering

Revolutionising the sport industry

luca mezzalira

Written by

VP of Architecture at DAZN, Google Developer Expert and London JavaScript Community Manager, Author of Front-End Reactive Architectures: https://goo.gl/ywAmsx

DAZN Engineering

Revolutionising the sport industry