UI Composition for Services

Architecture
DDD, SOA

One of the most important concepts when applying either SOA or DDD is the definition of Services (or Bounded Contexts in the DDD lingo).

Each of these services will be responsible for its own data and behavior and could also own the UI components of that service.

Let’s see an example with the typical Ecommerce domain:

In this case we have two services, Sales & Shipping, and each of them owns its UI components that will be rendered by the UI host. That’s the result:

Composition with ASP.NET MVC

In this example, I’m using Razor Generator in order to let services to have their own MVC components in class libraries, which will be referenced by the central UI host:

The use of Razor Generator is very straightforward:

  1. Install RazorGenerator from VS gallery
  2. On each class library, install RazorGenerator.Mvc from Nuget
  3. Create the folder structure following MVC conventions (Controllers, Views, etc.)
  4. Add a web.config to get intellisense for your views
  5. Change “Custom Tool” to RazorGenerator on your views in order to precompile it

Then, decorate your actions as ChildActionOnly to behave like a widget:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
public class FinishOrderController : Controller
{
	private readonly IBus bus;

	public FinishOrderController(IBus bus)
	{
		this.bus = bus;
	}

	[ChildActionOnly]
	public ActionResult SubmitOrCancel()
	{
		ViewBag.OrderId = TheSession.OrderId;

		return PartialView();
	}

	[HttpPost]
	public ActionResult SubmitOrder()
	{
		var cmd = new SubmitOrder()
		{
			OrderId = TheSession.OrderId
		};

		this.bus.Send(cmd);

		return RedirectToAction("Processed", "Order");
	}

	[HttpPost]
	public ActionResult CancelOrder()
	{
		var cmd = new CancelOrder()
		{
			OrderId = TheSession.OrderId
		};

		this.bus.Send(cmd);

		return RedirectToAction("Cancelled", "Order");
	}
}

Take a look at the sample on github and let me know!!

https://github.com/mserrate/ui-composition/tree/master/UIComposition

Share Comments