Microsoft Teams has recently undergone a significant re-architecture of its desktop client. This re-architecture focuses on providing users with a simpler, more efficient user experience. Here’s what’s changed and why.
The classic client of Microsoft Teams, which was developed in 2015, used open-source software such as Electron as the host, AngularJS as the web development framework, and various custom controls constructed using HTML and CSS. While these choices allowed for rapid delivery of cross-platform web and desktop clients, the expansion of capabilities and innovation of Teams over time placed a significant strain on device resources. As a result, Microsoft began analyzing available technologies, benchmarking, building prototypes, and defining a new architecture internally known as the “north star.”
The new architecture of Microsoft Teams is built upon several key decisions. The first was to participate in and standardize on the Fluent UI collection of UX controls. This allowed for standardization of common components and ensured a consistent and cohesive experience across all devices. Using these responsive, cross-platform styles and controls led to improved responsiveness compared to many of the previously used custom controls. Additionally, Microsoft is migrating to Fluent v9, which has notable performance benefits with CSS-in-JavaScript.
The second key decision was to transition from AngularJS to React for building user interfaces. This shift was primarily based on performance characteristics and benchmarking results specific to the use cases of Microsoft Teams. The result was a smaller, more modular codebase, improved support for shareable components, and increased responsiveness.
To overcome JavaScript’s single-threaded nature, Microsoft implemented a solution by moving the data management to the client data layer. This enabled data fetch, storage, compliance operations, push notifications, and offline functionality to run in parallel threads, without adding contention to the main user interface thread. The client data layer is accessed via a GraphQL layer from the main thread, and Inter-Process Communication (IPC) connects these layers.
Finally, Microsoft transitioned from Electron to leverage WebView2 as the host. This transition allowed for reduced memory usage and a lowered disk footprint as resources are shared with Edge. Additionally, Microsoft was able to take greater advantage of the native capabilities provided by WebView2 and ensure support for more up-to-date versions of Chromium (latest performance and security updates). WebView2 is available as an SDK for building hybrid cross-platform applications for more efficient use of resources and better integration with the underlying platform, resulting in a more performant and reliable application.
In addition to the core technology upgrade, Microsoft Teams invested heavily in performance, stability, ease-of-use, and greater flexibility. For example, they re-architected the video rendering pipeline to accommodate the increased demand for more video usage in meetings during the pandemic. They developed a more efficient meeting stage layout for improved video management, a virtualized list for smoother navigation, and moved to a native compositor and renderer for media processing. The new video architecture is much more efficient in video processing, resulting in 50% less power consumption and enabling the Teams app to support more complex and advanced video features such as a 7×7 video grid and dynamic views.
Microsoft claims that Teams has been rebuilt for efficiency and performance with a new preview available now for businesses to try out.
