Micro-frontends Architecture @lucamezzalira 1
Ciao :) Luca Mezzalira VP of Architecture at DAZN Google Developer Expert London Javascript Community Manager 2
Agenda 1. From monolith to micro… 2. What is a Micro-frontend? 3. Technical implementations 3
DISCLAIMER This presentation could mine many of your believes on software development , please be open minded and think at scale 4
1. From monolith to micro… EVERYTHING! Moving towards the micro-world! 5
Scaling our applications DB DB DB DB Microservice Microservice Monolith Microservice API Gateway SPA ??? SPA 6
Impact within our teams DB Frontend uses the same ▧ DB codebase for all the DB teams Microservice Microservice Microservice Communication ▧ API overhead for managing Gateway different part of the UI SPA Infrastructure, ▧ Microservices and DBs almost autonomous 7
Scaling our applications with micro-frontends DB DB DB Microservice Microservice Microservice API Gateway SPA 8
Scaling our applications with micro-frontends DB DB DB Microservice Microservice Microservice API API Gateway Gateway Microfrontend Microfrontend Microfrontend On the edge, Server side * Or Client side Routing 9
Impact within our teams End to end autonomy ▧ DB within a business domain DB Microservice Freedom and ▧ Microservice responsibility API Gateway Innovation without ▧ affecting the entire application Microfrontend 10
Impact within our organization Business + = Domain Cross-functional Product team team 11
2. What is a Micro-frontend? Let’s connect the dots... 12
From Domain Driven Design “ (DDD) Micro-frontends are the technical representation of a business subdomain, they allow independent implementations with same or different technology choices , finally they avoid sharing logic with other subdomains and they are own by a single team 13
Domain and Subdomains (DDD) 14
Domain and Subdomains The domain is the problem to be addressed with a software effort. A domain can be decomposed into subdomains which typically reflect some organizational structure. A common example of a sub-domain is Product Catalog 15
Subdomains There are 3 different type of subdomains: Core Generic subdomain subdomain Supporting subdomain https://bit.ly/2Au5Lio 16
Place your screenshot here Share nothing… and I mean NOTHING Avoid to share components or code across different bounded contexts, abstraction could make our code more complex to maintain in the long run, the communication overhead could become a bottleneck for our organizations 17
3. Technical implementation The journey of a thousand miles begins with one step 18
Let’s review some potential approaches Server-side Iframes Components composition Opentable developers An iframes composition is the choice made by experience team created Zalando was one of the Open Components, an Spotify with an event bus pioneers on microfrontends open source project for coordinating the with Mosaic9 composed by a registry of events across different (www.mosaic9.org) in iframes. components where particular we need to frontend and backend highlight Tailor.js, an open The desktop application logics are wrapped inside source system for mixes Web technologies small, self-contained units assembling the components with C++ codebase for the usable inside any view of on-demand on a backend low-level operations their website layer written in Go. OpenComponent is At the end of 2018 Zalando providing tools for quickly moves to a server-side create new components include system called like a CLI, more info: “Interface framework” opencomponents.github.io 19
DAZN implementation Discovery and Landing Pages My Account Playback Customers Authentication Support Bootstrap Bootstrap is responsible for: . application startup . I/O operations . routing between micro-frontends . sharing configurations across multiple micro-frontends 20
DAZN implementation Each Micro-frontend represents a ▧ Microfrontend subdomain matching the business structure It’s technology/framework agnostic ▧ A Micro-frontend is AUTONOMOUS ▧ Inside a Micro-frontend the team can ▧ share components, code, styles or any other asset Independent building systems ▧ 1 Micro-frontend loaded per time ▧ 21
Micro-frontend structure </> {...} {...} .div index.html app.js vendor.js style.css 22
How bootstrap works Bootstrap loaded as first ▧ element and always <html> available <head> <script src=”./bootstrap.js” /> </head> Tiny JS layer responsible ▧ <body> to load micro-frontends ... </body> </html> Exposes APIs for ▧ different micro-frontends 23
How bootstrap works <html> <head> <script src=”./bootstrap.js” /> <style type=”text/css”>...</style> </> </head> <body> <div> … </div> {...} <script src=”./catalogue.js” /> <script src=”./cat-vendor.js” /> </body> …. </html> 24
How bootstrap works DAZN object exposes ▧ Window.DAZN = { methods and properties Lifecycle: { for all the micro-frontends OnLoad: function(){...} OnunLoad: function(){...} }, Each micro-frontend has ▧ Localstorage: {...}, lifecycle callbacks available ... } This object abstracts the ▧ platform exposing common APIs 25
Components Components available on NPM ▧ private repos {...} Components need to work with ▧ any framework They expose a contract for the ▧ micro-frontend to interact with Components are own by specific ▧ teams They can be shared within same ▧ team 26
Deployment Based on some scenarios ▧ I can redirect the user to a 2.0 1.0 version or another Don’t need to do a big ▧ bang deployment cloudfront Canary releases or Blue ▧ Green deployment on https://bit.ly/2Afy44t Frontend! 27
5 teams Onboarded on the same projects in 3 weeks Over 100 developers Working on the same project 100% Innovation, freedom and responsibility for each team!!! 28
“ The main challenges with scaling frontend applications are scaling the teams, reducing the communication overhead and innovate! 29
Microfrontends frameworks Single-SPA FrintJS single-spa.js.org frint.js.org 30
Single SPA Each SPA reacts to ▧ lifecycle methods (mount/unmount and appA.js appB.js bootstrap) Framework agnostic, ▧ helpers available for single-spa major frameworks Single-spa-config with ▧ method for registering different SPAs 31
Frint.js frint.js.org 32
Frint.js React focused ▧ Very very opinionated ▧ Component-based architecture ▧ Reactive framework with Rx.JS ▧ Lazy loading of modules inside the Root app ▧ Provides a set of libraries to use in conjunction with ▧ the core library (routing or state management for instance) Routing is happening at URL level ▧ 33
DDD resources Decompose by subdomain https://bit.ly/2DUTQ1v Subdomains and bounded context in DDD https://bit.ly/1BPZfIW 34
Learning, testing and sharing . Micro-frontends FREE report for O’Reilly (~80 pages) . 28th February 3 hours online workshop on Safari Books Online: bit.ly/2BjfhFw #OReillySACon 35
Rate today ’s session Session page on oreillysacon.com/ny O’Reilly Events App
#OReillySACon Thank YOU You can find me at: @lucamezzalira luca.mezzalira@dazn.com 37
Recommend
More recommend
