A JavaScript framework for functions of state and action

Łukasz Makuch
Oct 12, 2018 · 4 min read
Image for post
Image for post

A function of state and action is a function that takes two arguments: state and action.

Functions like that are very common in the JavaScript ecosystem. For example, the reducer function used to build a Redux store is a function that takes the current state and some action and returns nothing but a new state. The render function from React can also be considered a function of state and an implicit RENDER action that returns a view and doesn't change the state. Thus, the fundamentals of React and Redux may be summed up as writing functions of state and action that return a new state and some result.

Image for post
Image for post
A function of state and action

Writing such functions is easy when the state is always interpreted in the same way. That is, when the reducer never checks the contents of the state before applying a transformation to it and the render function is free of conditionals. An example reducer could always append an item to an array, regardless its previous contents. An example render function could always map over some array items, even when there are none. However, transforming the state becomes a great challenge as soon as events from the past must be taken into account. It’s usually manifested in numerous Boolean flags and if statements or expressions.

Rosmaro is a JavaScript framework for writing functions of state and action. Instead of using just one model (like key-value pairs) to express the whole state, it draws a line between data-related state and behavior-related state by making use of finite state machines.

Image for post
Image for post
An automata-based dispatch mechanism

It leverages the power of the automata-based programming paradigm in order to remove the dependency of code on events from the past and provide a graph-based dispatch mechanism.

Image for post
Image for post
The Rosmaro Visual Editor

The graph file is a human readable JSON, thus it may be written by hand. However, it’s a lot more fun to use the Rosmaro visual editor that makes Rosmaro a visual programming framework.

Image for post
Image for post
Time travel debugging is a breeze

The framework is functional and stands on the shoulders of giants like Redux Saga and Redux, what gives access to all the tools we know and love. Time travel debugging is a breeze even when asynchronous actions are involved.

Image for post
Image for post
Cohesion

Keeping the reducer, the render function and the code that returns an effect close to each other makes the node code cohesive. Rosmaro doesn’t just output a bunch of data. It decides which function should handle the current state. Yet, thanks to the graph-based dispatch nodes are totally decoupled from each other and even from the past!

Image for post
Image for post
Hierarchical directory structure

The CLI tool can automatically associate the nodes you draw with the code you write. Additionally, if you decide to use it, it provides a nice hierarchical directory convention.

Image for post
Image for post
A lens

Selectors we know from Redux are a wonderful way to consume narrow pieces of the state. The code working with it can assume that it is going to be given exactly what it expects in the exact format it expects. Rosmaro takes it one step further and by utilising Ramda lenses allows not only to consume, but also alter a narrow slice of the data-related state.

Even though Rosmaro opts for the smallest number of building blocks, its state machines support multiple techniques of dealing with composition and state explosion, like subgraphs, node multiplication, orthogonal regions and entry points.

Image for post
Image for post
A To-Do application built with Rosmaro without any boolean values

Don’t fight with boolean flags! Draw changes of behavior!

Image for post
Image for post

Originally published at lukaszmakuch.pl.

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store