Chipotle builds new website with .NET Core, Visual Studio Code, and Azure

Situation

Steve Ells, founder and Executive Chairman, first opened Chipotle with a single restaurant in Denver, Colorado, in 1993. Some 25 years later, having grown nationwide, the company decided to move its corporate headquarters—including most software development—to Newport Beach, California. 

For Mike Smith, a native Southern Californian who joined Chipotle as a Lead Software Developer soon after the move, the opportunity was too good to pass up. Few developers had followed the company from Denver to Newport Beach, which meant that Smith would get to build his own team. His first assignment: deliver an entirely new customer-facing website that would let the company be more agile in reaching out to and servicing Chipotle’s rapidly growing online customer base.

At the time, Chipotle had three different customer-facing websites, each with its own look and feel: a main website, one for online ordering, and one for catering. All were built on AngularJS and all content on the sites was hand-coded, including menus, pricing, and item availability. Even small changes required new code, followed by the necessary testing and deployment processes. What’s more, because the sites were self-hosted, Chipotle also had to devote resources to day-to-day operation of the three sites, as required to keep everything up and running smoothly.

The company decided to start over and build a new, unified web presence from scratch. The website would need to connect to existing back-end systems for ordering, preferences, authentication, and so on. It also had to integrate with the company’s recently purchased, cloud-based content management system, which drives menu content and item availability for displays in the company’s 2,500 stores.

Solution

Work on the new site began in April 2019, with the first task being to choose a new platform. From a requirements perspective, whatever Smith’s team delivered would need to support content changes in minutes or hours, without developer assistance. Menus and menu item availability would need to be configuration-driven and adjustable on the fly—as required to promptly address situations such as a local store running out of a menu item or ingredient.

“One vendor was steering us to build everything within the content management system, which seemed risky for many reasons—such as integration with existing back-end systems,” says Smith. “To ensure an agile architecture while delivering the richest and most responsive user experience, we decided on a single-page application pattern, which dynamically rewrites the current web page as needed rather than loading an entire new set of pages from a server.”

Assembling a tool set

Next, Smith’s team had to choose a tool set with which to build its new web presence. Not only would it need to support the chosen application pattern, but it would also need to enable Smith’s small, newly formed team of four to hit the ground running—and meet the marketing team’s mandate to have the new site up and running in less than eight months.

Smith’s team chose a powerful combination of C#, TypeScript, .NET Core, and Microsoft Visual Studio Code, each of which brought some attractive benefits to the table:

• C# was already the company’s language of choice for existing back-end services and had proven its worth through language features like LINQ, generics, async/await, and NuGet for sharing code. “Internally shared NuGet packages are great for code reusability, formalizing boundaries, and achieving consistency across teams,” says Smith.
• Given the desire to use C#, the next decision was whether to use .NET Framework or .NET Core. “We chose .NET Core because it offered more options in terms of development platform and hosting options—like the flexibility to deploy Docker containers on Linux,” says Smith.
• For client-side scripting, the team chose TypeScript—a typed superset of JavaScript that includes features like object orientation and strong type checking. “TypeScript made it easy for JavaScript developers to come up to speed, enabling them to write similar code but with access to more language features and built-in compile-time safety,” explains Smith.
• For an IDE, in keeping with its desire to stay as flexible as possible, the team chose Visual Studio Code. “Visual Studio Code is a huge developer win,” says Smith. “We’re mostly using it for front-end development; we test in Safari on Macs, among other platforms, and being able to use the same IDE across devices makes the process seamless.”

Building a single-page app

Having chosen a platform and tool set, Smith’s team began building a single-page app that could integrate with the company’s existing content management system and back-end services. Today, when customers go to chipotle.com, the first page load is from the CDN for the content management system, which has a <script> tag with a source that points to Azure Content Delivery Network. The browser then requests the single web page (.js and .css files) for the app from Content Delivery Network, which is backed by Azure Blob storage. The JavaScript on the page (transpiled from TypeScript within Visual Studio Code) drives the retrieval of text and images from the CDN for the company’s cloud-based content management system, which is requested via HTTP and returned as JSON.  

Calls to back-end services (such as ordering, delivery, and account management and preferences) hit Azure API Management, which gives Chipotle a single, easily managed endpoint and API gateway into its various back-end services and systems. With such functionality, other development teams at Chipotle can work to modernize the back-end services behind the gateway in a way that remains transparent to Smith’s front-end app. “API Management is great for ensuring consistency with our API interactions, enabling us to always know what exists where, behind a single URL,” says Smith. “There are lots of changes going on behind the API gateway, but we don’t need to worry about them.”

For example, a different team is working to replace some relational data stores with Azure Cosmos DB. “Some of our data really lends itself to document storage versus relational, so switching to Azure Cosmos DB is a big win in terms of scalability, availability, and, down the road, geographic distribution,” Smith says. “As an example, with Azure Cosmos DB, we can literally store a customer’s order as a single, unstructured JSON document, instead of in 30 to 50 different relational tables. Azure Cosmos DB features like Time to Live are also proving helpful, providing a convenient way to automatically delete an order that’s not completed within a certain amount of time.”

Other Azure services that play a role in the solution include:

• Azure Cache for Redis, which improves website performance by providing in-memory caching for certain information.
• Azure Event Hubs, which is used to collect telemetry and identify bottlenecks that have brought the company’s website down in the past.
• Azure Functions, which runs event-triggered code in cases where a full-blown hosted service isn’t needed. For example, a serverless function is used to provide an API through which stores can adjust their local menus if they run out of an item. 
• Azure App Service, which provides an auto-scaling hosting environment for each back-end service: order, tax, payment, and so on.
• Azure Key Vault, which provides a means of safeguarding cryptographic keys and other secrets used by Chipotle’s cloud apps and services.

Looking forward

With Chipotle’s website now in production, Smith’s team is following other Chipotle development teams in making the transition from Visual Studio Team Foundation Server 2017 to Azure DevOps. “It’ll be great to have our development infrastructure running on a fully managed service,” says Smith. “Builds will be faster, we won’t need to worry about things like uptime and reliability, and, after we’re all on Azure DevOps, we’ll have one less piece of internal IT infrastructure that we need to maintain.”

Some teams also are already moving to Azure App Service Environment, an App Service feature that provides a fully isolated and dedicated environment for running App Service apps at high scale with high security. “It all ties into scalability and our move from on-premises to the cloud,” explains Smith. “For example, with Azure App Configuration, we can make a change in one place and know that it will get propagated to wherever that change is needed.”

Benefits

Thanks to Chipotle’s choice of platform and tool set for its new web presence, Smith’s team was able to meet all functional requirements within the required timeframe. Marketers now can make changes to the site in minutes, including menu items and availability, while developers are freed to focus on making the site richer in other ways. Best of all, because most everything is running on Azure, Chipotle no longer needs to worry about operational issues such as maintenance, patching, availability, and scalability.

Superior developer productivity

With a rich tool set, Smith’s small team was able to get a lot done in just seven months. Similarly, maintaining the company’s web presence will be much easier moving forward. “TypeScript makes code maintenance much easier,” says Smith. “And Visual Studio Code provides great productivity—it loads quickly, runs smoothly on Windows computers and Macs, and lets us use the same IDE across different platforms. The Visual Studio Code community has also proven its worth, providing access to a number of extensions that make coding even easier.”

Extensive prebuilt functionality

Prebuilt Azure services further reduced the work required of Smith’s team, enabling them to stay focused on what they wanted the website to do instead of all the implementation details. Azure Key Vault is a prime example. “Imagine you’re tasked with improving the DevOps process to properly store configuration secrets,” says Smith. “Where do you start? What tools and products do you use? A quick online search directed me to a tutorial on Key Vault. In less than 20 minutes, I had a working prototype in .NET Core, deployed to Azure, with permissions properly set up—and I never even had to open the Azure portal. Instead of spending a lot of time debating theories and approaches with no prior experience to rely on, we had a working demo ready to drive decision making in minutes.”

Built-in scalability and reliability

With everything now running in the cloud, on fully managed Azure services, Chipotle’s technical team can rest easy knowing it won’t need to worry about day-to-day operations, backups, maintenance, patching, and so on. Similarly, as traffic on the new site continues to grow, the company can easily handle an increase in customers without having to worry about performance or scalability. “Our move to .NET Core, Visual Studio Code, TypeScript, and Azure services worked out just like we had planned,” says Smith. “Our new website makes us much more agile in supporting Chipotle’s primary mission: bringing people responsibly sourced, classically cooked, real food, with wholesome ingredients.”