Stapp
Stapp is a modular state and side-effects management tool based on rxjs and redux. The primary goal of Stapp is to provide an easy way to create simple, robust and reusable applications.
Includes:
- tools for creating reactive applications
- full compatibility with redux tooling (e.g. custom middlewares)
- SSR support
- bunch of drop-in modules which handle common scenarios
- React utilities (
stapp-react
andstapp-react-hooks
) - CLI helpers (
stapp-cli-tools
)
Table of contents
Installation
npm install stapp redux rxjs
# OR using stapp-cli-tools
stapp install stapp
Peer dependencies
- rxjs: >= 6
- redux: >= 4
Motivation
Here are some obvious statements:
- Small applications are easier to develop and maintain.
- Small blocks of business logic are easier to develop and maintain.
- Applications tend to become larger and harder to develop and maintain.
Solution: separating applications into small and independent microapps.
That's what Stapp for.
Stapp core concepts
- The application consists of several logical blocks, or "microapps";
- Microapp has its state and provides an API to change that state.
- Small blocks, called modules handle microapp state and logic.
- Modules are shape-agnostic, knows little to nothing about an app or other modules.
- Each module processes one task and nothing more.
- Microapps can run autonomously and independently from each other.
- Microapp is absolutely independent from the view layer.
Quick start
Here is a classic counter example:
// counterModule.js
import { createReducer, createEvent } from 'stapp'
/*
First, we create an events creators. As stated,
event creators create events. Modules can react
to events with reducers (used to change state)
and epics (used to dispatch other events asynchronously).
And yes, event creators are just action creators
with some additional helpers.
*/
const increase = createEvent('Increase')
const decrease = createEvent('Decrease')
/*
Classical reducer with additional helpers.
No string literal types. Ever.
*/
const counterReducer = createReducer(0)
.on(increase, (state) => state + 1)
.on(decrease, (state) => state - 1)
/*
Here is the module itself. This particular
module exposes only state and API. The application will
use provided state and bind provided event creators to
the application API.
*/
export const counterModule = {
name: 'counter',
state: {
counter: counterReducer
},
api: {
increase,
decrease
}
}
// app.js
import { createApp } from 'stapp'
import { counter } from './counterModule'
/*
And, finally, the application itself. CreateApp utilizes
provided modules to create an application state and
to build an application API and exposes state$ and api
properties.
*/
const app = createApp({
modules: [counter]
})
app // app itself is compatible with standard observables
.subscribe(state => console.log(`State: ${state}`))
// State: { counter: 0 }
app
.api // api is a set of provided functions binded to the state
.increase()
// State: { counter: 1 }
app
.api
.decrease()
// State: { counter: 0 }
// And hey, don't forget to check the redux devtools!
So, a microapp in Stapp terminology is an object, that has only a few fields:
subscribe(state => ...)
: method to observe state changesapi
: comprises methods to change the state
Modules
CreateApp itself doesn't do much work. It sets up a redux store, a couple of middlewares and returns a Stapp object. Without modules, application api will be empty, and its state will be a plain empty object. Like, forever.
So, what are the modules? A module is a place where all your magic should happen. A module has an ability to:
- create and handle portions of an app state;
- provide methods to a public application api;
- react to state changes;
- react to api calls.
A basic module is an object or a function, returning an object. You've already seen the basic example of a module. You may find other examples in the docs.
Stapp comes shipped with a bunch of modules covering most common problems (see Modules section in the docs).
Stapp CLI
stapp-cli
can be used to install and update stapp packages and theirs peer dependencies.
See more in the corresponding section of this documentation.
License
Copyright 2018 Tinkoff Bank
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.