Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Want to Build an Enterprise-Grade App? Tear One...

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

Nitya Narasimhan, PhD

January 01, 2024
Tweet

More Decks by Nitya Narasimhan, PhD

Other Decks in Technology

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 Development Environment Hello, Dev

    Containers Configuration-as-code! https://docs.github.com/en/codespaces/overview Demo: Explore devcontainer.json
  10. 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
  11. 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!
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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)
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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?
  32. 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
  33. 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