\n
Users expect software to be approachable and familiar on any device they use. Modern user experiences are cross platform spanning the web, apps, and operating systems putting users in the center.<\/p>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/08\/center.png\")
<\/p>\n
Naturally, this increases the system complexity challenging the traditional monolithic software architecture and horizontal engineering organizational structure.\nA proven engineering approach of tackling complexity is decomposition into more granular and comprehensible parts. This has proven successful in breaking down large backend services into many smaller single purpose-built micro services. As we extend this pattern up the stack to frontend, we enter the world of Micro frontends. In their simplest form, they consist of UX which enables user interaction and a backend service that supports the UX controls. Canonical example is a shopping cart found on the web, Windows Store and Xbox apps. Another familiar example is a login screen in Windows Settings, Outlook iOS, and others. Despite their diverse functionality all Micro frontends are characterized by common traits:<\/p>\n
- \n
- UX coherence – look and feel is familiar and consistent across UX canvases (web, apps, operating systems)<\/li>\n
- Deployed independently of the host UX canvas<\/li>\n
- Service driven or service delivered<\/li>\n
- Owned by a single engineering + business team across UX canvases<\/li>\n<\/ul>\n
Micro frontends are appealing architecture pattern because of the benefits they provide to users, engineering, and business organizations.<\/p>\n
\n\n
\n \nUser<\/th>\n Engineering<\/th>\n Business<\/th>\n<\/tr>\n<\/thead>\n \n Familiar user experience<\/td>\n Engineering agility<\/td>\n Experimentation across UX canvases<\/td>\n<\/tr>\n \n Cohesive look and feel across UX canvases<\/td>\n Controlled feature rollout across UX canvases<\/td>\n Faster time to market<\/td>\n<\/tr>\n \n Higher perceived quality<\/td>\n Engineering efficiency through code reuse<\/td>\n Faster response to user feedback<\/td>\n<\/tr>\n \n <\/td>\n Security, compliance, and dependency management<\/td>\n Cost saving<\/td>\n<\/tr>\n \n <\/td>\n Localization, globalization, accessibility<\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Micro frontend architecture<\/h2>\n
In Windows Experiences group we are betting and investing into Micro frontend architecture to scale UX across web, apps , and operating systems. Each Micro frontend provides a specific value to the user. Due to its narrow scope its design is lightweight consisting of four core components:<\/p>\n
- \n
- UX controls<\/li>\n
- Backend for frontend microservice (BFF)<\/li>\n
- Telemetry event collector (TEC)<\/li>\n
- Deployment service<\/li>\n<\/ul>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/08\/arch.png\")
<\/p>\nUX Controls<\/h3>\n
UX controls residing inside UX\/frontend layer pictured above target various platforms and devices. They can be implemented on the same or different tech stacks while maximizing code reuse without compromising user experience. For instance, our Family Safety app written in Kotlin (Android) and Swift (iOS) has a Micro frontend that lets users to invite their family members to join the family. We call it Family Onboarding. The same feature is also available on the web at account.microsoft.com\/family and in Windows Settings. To provide the best native-like user experience we use React Native on mobile apps, but ReactJS on the web and Windows Settings. React Native and ReactJS controls are thin layers with minimal platform specific code. Due their similarity we can decouple non-React platform code into a Shared Core library.<\/p>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/08\/ux-high-level.png\")
<\/p>\nThis hits the sweet spot between engineering efficiency and delightful user experience on each platform. It is through Shared Core the UX layer interacts with external services such as Telemetry event collector, deployment service, and Backend for frontend (BFF) microservice.<\/p>\n
Backend for frontend<\/h3>\n
BFF is specifically designed to serve Family Onboarding UX controls only. It provides many benefits:<\/p>\n
- \n
- Encapsulates business logic that does not have to live in UX controls so it can be shared and updated at the cloud pace.<\/li>\n
- Abstracts dependency API nuances such as authentication, authorization, multiple API versions\/changes, error handling, firewall, caching, throttling, etc.<\/li>\n
- Single consistent API surface UX controls can rely on.<\/li>\n
- Serves static assets text, images, fonts, etc.<\/li>\n
- Encapsulates localization<\/li>\n
- Flight backend changes and provides flights to UX Controls.<\/li>\n<\/ul>\n
![\"Image](\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2020\/08\/bff.png\")
<\/p>\nTelemetry event collector<\/h3>\n
Even though Telemetry Event Collector (TEC) is shared between dependency services and Family Onboarding Micro frontend. BFF and UX Controls alike produce telemetry events for quality of service (QoS) and business intelligence (BI) sending them to centralized TEC. Regardless of the event source, they all contain correlation vectors enabling us to correlate events and build user journeys. This is critical to understanding the Micro frontend quality and informing incident response.<\/p>\n
Deployment service<\/h3>\n
Ability to deploy new bits independently of the host canvas is a major benefit of Micro frontend architecture. Like TEC, the Deployment service can also be shared with other services. Sometimes there may be a need for more than one service depending on the target host tech stack. Family Safety app is going to use CodePush service to update React Native UX controls on Android and iPhone. Since CodePush does not support ReactJS we opted into extending BFF to serve Family Onboarding Single Page Application to Windows Settings and account.microsoft.com\/family.<\/p>\n
Summary<\/h2>\n
As we look to the future, we see many more Micro frontends coming to Family Safety app. Our ambitions go beyond a single app. Our hope is for all appropriate future Microsoft experiences to consider Micro frontend architecture pattern.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Users expect software to be approachable and familiar on any device they use. Modern user experiences are cross platform spanning the web, apps, and operating systems putting users in the center.<\/p>\n","protected":false},"author":582,"featured_media":39850,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4354],"tags":[51,77,62,6395,372],"class_list":["post-39847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux","tag-angular","tag-architecture","tag-microservices","tag-react-native","tag-user-experience"],"acf":[],"blog_post_summary":"
Users expect software to be approachable and familiar on any device they use. Modern user experiences are cross platform spanning the web, apps, and operating systems putting users in the center.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=39847"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/39847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/39850"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=39847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=39847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=39847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}