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

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..

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

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.

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

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!

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

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

https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Deconstructing Contoso Real Estate

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

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

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

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!

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

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

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

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

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

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

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)

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

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

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

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

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

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

https://aka.ms/contoso-real-estate/learn-live https://aka.ms/contoso-real-estate/github @nitya | Nov 2023 Prioritize It: Composable Enterprise Architecture

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

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

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

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

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

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

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

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?

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

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