{"id":13829,"date":"2024-03-20T09:00:41","date_gmt":"2024-03-20T16:00:41","guid":{"rendered":"https:\/\/www.microsoft.com\/insidetrack\/blog\/?p=13829"},"modified":"2024-03-20T16:24:12","modified_gmt":"2024-03-20T23:24:12","slug":"enabling-effortless-cloud-infrastructure-management-with-myworkspace-and-microsoft-azure","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/insidetrack\/blog\/enabling-effortless-cloud-infrastructure-management-with-myworkspace-and-microsoft-azure\/","title":{"rendered":"Enabling effortless cloud infrastructure management with MyWorkspace and Microsoft Azure"},"content":{"rendered":"

\"MicrosoftMicrosoft Digital (MSD) is the organization that powers, protects, and transforms Microsoft. As part of its mission, MSD builds and manages the cloud network infrastructure that supports Microsoft products and services.<\/p>\n

MyWorkspace is a browser-based cloud-provisioning tool created by MSD to allow Microsoft employees to rapidly deploy Azure-based infrastructure environments for solution testing and development tasks. From the most basic configuration to massive, complex environments, MyWorkspace provides an interface that simplifies the process of creating and deploying Azure resources. MyWorkspace users can create custom environments from scratch or use built-in templates to replicate existing Azure environments.<\/p>\n

MyWorkspace provides more than 10,000 monthly active users across almost 75 countries and regions with access to Azure environments that serve as the foundation for the solutions we develop for our customers and employees.<\/p>\n

We developed MyWorkspace to replace a preexisting virtual machine deployment solution designed for on-premises deployment. MyWorkspace was born in Azure and engineered to take advantage of modern cloud technology and modern development practices.<\/p>\n

However, My Workspace wasn\u2019t an overnight success. Our engineers and development teams have used an iterative approach to build MyWorkspace into the robust and intuitive experience its users enjoy today.<\/p>\n

[<\/em>Explore moving Microsoft\u2019s global network to the cloud with Azure.<\/em><\/a> Read our ongoing series on moving our network to the cloud.<\/em><\/a>]<\/em><\/p>\n

Creating a high-performance, responsive UI on Azure infrastructure<\/strong><\/h2>\n

We built MyWorkspace on modern frameworks and technologies, including React and Typescript. The capabilities of the modern platform enabled our developers to prioritize performance and the user experience, even at the early stages of the development process.<\/p>\n

Creating a fast and responsive user experience was a top priority for MyWorkspace. Reducing latency and user interface delays translates to fewer disruptions, less downtime, and improved productivity for users and administrators.\u00a0We used Lighthouse\u2014an open-source, automated tool for improving the quality of web pages\u2014to monitor and improve critical metrics for MyWorkspace. These metrics formed the core data set we used to gauge the performance, accessibility, and design of MyWorkspace. Using the Core Web Vitals metrics from Lighthouse, we could constantly and accurately assess the changes we made to MyWorkspace.<\/p>\n

\"Deans,
Joshua Deans, James Ferris, Jada Griffith, Mason Herhusky, Ji-Young Seo, and Deb Keme (left to right, top row first) are part of a team at Microsoft Digital that designed MyWorkspace\u2014an effortless cloud infrastructure management tool for Microsoft Azure.<\/em><\/figcaption><\/figure>\n

Moving our hosting to Azure Static Web Apps significantly improved our performance. At the beginning of our development process, we used Azure Kubernetes Service (AKS) containers, which were localized to Azure regions in the US.<\/p>\n

We used Azure Static Web Apps to automatically distribute our static web assets across geographically dispersed points, creating a consistent performance experience across the countries and regions MyWorkspace serves. Some users experienced performance improvements of more than 800 percent. The migration to Azure Static Web Apps also allowed us to take advantage of the enterprise-grade Azure internet edge, including distributed denial of service (DDoS) protection, efficient caching, and file compression.<\/p>\n

To improve loading times, we implemented code splitting. Rather than bundling all JavaScript code into a single large file, we split it into smaller chunks and load only the necessary code segments as they\u2019re needed. This approach reduces initial load times and ensures a more responsive experience.<\/p>\n

We meticulously scrutinized our assets, especially those originating from third-party libraries. By minimizing the use of external dependencies and optimizing JavaScript bundles, we reduced the payload size. Fewer assets means faster loading, decreased latency, and improved overall performance. We tracked and visualized our application\u2019s bundle size over time with Azure Application Insights logs and a PowerBI dashboard.<\/p>\n

MyWorkspace simplifies Azure resource management for users by abstracting away Azure-specific complexities through an intuitive UI. However, handling frequent or long-running changes associated with Azure resources poses challenges.\u202fIn the past, we relied on database polling\u2014a method involving periodic queries to check resource status. Unfortunately, this approach led to unnecessary network traffic and delays in updates.<\/p>\n

We used the Azure SignalR service to handle the complexities of Azure resource interactions. Azure SignalR is a managed cloud service that simplifies real-time communication between a server and multiple clients, enabling dynamic and responsive applications at scale.<\/p>\n

By using Azure SignalR with the Cosmos DB Change Feed Listener, our backend service promptly notifies the UI of any relevant database changes. Additionally, we have extended our SignalR service with a notification microservice, enabling us to provide relevant toast notifications to users. These notifications provide information about the status of their long-running events, such as Azure resource deployments.<\/p>\n

Through the above techniques, the MyWorkspace Lighthouse score has increased from approximately 50 to more than 80 (out of 100). To maintain the consistent monitoring required for a high-performance application like MyWorkspace, we continually monitor Lighthouse scores using Azure Application Insights and a custom PowerBI dashboard.<\/p>\n

Prioritizing the inclusivity and the employee experience<\/strong><\/h2>\n

The development team uses heuristic evaluation, inclusive usability studies, and automated accessibility testing to ensure a usable and intuitive experience for every employee. We also use the Microsoft Fluent design system, a collection of user experience (UX) guidelines, best practices, and code examples for creating beautiful and engaging experiences across devices and platforms.<\/p>\n

The MyWorkspace team adopted a shift-left mindset for accessibility testing, which means we integrated accessibility testing into our development process as early and as often as possible rather than waiting until the end of the project. With the shift-left approach, accessibility issues are detected and corrected before they reach production, reducing time spent on manual testing, improving overall accessibility testing consistency, and reducing feature delivery time.<\/p>\n

To adopt shift-left, the MyWorkspace team integrated the Accessibility Insights for CI\/CD tool into their end-to-end test suite. Accessibility Insights is an open-source project created by Microsoft that enables developers to scan their web apps for common accessibility issues using the Axe Core accessibility testing engine. By using Accessibility Insights for CI\/CD, the MyWorkspace team automated the accessibility testing of their application and ensured that it met the WCAG 2.1 AA level of conformance, making the application easier to navigate and understand for all users.<\/p>\n

Building for the future<\/strong><\/h2>\n

Understanding the changing needs and demands of MyWorkspace is critical to understanding how the platform needs to change and grow. We\u2019re using One Customer Voice\u2014based on Dynamics 365 Customer Voice\u2014to gather rapid and consistent feedback from MyWorkspace users to help anticipate future needs.<\/p>\n

One Customer Voice allows for in-context, one-click feedback from users, simplifying the feedback process and creating a larger and more accurate sample size for user feedback. One Customer Voice also provides targeted in-context surveys that can be presented to users to gather more detailed feedback. It all combines to create a dashboard where our teams can better understand user sentiment and satisfaction and use that data to continue to build a better MyWorkspace product.<\/p>\n

As MyWorkspace usage increases\u2014and our scope of work with it\u2014we\u2019re offering more and more capabilities. The scalable nature of our modern engineering platform in Azure allows us to easily support this growth by keeping our codebase healthy and focusing on modularity in design.<\/p>\n

We\u2019re excited about the future of MyWorkspace and the opportunities our modern approach has given us to grow and adapt our solution along with Microsoft\u2019s business needs. If you find this useful, we encourage you to consider building a similar browser-based cloud-provisioning tool at your company.<\/p>\n

Key takeaways<\/h2>\n

Here are a few tips for developing your own MyWorkspace-like solution:<\/p>\n