Almin.js

Flux/CQRS patterns for JavaScript application.

Write code thinking :)

Why?

Now, We can implement web applications with Flux or Redux etc...

But, I often hear a story that "Control flow of Flux/Redux is cool, but where to implement domain logic."

I think that people skip to Flux/Redux from MV* pattern.

MV* --> ( HOLE ) --> Flux/Redux(CQRS+EventSourcing)

Almin.js aim to fill the HOLE between MV* and Flux/Redux.

Features

Almin provides some patterns, is not a framework.

• Testable
• Scalable
• Responsibility Layers patten - well-known as DDD(Domain-Driven Design)/CQRS
• Support TypeScript and Flow

Almin is an implementation of Read/Write Stack Architecture that is well-known as Flux/CQRS.

• Almin.js | JavaScriptアーキテクチャ (Japanese)
• Patterns For Large-Scale JavaScript Application Architecture (Japanese)
  • 複雑なJavaScriptアプリケーションを考えながら作る話
  • azu/large-scale-javascript: 複雑なJavaScriptアプリケーションを作るために考えること

Installation

npm install almin

You'll also need a Promise polyfill for older browsers.

npm install es6-promise

Usage

📝 Please See https://almin.js.org/ for details.

• 📖 Documentation of Almin
• https://almin.js.org/

What is Almin?

Almin provides Flux/CQRS patterns for JavaScript applications.

It aims to create a scalable app.

The above figure is overview of Almin architecture that is similar to CQRS(Command Query Responsibility Segregation).

But, Almin is not a framework, provides only these components

• Dispatcher
• Context
• UseCase
• Store
• StoreGroup

Other components like Domain, Repository and State are written by you!

Of course, Almin help you to write other components.

Also, You may notice that these components are similar to Flux architecture.

Almin is also a flux implementation library. 👍

Almin	Flux	Redux
Dispatcher	Dispatcher	store.dispatch
Context	Container	Middleware/React Redux
UseCase	ActionCreator	Actions
Store	Store	Store
StoreGroup	Container	combineReducers
(State)	Store	Reducer
(Domain)
(Repository)

📝 State, Domain and Repository is optional on Almin, because the best for these components is vary based on application.

Almin has not a perfect solution for an application, but we can write code thinking.

We are going to learn two architectures(Flux/CQRS) using Almin :)

Table of Contents

Truly Table of Contents is here ⬅️

• Overview: Component of Almin
  • View
  • UseCase
  • Context
  • Store
• Tutorial
  • Creating Counter App
    • Apply Flux pattern to Almin
  • Creating Todo App
    • Apply CQRS pattern to Almin

Examples

• example/counter
  • Simple Counter example
  • It uses only state
• example/todomvc
  • TodoMVC implementation
  • DDD/CQRS
• example/svg-feeling
  • Separate Domain and Store/State
    • Two way update state.
  • How to implement 60 FPS application?
    • Component should implement shouldComponentUpdate()
• example/shopping-cart
  • Shopping Cart is a complex example.
  • This example is implemented of flux-comparison.
  • How to test?
  • How to implement domain layer?
• example/todomvc-flow
  • TodoMVC implementation
  • DDD/CQRS
  • With Flow type checker

Real Examples

Welcome to pull request!

• azu/presentation-annotator: viewing presentation and annotate.
• morpheme-match/website at master · azu/morpheme-match
• azu/faao: Faao is a GitHub issue/pull-request client on Electron. - Full TypeScript example

Packages

The Almin repo is managed as a monorepo; it's composed of npm packages.

Core

Package	Version	Description
almin		almin itself

Integrations

Package	Version	Description
almin-react-container		Integration with React

Utilities

Package	Version	Description
almin-logger		console logger
almin-devtools		browser debugging extension

Contributing

Please see CONTRIBUTING.md for more details.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT