Reactive state machine

5 years ago, after searching for a suitable solution in RxJs, Beacon, ... etc.js, and stopping at flyd.js and wrote 4-6 projects using only three features from the stream , on , combine library . The rest was out of work, I wanted the bundle's lightness. So alak appeared, the first versions before 0.3 were only 20-30 lines and completely replaced flyd.



A year later, version 0.4 appeared already on 72 lines with pattern matching and mix (analogue of combine from flyd or computed from vue). After three years and dozens of projects - there was a feeling of goodness, share experience and release 1.0.







fantasy land



A sharp immersion in a person’s FRP all his life writing a classic OOP from a textbook can blow his head like a sharp immersion to a depth outside the bathyscaphe. It took me several weeks to get comfortable with the thought of functions instead of variables. Three months later, I was already fully admiring the reactive graph of the application - the program can be seen as veins or roots / branches of a tree. I think a simple interest in ancient languages ​​like Sanskrit and a love for the elven Quenia helped me. Blowing out your ears while holding your nose is a diver's basic skill. Successful classic OOP programmers will need to blow dust off their immersive knowledge skills. Nothing can help the experienced functionalists, but maybe they will help us in overcoming the existing forms and flare descriptions.



Unknown names



In philosophy, a monad is called the basic particle of the universe - a particle of God, a rather low-level concept. In the specifications of fantasy land , and in the general understanding of FRP, a monad is something higher-level that contains a functor inside. Wikipedia has two definitions of functors in the general and OCaml contexts. In the context of alak, the basic particle functor is a function containing data, when changed, the related functions / functors are updated. Everything is just like in excel tables.







In bacon.js, this is called “ atomic updates, ” RxJs doesn’t.



In alak, the code might look like this:



import A from 'alak' //    -    alak const userId = A.flow(); //         const followers = A.flow(); const profile = A.flow(); const tweets = A.flow(); //  userId -> profile  getProfile const getProfile = id => api.getProfile(id).then(profile); userId.up(getProfile); //   userId.up(id => { api.getFollowers(id).then(followers) api.getTweets(id).then(tweets); });
      
      





Run on codesandbox

When the userId changes, the followers , profile , tweets will reactively change.



Everything to start



All use of the Alak functor is based on the ability to think in flows, as in Go, but when reading from a channel, all the salt in constructing a graph with multiple connections / edges, listeners of a stream does not decrease from it.



Even in angular.js, this was enough to beautifully resolve the state of beyond complexity and complexity. The cross on angular2 for me was the imposition of RxJS with dubious reactivity. Seeing ReduX, I got the feeling of two steps back to the implementation of PureMVC .



In this post, I, like many modern speakers, urge you to drop procedural thinking, the burden of OOP patterns and start moving towards the human / literary code. Alak today is pretty good at declaratively describing the reactive count of a store.



We take view reactivity (jsx / svelte / html template engines) for granted.

- So why do we not have the same reactivity in the stores?



All Articles