This repository contains all the demos run during the Designing a UI for Microservices talk.
ViewModel Composition is deeply discussed on my blog in the ViewModel Composition category.
The following requirements must be met to run the demos successfully:
- Visual Studio Code and the Dev containers extension.
- Docker must be pre-installed on the machine.
- Clone the repository
- On Windows, make sure to clone on a short path, e.g.,
c:\dev, to avoid any "path too long" error
- On Windows, make sure to clone on a short path, e.g.,
- Open one of the demo folders in Visual Studio Code
- Make sure Docker is running
- If you're using Docker for Windows with Hyper-V, make sure that the cloned folder, or a parent folder, is mapped in Docker
- Open the Visual Studio Code command palette (
F1on all supported operating systems, for more information on VS Code keyboard shortcuts, refer to this page) - Type
Reopen in Container, the command palette supports auto-completion; the command should be available by typingreop
Wait for Visual Studio Code Dev containers extension to:
- download the required container images
- configure the docker environment
- configure the remote Visual Studio Code instance with the required extensions
Note: no changes will be made to your Visual Studio Code installation; all changes will be applied to the VS Code instance running in the remote container
The repository devcontainer configuration will:
- Create one .NET-enabled container where the repository source code will be mapped
- Configure the VS Code remote instance with:
- The C# extension (
ms-dotnettools.csharp) - The PostgreSQL Explorer extension (
ckolkman.vscode-postgres)
- The C# extension (
Once the configuration is completed, VS Code will show a new Ports tab in the bottom-docked terminal area. The Ports tab will list all the ports the remote containers expose.
To execute the demo, open the root folder in VS Code, press F1, and search for Reopen in container. Wait for the Dev Container to complete the setup process.
Once the demo content has been reopened in the dev container:
- Press
F1, search forRun task, and execute the desired task to build the solution or to build the solution and deploy the required data - Go to the
Run and DebugVS Code section and select the command you want to execute.
The repository root contains a request.http file listing some test requests. Using VS Code to execute requests can be used by adding the REST Client that is automatically configured when using Dev Conatainers.
The ASP.Net Core API Gateway, 01 and 02, solution demos ViewModel Composition techniques built on top of .Net Core.
The CompositionGateway project shows how to create and host a .Net Core API Gateway or reverse proxy, that composes HTTP requests to multiple API backends.
To run this sample, ensure that the following projects are set as startup projects:
Sales.ApiShipping.ApiWarehouse.ApiCatalog.ApiCompositionGateway
The WebApp project is a .Net Core Mvc app that composes HTTP requests to multiple backends directly in Mvc Views as Controllers are invoked. This demo implements ViewModel Composition concepts, introducing Branding as a contract at the UI level.
To run this sample, ensure that the following projects are set as startup projects:
Sales.ApiShipping.ApiWarehouse.ApiCatalog.ApiWebApp
WebApp project is a .Net Core Mvc app that composes HTTP requests to multiple backends directly in Mvc Views as Controllers are invoked. This demo implements ViewModel Composition and UI Composition concepts.
To run this sample, ensure that the following projects are set as startup projects:
Sales.ApiShipping.ApiWarehouse.ApiCatalog.ApiWebApp
All four solutions contain integration tests demonstrating how to test composition scenarios.
To simplify the sample as much as possible, frontend applications, such as CompositionGateway and WebApp, directly reference ViewModel Composition and UI Composition assemblies.
This demo is built using NServiceBus Sagas; I work for Particular Software, the makers of NServiceBus.