TodoMVC
This example is an implementation of the TodoMVC application with <ceb/>.
Introduction
The implementation embraces a kind of Hexagonal Architecture to provide a loose coupling integration between: the UI, the application logic (i.e. the model) and, the adapters (i.e. the persistence system ...). The communication between both concerns the UI and the application logic is managed by a Message/Event Driven approach which emphasizes the CQRS pattern.
Codebase
The codebase is composed of four Bounded Contexts organized in modules.
The Bounded Contexts
| Name | Description |
|---|---|
| Todo | Manage the todos of the list. |
| Filter | Manage the filtering of the list. |
| App | Manage the application lifecycle. |
| User Interface | Manage the User Interface. |
The Module Types
The modules are qualified by types. The purpose of the types is to organize the source code according to the Hexagonal Architecture.
Each bounded context may have modules of the following types: core, api, infra, ui and e2e.
The core modules contain the implementation of the Bounded Context's functionalities. They contain also the ports as defined by the Hexagonal Architecture.
The api modules provides resources to interact with the Bounded Context's functionalities. They are mainly composed of message definitions (commands, events, queries and results) and other data structures.
The infra modules contain the implementations of ports defined in the core modules, i.e. adapters as defined by the Hexagonal Architecture.
The ui modules contain resources handling the interactions with humans.
Finally, the e2e (i.e. end-to-end ) modules contain test suites which can be used by infra modules to validate the implementation of ports coming from core modules.
Todo
This bounded context manages the todos which composes the todo list.
Filter
This bounded context manages the filtering of the todo list.
App
This bounded context manages the application lifecycle. The main purpose of the Bounded Context is to produce and publish the application state.
User Interface
This bounded context manages the user interactions.
It is composed of two exclusive modules, ui-elements and ui-frp.
The first one provides an implementation based on Custom Elements and leveraging on the <ceb/> library exclusively.
The second one provides a Functional Reactive Programing implementation which leverages on RxJS for the functional domain and lit-html for the rendering side.
Collaboration between Bounded Contexts
AddTodo
The command AddTodo adds a new Todo to the todo list. The command is triggered by the User Interface then once the causality chain is done, the Integration Event TodosUpdated is published. Therefore, the UI can react.
The flow is similar for the ChangeFilter command.
