Microsoft Digital is the organization that powers, protects, and transforms Microsoft. As part of its mission, we build and manage the cloud network infrastructure that supports Microsoft products and services.
Managed Cloud Labs is a browser-based cloud-provisioning tool created by Microsoft Digital 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, Managed Cloud Labs provides an interface that simplifies the process of creating and deploying Azure resources. Users can create custom environments from scratch or use built-in templates to replicate existing Azure environments.
The service 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.
We developed Managed Cloud Labs to replace a preexisting virtual machine deployment solution designed for on-premises deployment. The service was born in Azure and engineered to take advantage of modern cloud technology and modern development practices.
However, Managed Cloud Labs wasn’t an overnight success. Our engineers and development teams have used an iterative approach to build it into the robust and intuitive experience its users enjoy today.
Creating a high-performance, responsive UI on Azure infrastructure
We built Managed Cloud Labs 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.
Creating a fast and responsive user experience was a top priority. Reducing latency and user interface delays translates to fewer disruptions, less downtime, and improved productivity for users and administrators. We used Lighthouse—an open-source, automated tool for improving the quality of web pages—to monitor and improve critical metrics for the service. These metrics formed the core data set we used to gauge the performance, accessibility, and design of Managed Cloud Labs. Using the Core Web Vitals metrics from Lighthouse, we could constantly and accurately assess the changes we made.
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.
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 Managed Cloud Labs 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.
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’re needed. This approach reduces initial load times and ensures a more responsive experience.
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’s bundle size over time with Azure Application Insights logs and a PowerBI dashboard.
Managed Cloud Labs 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. In the past, we relied on database polling—a method involving periodic queries to check resource status. Unfortunately, this approach led to unnecessary network traffic and delays in updates.
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.
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.
Through the above techniques, the Managed Cloud Labs 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 Managed Cloud Labs, we continually monitor Lighthouse scores using Azure Application Insights and a custom PowerBI dashboard.
Prioritizing inclusivity and the employee experience
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.
The Managed Cloud Labs 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.
To adopt shift-left, the 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 Managed Cloud Labs 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.
Building for the future
Understanding the changing needs and demands of Managed Cloud Labs is critical to understanding how the platform needs to change and grow. We’re using One Customer Voice—based on Dynamics 365 Customer Voice—to gather rapid and consistent feedback from users to help anticipate future needs.
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 product.
As Managed Cloud Labs usage increases—and our scope of work with it—we’re 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.
We’re excited about the future of Managed Cloud Labs and the opportunities our modern approach has given us to grow and adapt our solution along with Microsoft’s business needs. If you find this useful, we encourage you to consider building a similar browser-based cloud-provisioning tool at your company.
Here are a few tips for developing your own cloud infrastructure management solution:
- Embrace cloud technology for agility and scale. Use modern cloud services like Azure to rapidly deploy and manage your infrastructure and enhance your team’s productivity. Explore browser-based cloud-provisioning tools to speed up your development and testing cycles, ensuring your team can focus on innovation rather than infrastructure management.
- Prioritize performance from the start. Focus on creating a fast and responsive user experience. Use tools like Lighthouse to monitor and improve your web applications’ performance, accessibility, and user experience. Consider adopting practices such as code splitting and minimizing external dependencies to reduce load times and enhance responsiveness.
- Integrate accessibility and inclusivity into your development process. Integrate accessibility testing early and often in your development cycle. Use tools like Accessibility Insights for CI/CD to automate testing and ensure your applications are accessible to all users. Adopting a shift-left approach to accessibility can help detect and correct issues before they impact users, improving your projects’ overall quality and inclusiveness.
- Collect and act on user feedback for continuous improvement. Use tools like Dynamics 365 Customer Voice to gather real-time feedback, better understand user needs, anticipate future demands, and continuously refine your product. Encourage your team to embrace feedback as a valuable resource for driving innovation and maintaining relevance.
Learn how to build your own Azure Static Web App.
