Summary

This a frontend archtecture designed for most apps, technolgy stack agnostic. It’s Inspired by DDD and clean archtecture. The goal of it is “Code As Product”, codes should express the bussiness logic completely, even directly. The codes in core layer should be undertandable to domain experts or product manager.
You’d better to preview the baisc concepts of DDD and clean archtecture before read this, but this is not nessary, we only use few of them.
First, divide you product into domains, each domain consists of four layers: models, apps, adapters and cpts.
点击查看【processon】

App

App layer should be the implementer or translater of product’s use case diagram, every function/module in it should be one-to-one matched to the use case diagram.

Model

Model layer consists of entity and value-objects, is responsable for domain logic. Model layer is stable, rarely be modified.

Adapter

Adapter is responsable for to isolate technolgy and side effects from bussiness logic, in most scenarios, app layer read data from the in-direction adpters, handle the the data by model layer functions, and then write data to the out-direction adapters.

async function someUserCase() {
  const data = await inDirectionAdapter.get()
  const enity = model.create(data)
  outDirectionAdapter.set(enity)
}

UI

Ui s simplely as the consumer of app layer functions and store, it shoud be as simple as possiable, without any domain logic.

import app from 'app'
import store form 'adts/store'
export default () => <UI data={store} onClick={app.someUserCase} />

Demo

Next, let’s write a todo app under this archtecture, I will explain each layer of it in detail.

this is app for eveyone to manage their todos, people must be logged to use it. And only the administrator can delete the todo that not belong to him.

This is the source code