Microsoft a investi dans la réarchitecture de son client Teams afin de proposer une expérience utilisateur plus simple. La version grand public de Microsoft Teams a déjà commencé à utiliser cette nouvelle architecture, et la version préliminaire pour les clients commerciaux est maintenant disponible pour Windows, avec une prise en charge pour les autres plateformes à suivre plus tard dans l’année. Cette mise à jour devrait apporter des avantages en termes de performances, de stabilité et de sécurité pour les utilisateurs de Microsoft Teams.

Cet article décrit comment Microsoft Teams a évolué technologiquement depuis son lancement en 2015. Initialement construit sur des logiciels open source tels qu’Electron et AngularJS, le développement de Teams a mis à rude épreuve les ressources des appareils. L’équipe a donc commencé à analyser les technologies disponibles, à construire des prototypes et à définir la nouvelle architecture. Les décisions clés comprenaient l’utilisation de la collection de contrôles UX Fluent UI, la transition d’Angular à React pour les interfaces utilisateur, le traitement des données sur un travailleur de la couche de données client et le passage d’Electron à WebView2 en tant qu’hôte.

Tout d’abord, certains des composants créés à l’aide de React/Fluent ont été intégrés dans le client Teams classique, ce qui a entraîné une amélioration des performances mais une lenteur globale et une utilisation accrue des ressources. Ensuite, le client grand public a été construit sur la base de la nouvelle architecture pour valider les métriques de performance et de fiabilité, tandis que le client Teams classique continuait d’ajouter des fonctionnalités demandées. Enfin, la prise en charge des fonctionnalités commerciales a été ajoutée à la base de code du client grand public pour prendre en charge la nouvelle version de Teams tout en validant l’amélioration des performances.

Nouveaux composants technologiques

Chaque couche englobe des avantages et des bénéfices pour la nouvelle expérience Teams.

Fluent UI
La collection Fluent UI de contrôles de l’expérience utilisateur (UX) a permis de standardiser les composants communs et d’obtenir des résultats cohérents sur toutes les plates-formes. L’utilisation de ces styles et contrôles réactifs et multiplateformes a permis d’améliorer la réactivité par rapport à bon nombre de nos contrôles personnalisés et a assuré une expérience cohérente sur tous les appareils. Microsoft migre vers Fluent v9, qui présente des avantages notables en termes de performances avec CSS-in-JavaScript.

React
La décision de passer d’AngularJS à React a été principalement basée sur des caractéristiques de performance et des résultats d’analyse comparative spécifiques à nos cas d’utilisation. Ce changement et ces choix avec la réécriture ont abouti à une base de code plus petite et plus modulaire, à une prise en charge améliorée des composants partageables et à une réactivité accrue. Microsoft a observé que React convenait mieux et que cela a été bénéfique pour les performances globales de l’application.

Couche de données client
L’un des noyaux de JavaScript est sa nature à thread unique. Pour surmonter cette limitation, Microsoft a implémenté une solution en déplaçant la gestion des données vers un agent distinct, appelé couche de données client. Cela a permis l’extraction de données, le stockage de données, les opérations de conformité des données, les notifications push et les fonctionnalités hors ligne pour s’exécuter dans des threads parallèles, sans ajouter de conflit au thread principal de l’interface utilisateur. La couche de données client est accessible via une couche GraphQL à partir du thread principal, et la communication inter-processus (IPC) sert de connexion entre ces couches. En déchargeant le traitement des données du thread principal, Microsoft a observé une amélioration de la réactivité de l’expérience utilisateur. De plus, la séparation des tâches a conduit à un code plus propre et plus optimisé.

WebView2
Les principaux avantages observés lors de la transition d’Electron vers WebView2 incluent une utilisation réduite de la mémoire et une empreinte disque réduite car les ressources sont partagées avec Edge. De plus, Microsoft a pu tirer davantage parti des fonctionnalités natives fournies par WebView2 et assurer la prise en charge des versions les plus récentes de Chromium (dernières mises à jour de performances et de sécurité). WebView2 est disponible en tant que SDK pour créer des applications multiplateformes hybrides pour une utilisation plus efficace des ressources et une meilleure intégration avec la plate-forme sous-jacente, résultant ainsi en une application plus performante et fiable. Cette transition a été une étape positive vers une meilleure expérience utilisateur.

En plus de mettre à jour la technologie de base, des investissements importants ont été réalisés pour améliorer les performances, la stabilité, la facilité d’utilisation et la flexibilité. Voici quelques exemples de ces investissements.

Pipeline de rendu vidéo repensé 
Les habitudes et les attentes des gens concernant les réunions en ligne ont considérablement changé pendant la pandémie. La demande d’utilisation accrue de la vidéo dans les réunions et l’intensité de l’utilisation ont explosé. Microsoft a reconstruit l’architecture de rendu vidéo côté client dans Teams pour s’adapter à la complexité et à l’intensité de l’utilisation de la vidéo. Ils ont développé dès le départ une disposition de scène de réunion plus efficace pour une gestion vidéo améliorée, une liste virtualisée pour une navigation plus fluide, et sont passés à un compositeur et un moteur de rendu natifs pour le traitement des médias. La nouvelle architecture vidéo est beaucoup plus efficace dans le traitement vidéo, ce qui entraîne une consommation d’énergie réduite de 50 % et a permis à l’application Teams de prendre en charge des fonctionnalités vidéo plus complexes et avancées (par exemple, grille vidéo 7×7, vues dynamiques) sur un plus large éventail de matériels.

Des réunions à grande échelle 
Les réunions d’équipe sont largement utilisées pour les communications à grande échelle à l’échelle. Microsoft a apporté des améliorations ciblées aux performances aux grandes réunions dans Teams, où il y a généralement des milliers de participants simultanés ou plus avec une utilisation intensive de la vidéo et des chats. Les optimisations allaient du regroupement et de la réduction des événements IPC, à la réduction du nombre de rendus de l’interface utilisateur et à l’élimination des expériences bruyantes. Grâce au travail d’optimisation, ils peuvent désormais offrir une latence de participation aux réunions plus rapide et cohérente, dans la réactivité des applications, quelle que soit la taille de la réunion.

Multi-comptes / Multi-locataires
Ils ont entrepris une refonte complète du support pour les organisations multi-locataires et multi-comptes. Cela inclut des améliorations significatives des processus d’authentification, de synchronisation et de notification. Les données de stockage des utilisateurs, y compris les applications créées sur les plates-formes Teams, sont isolées entre les locataires et les comptes. En conséquence, les utilisateurs peuvent désormais s’attendre à une expérience de collaboration fluide.

Installation simplifiée de l’application (MSIX)
Pour améliorer la distribution du client sur les appareils Windows, ils ont implémenté la prise en charge de MSIX . Cela a entraîné une nette amélioration de la fiabilité des installations et des mises à jour des applications, ainsi qu’une diminution de la bande passante du réseau et de l’utilisation de l’espace disque. L’installation se trouvant dans le dossier Program Data (WindowsApps) permet une installation unique pour tous les utilisateurs d’un appareil.

Renforcer la sécurité
Microsoft avons pris des mesures pour ajouter une protection avancée à leur système en adoptant des types de confiance et en mettant en œuvre une politique de sécurité du contenu plus stricte . Ces efforts ont conduit à un renforcement de leur protection contre les attaques de type cross-site scripting (XSS) . Un autre avantage clé de l’installation MSIX de Teams est qu’elle installe l’application dans le dossier de données du programme plutôt que dans le dossier de profil utilisateur qui n’est pas accessible en écriture par l’utilisateur et ajoute donc une meilleure protection contre les attaques qui tentent de modifier l’installation.

Obtenez ce dont vous avez besoin (données partielles)
Pour relever le défi de la gestion de quantités importantes de données et de threads au sein de Teams, qui peuvent avoir un impact négatif sur les performances, ils sont passés à un modèle de données partiel. Cette approche consiste à extraire uniquement les données nécessaires pour afficher un écran, plutôt que d’extraire par défaut toutes les données. Cela a également considérablement amélioré l’utilisation de la mémoire et du disque du produit.

Passage du Poll au Push pour les notifications
Microsoft est passé sur un système de notifications Push pour la mise à jour des stratégies, des événements de calendrier et des canaux épinglés. Cette approche conduit à une meilleure expérience utilisateur et réduit la charge du client.

Optimiser la mémoire
Certaines stratégies utilisées pour améliorer les performances s’accompagnent parfois d’un coût en mémoire (par exemple, la mise en cache des données en mémoire ou la prélecture des données ou le préchargement du code). Microsoft a ajouté la possibilité de faire des choix dynamiquement en fonction du modèle d’utilisation observé par le client. De plus, plusieurs des optimisations de performances impliquant la réduction de la quantité de données récupérées, traitées et stockées localement ont considérablement réduit la consommation de mémoire. Microsoft supprime périodiquement la mémoire inutilisée en tirant parti des API Windows et webview2.

Développez l’infrastructure et les outils de performance
Afin d’atteindre les objectifs de performance, ils ont élargi leur infrastructure et leurs outils de performance internes. Des tests automatisés étendus sont exécutés et doivent passer par des portes établies, et toute modification entraînant une régression des performances sont soit annulées, soit optimisées pour résoudre le problème.

Adoptez l’open source
Microsoft reste déterminés à utiliser du code open source dans leur processus de développement. Cela a rendu plus agile et ils ont avons constaté que souvent ces packages open source offrent le meilleur de leur catégorie et apportent les meilleures caractéristiques de performance. Les contrôles Fluent UI React utilisés dans la nouvelle application Teams sont disponibles dans le projet GitHub OSS suivant: https://github.com/microsoft/fluentui

Accessibilité
Amélioration au niveau des raccourcis clavier et une meilleure prise en charge de Windows 11 High. Profitant de l’intégration native avec Windows 11, le nouveau client exploite les notifications toast du système d’exploitation qui respectent les paramètres de Windows 11 comme ne pas déranger et le centre de notification.

Nouvelle architecture du client Teams

En explorant l’architecture plus en détail, le diagramme ci-joint présente une vue d’ensemble des principaux éléments qui composent l’architecture du client de bureau. L’hôte natif tire parti d’Edge WebView2, GraphQL est utilisé pour résumer la couche de données client, la communication inter-processus (IPC) agit comme agent de connexion, et ReactJS, TypeScript et Fluent UI sont les technologies standardisées utilisées pour l’expérience utilisateur. Les applications créées sur la plate-forme Teams ne nécessitent plus la surcharge d’un wrapper WebView. Les applications sont désormais hébergées dans un iFrame hors processus à l’aide du processus Edge Renderer.

Ils continuerons à pousser et à investir des ressources pour optimiser l’expérience. Les nouvelles équipes prennent initialement en charge les plates-formes Windows Intel, AMD et ARM et seront disponibles pour toutes les principales plates-formes, y compris les Mac Mac natifs M1, M2 et Intel et VDI. Microsoft prévoit des gains de performances significatifs à mesure que la prise en charge de chacune de ces plates-formes sera disponible.