Want to Build an Enterprise-Grade App? Tear One Down!

Building enterprise-grade applications is challenging. So how can you learn to build one? Start by tearing one down!! Say hello to Contoso Real Estate - an open-source reference implementation featuring a composable architecture with micro-frontends and a cloud-native backend - that provides the perfect sandbox for hands-on exploration and learning.

In this talk, we'll take the implementation for a spin using GitHub Codespaces as our local development environment to explore the code, build & preview the application and deploy it to the cloud with one command. We'll dive under the hood to understand the project structure (monorepo), developer experience (tooling) and application insights (monitoring). Want to join me on the teardown adventure? Just bring your browser and a GitHub account!

Talk Recording:
https://portal.gitnation.org/contents/want-to-build-an-enterprise-grade-app-tear-one-down

Speaker Page:
https://portal.gitnation.org/person/nitya_narasimhan

Transcript

1. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Nitya Narasimhan PhD AI Advocacy @Microsoft @nitya | #in/nityan https://contoso-real-estate/learn-live Want to Build an Enterprise-Grade App? Tear One Down! React Summit US | Nov 2023
2. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 We need to ship a multi-scenario app working with multiple teams We need to make decisions on the design architecture and the development environment that will work best. Any ideas? Imagine This Scenario You’ve joined a new team that builds apps for enterprise use. It’s day 1 – and you’re already seeing gaps in your learning..
3. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 We face a Knowledge Gap I know a lot about building functional prototypes. But I’m missing “the small details” for production-ready solutions I know to do this! Lots of quickstarts and tutorials helped me build prototypes! I need to do this! Design architectures Prioritized scenarios End-to-End workflows What am I missing? I don’t know how to go from to
4. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 I Let’s Fill That Gap in 3 Steps Find an open-source sample. Deconstruct it to learn. Transfer the knowledge.
5. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 What I hope to cover in this talk 1. The Knowledge Gap 2. The Reference Sample 3. The Development Environment 4. The Project Structure 5. The Design Architecture 6. The Deployment Workflow 7. The AI Pair Programmer 8. The Knowledge Transfer
6. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 An open-source sample can give a practical paved path you can learn from & remix A good references sample teaches you patterns that help in knowledge transfer A good use case is provides coverage of requirements that are also in your project Step 1: Find a good reference sample!
7. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023  Contoso is a fictitious global corporation that hires thousands of people each year  Contoso Real Estate is an onboarding app for new hires that implements multiple scenarios  An “Admin” user populates a content management system with relevant rental details & blog posts for the application.  A “Guest” user can visit a blog app to view news & updates  A “Guest” user can visit a portal app to view featured rentals, search for rentals by name, and view rental details.  An ”Authenticated” user can save rentals to their profile, reserve them with a payment, and view activity history later.  The solution needs to be extensible to more scenarios later. Step 1: Contoso Real Estate Sample
8. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Step 2: Create a copy to explore This is an actively evolving repository – let’s pick a stable point. Use: https://aka.ms/contoso-real-estate/react-summit-2023 Uncheck “main” | Fork & switch to `react-summit-2023` branch
9. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deconstructing Contoso Real Estate
10. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Development Environment GitHub Codespaces (Dev Container in Cloud) Demo: Resume Stopped Codespace
11. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Development Environment Hello, Dev Containers Configuration-as-code! https://docs.github.com/en/codespaces/overview Demo: Explore devcontainer.json
12. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Install GitHub Copilot Chat ! Optional AI Assistance Stay in focus (inline) Richer context used Demo: Get AI Assistance, stay focused
13. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Build & Preview App in Browser! Multiple Scenarios Demo Walkthrough Demo: Walkthrough App in Browser!
14. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Composable Enterprise Pattern API-First Design Prioritized Scenarios Demo: Explore OpenAPI spec, docs
15. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Map it to the Project Structure Monorepo for Teams Packages per Scenario Prioritized Scenarios Demo: Explore Monorepo, Packages
16. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deploy it to Azure Azure Developer CLI Infrastructure-as-Code E2E Developer Experience Video: Using the Azure Developer CLI
17. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 1. Define User Scenarios (In Prioritized Order) 2. Setup as Monorepo (For Multi-team usage) 3. Use Dev Containers (Config-as-Code) 4. Design for Composability (API-First) 5. Activate GitHub Copilot (AI Assistance) 6. Deploy with AZD (Unified tool, Infra-as-Code) 7. Automate Workflows (GitHub Actions, Playwright) 8. Monitor – Analyze – Iterate (For your project) Transfer The Knowledge Reconstruct the app with your use case in mind
18. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 What We Learned Today 1. The Knowledge Gap 2. The Reference Sample 3. The Development Environment 4. The Project Structure 5. The Design Architecture 6. The Deployment Workflow 7. The AI Pair Programmer 8. The Knowledge Transfer
19. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 • https://aka.ms/contoso-real-estate/github | Sample • https://aka.ms/contoso-real-estate/collection | Resources • https://aka.ms/contoso-real-estate/learn-live | Video Series Resources For Self-Guided Learning
20. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 The Demo: From Scenario to User Experience Design – for composability (API first) Develop – for scale (cloud-native tech) Deploy – effortlessly (developer tools) Deliver – continuously (e2e workflows)
21. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 The Environment: Dev Containers Familiar Docker container Consistency across teams Stop-Resume for fast starts Uses configuration as code. In GitHub Codespaces (cloud) or Docker Desktop (device) with versioning, customization https://docs.github.com/en/codespaces/overview
22. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 The Environment: Dev vs. Production Dev container has the same runtime as production – so your tests & validation transfer over. Dev container can be used in inner (dev) and outer (CI) loops – provide consistency in e2e DX https://docs.github.com/en/codespaces/overview
23. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deconstruct it! Fork the Repo Launch Codespaces Simplifies setup. Same, deterministic env. Simplifies debugging. Easy to share & pair. Easy to reproduce error. Fork This: https://aka.ms/contoso-real-estate/react-summit-2023
24. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Build & Preview it npm install && npm start Build, Debug in browser Familiar VS Code editor. Rich VS Code extensions. Preview app directly in browser Check for (9) active ports Start exploring codebase https://aka.ms/contoso-real-estate/github
25. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Build & Preview it npm install && npm start Build, Debug in browser Familiar VS Code editor. Rich VS Code extensions. Preview app directly in browser Check for (9) active ports Start exploring codebase https://aka.ms/contoso-real-estate/github
26. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Build & Preview it npm install && npm start Build, Debug in browser Familiar VS Code editor. Rich VS Code extensions. Preview app directly in browser Check for (9) active ports Start exploring codebase https://aka.ms/contoso-real-estate/github
27. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Prioritize It: Composable Enterprise Architecture
28. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Map it: Codebase Team → Monorepo Scenario → Package API-first design for composability CMS Integration Portal App Blog App Payments Integration E2E Testing https://aka.ms/contoso-real-estate/github
29. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Explore It: Use AI GitHub Copilot Chat In-editor use keeps focus /explain code – learn /simplify code – refactor /fix code – debug /tests – generate code
30. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Explore It: Use AI GitHub Copilot Chat In-editor use keeps focus /explain code – learn /simplify code – refactor /fix code – debug /tests – generate code
31. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deploy It: Azure What does a deployed app look like on Azure? Let’s see an example That’s a lot of complexity for a simple architecture. And our sample is more complex than that .. https://aka.ms/azd-learn-live-path Build — Resources and Considerations • Container Apps Environment (1) • Container Registry (1) • Container App (2) • Key Vault (1) • Azure Cosmos DB for MongoDB (1) • Configuration of infrastructure services • Configuration of permissions and roles • Local dev support for working with resources Monitoring • Log Analytics Workspace (1) • Application Insights (1) • Portal dashboard (1) Test and Release • CI/CD pipeline via GitHub Actions
32. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deploy To Azure What if we could simplify this with a single tool? Azure Developer CLI (azd) What if we could declare requirements for reuse? Infrastructure-as-Code (IaC) https://aka.ms/azd-learn-live-path https://aka.ms/azd-learn-live-path An azd template azure.yaml to specify the azd project with metadata to describe the application
33. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deploy It: Demo Deploying Contoso Real Estate to Azure with the Azure Developer CLI declare infra as code https://aka.ms/azd-learn-live-path
34. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deploy It: Demo Deploying Contoso Real Estate to Azure with the Azure Developer CLI declare infra as code deploy with a single tool https://aka.ms/azd-learn-live-path
35. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 1. Define User Scenarios (In Prioritized Order) 2. Setup as Monorepo (For Multi-team usage) 3. Use Dev Containers (Config-as-Code) 4. Design for Composability (API-First) 5. Activate GitHub Copilot (AI Assistance) 6. Deploy with AZD (Unified tool, Infra-as-Code) 7. Automate Workflows (GitHub Actions, Playwright) 8. Monitor – Analyze – Iterate (For your project) Transfer The Knowledge How can I replicate this in my own project?
36. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 What We Learned Today 1. The Knowledge Gap 2. The Reference Sample 3. The Development Environment 4. The Project Structure 5. The Design Architecture 6. The Deployment Workflow 7. The AI Pair Programmer 8. The Knowledge Transfer
37. https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Resources For Self-Guided Learning • https://aka.ms/contoso-real-estate/github | Sample • https://aka.ms/contoso-real-estate/collection | Resources • https://aka.ms/contoso-real-estate/learn-live | Video Series