Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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!

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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?

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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