Microsoft Teams has undergone a significant re-architecture of its desktop client, focusing on delivering a simpler, more efficient user experience. This re-architecture is designed to meet the growing demands of users, particularly in the wake of increased video usage and large-scale online meetings. The new architecture is already in use by the consumer version of Microsoft Teams with support for web, Mac, EDU (education), and VDI (virtual desktop infrastructure) to follow later in the year.
Evolution from the Classic Client
The classic Teams client utilized open-source software such as Electron for hosting, AngularJS as the web development framework, and custom controls built with HTML and CSS. These technologies allowed rapid delivery of cross-platform web and desktop clients when Teams was first developed in 2015. However, as Teams' capabilities and usage expanded, this architecture began to strain device resources, necessitating a re-evaluation and overhaul of the client architecture.
Key Architectural Decisions
The new architecture, referred to internally as the "north star," includes several critical changes:
- Fluent UI: Standardized on the Fluent UI collection of UX controls, which are responsive and cross-platform, providing a consistent user experience across devices. The migration to Fluent UI v9, with its performance benefits of CSS-in-JavaScript, has further improved responsiveness.
- React: Transitioned from AngularJS to React, resulting in a smaller, more modular codebase, better support for shareable components, and increased responsiveness. This shift has significantly enhanced the overall performance of the Teams application.
- Client Data Layer: Implemented a client data layer that moves data processing out of the main thread into a separate worker. This architecture, accessed via a GraphQL layer from the main thread, improves user experience by reducing contention and improving responsiveness.
- WebView2: Replaced Electron with WebView2 as the host, leading to reduced memory usage, lower disk footprint, and better integration with the underlying platform. This transition has allowed Teams to leverage native capabilities and up-to-date Chromium features for improved performance and reliability.
- Rearchitected Video Rendering Pipeline: Redesigned the video rendering architecture to handle the increased demand for video during meetings. The new pipeline is more efficient, reducing power consumption by 50% and supporting advanced video features like a 7x7 video grid and dynamic views across a wider range of hardware.
- Large Scale Meetings: Optimized the Teams client to better handle large-scale meetings with thousands of attendees, improving application responsiveness and meeting join latency through batching IPC events, reducing UI renders, and eliminating noisy experiences.
- Multi-Account/Multi-Tenant Support: Enhanced support for multi-tenant and multi-account environments, improving authentication, synchronization, and notification processes. Users can now expect a seamless experience across tenants and accounts with faster tenant switching and concurrent notifications.
- Streamlined App Installation (MSIX): Implemented support for MSIX, improving the reliability of installations and app updates, reducing network bandwidth and disk space usage, and enabling admins to manage deployments via Microsoft Intune.
- Hardened Security: Strengthened security by adopting Trusted Types and implementing stricter Content Security Policies. MSIX installations further protect against attacks by installing the app in the WindowsApps folder, which is not writable by users.
- Partial Data Model: Transitioned to a partial data model, fetching only necessary data to render screens, significantly improving memory and disk utilization.
- Push Notifications: Moved from a polling-based system to push notifications for updates, enhancing user experience and reducing client load.
- Optimized Memory Usage: Implemented dynamic memory management strategies, reducing memory consumption while maintaining performance through better code bundling and paging out unused memory.
- Expanded Performance Infrastructure and Tooling: Developed extensive internal tooling and infrastructure to meet performance targets, including automated tests, dashboards, and alerting systems to catch and optimize performance regressions.
- Embrace of Open Source: Continued commitment to open-source software, utilizing tools like lage for faster build times and Playwright for testing and automation, improving agility and performance.
- Accessibility Enhancements: Improved accessibility in the new Teams with more efficient keyboard navigation, context-sensitive help, support for Windows 11 High Contrast, and better performance for screen reader users.
New Teams Desktop Architecture
The new desktop client architecture leverages Edge WebView2 as the native host, with GraphQL abstracting the client data layer and IPC acting as the connecting agent. The user experience is powered by standardized technologies, including ReactJS, TypeScript, and Fluent UI. Notably, apps built on the Teams platform no longer require the overhead of a WebView wrapper, as they are now hosted in an out-of-process iFrame using the Edge Renderer Process.
These architectural enhancements have positioned Microsoft Teams to deliver a more responsive, reliable, and efficient user experience across all devices, setting the stage for continued innovation and expansion of capabilities.
Source: Microsoft Teams: Advantages of the new architecture - Microsoft Community Hub
Comments