Layered Architecture based React application structure sample.
- multi-package: punctuate Layered Architecture with monorepo.
- single-package: punctuate Layered Architecture with plain directory.
This sample uses monorepo with lerna.
| package | description |
|---|---|
| presentation-redux | create-react-app based TypeScript Web App |
| application | Application Service (No Redux Dependencies) |
| domain | Type Definition & Behavior Functions (No Redux Dependencies) |
| infrastructure | Dummy Networking (No Redux Dependencies) |
Monorepo structure with lerna allows us to build dependency graph between packages. domain is the most pure package, and presentation is most complex package. If you build all packages, lerna considers dependency. lerna run *** command executes commands in order of dependencies.
At first, install with yarn.
$ yarn install
next, build TypeScript in the infrastructure, domain, application-redux.
$ yarn build:tsc
finally, start webapp in the presentation-redux.
$ cd packages/presentation-redux
$ yarn start
- TodoApplicationService
- ActionDispatcher Pattern based Application Service.
- ducks/todoListState
- Messaging & State handling between Application Service <=> Presentation
The single-package punctuate Layered Architecture with plain directory.
This is dangerous structure because domain code can call presentation code.
$ yarn install
$ yarn start
That's all!
Welcome!
