Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/krasimir/stent

Stent is combining the ideas of redux with the concept of state machines
https://github.com/krasimir/stent

finite machine mealy-machine state

Last synced: 5 days ago
JSON representation

Stent is combining the ideas of redux with the concept of state machines

Host: GitHub
URL: https://github.com/krasimir/stent
Owner: krasimir
License: mit
Created: 2017-08-16T14:04:15.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2020-08-24T05:29:23.000Z (over 4 years ago)
Last Synced: 2024-12-01T00:03:25.652Z (12 days ago)
Topics: finite, machine, mealy-machine, state
Language: JavaScript
Homepage:
Size: 732 KB
Stars: 688
Watchers: 18
Forks: 30
Open Issues: 9
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome - stent - Stent is combining the ideas of redux with the concept of state machines (JavaScript)
awesome-react-state-management - stent - Stent is combining the ideas of redux with the concept of state machines (List)

README

        ![Stent - brings the power of state machines to the web](./_logo/logo.gif)

Stent is combining the ideas of [Redux](http://redux.js.org/) with the concept of [state machines](https://en.wikipedia.org/wiki/Automata_theory).

![Travis](https://travis-ci.org/krasimir/stent.svg?branch=master)

[![npm downloads](https://img.shields.io/npm/dm/stent.svg?style=flat-square)](https://www.npmjs.com/package/stent)

Chat: https://gitter.im/stentjs

---

## A few words about state machines

State machine is a mathematical model of computation. It's an abstract concept where the machine may have different states but at a given time fulfills only one of them. It accepts input and based on that (plus its current state) transitions to another state. Isn't it familiar? Yes, it sounds like a front-end application. That's why this model/concept applies nicely to UI development.

*Disclaimer: there are different types of state machines. I think the one that makes sense for front-end development is [Mealy state machine](https://en.wikipedia.org/wiki/Mealy_machine).*

## Installation

The library is available as a [npm module](https://www.npmjs.com/package/stent) so `npm install stent` or `yarn add stent` will do the job. There's also a standalone version [here](./standalone) (only core functionalities) which you can directly add to your page.

## Documentaion

* [Getting started](./docs/getting-started.md)

* API

  * [``](./docs/state-object.md)

  * [`Machine.`](./docs/machine.md)

  * [``](./docs/action-handler.md)

  * [`connect` and `disconnect`](./docs/connect-and-disconnect.md)

  * [Middlewares](./docs/middlewares.md)

  * [React integration](./docs/react-integration.md)

* [examples](./docs/examples.md)

## Debugging apps made with Stent

Stent is supported by [Kuker](https://github.com/krasimir/kuker) Chrome extension. Just add the [Stent emitter](https://github.com/krasimir/kuker#integration-with-stent) to your app and open the [Kuker](https://github.com/krasimir/kuker) tab in Chrome's DevTools.

![Kuker](https://github.com/krasimir/kuker/raw/master/img/kuker-emitters/screenshot_stent.jpg)

## Must-read articles/resources

* [The Rise Of The State Machines](https://www.smashingmagazine.com/2018/01/rise-state-machines/)

* [You are managing state? Think twice.](http://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent) - an article explaining why finite state machines are important in the context of the UI development.

* [Getting from Redux to a state machine](http://krasimirtsonev.com/blog/article/getting-from-redux-to-state-machine-with-stent) - a tutorial that transforms a Redux app to an app using Stent

* [Robust React User Interfaces with Finite State Machines](https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/)

* [Mealy state machine](https://en.wikipedia.org/wiki/Mealy_machine)

## Other libraries dealing with state machines

* [xstate](https://github.com/davidkpiano/xstate)

* [machina](http://machina-js.org/)