xxiivv / riven Goto Github PK

Tiny Flow Based Framework

License: MIT License

HTML 17.43% JavaScript 70.03% CSS 12.54%

riven's Introduction

Ø(Riven)

Riven is a bare minimum flow-based programming framework (eg: math & conditional). Nodes have 2 ways of communicating with each other, one is a send/receive pattern, the other, a request/answer pattern. Despite its minimal toolset, it can be expanded into a complete web framework.

The Ø Selector

You are given a node selection tool Ø(), you can type the character with alt+shift+O(Alt +0216). If you are on Windows, or cannot easily type this character, try wrapping this function into a character of your choosing, like function R(a){ return Ø(a); }.

Create a node

Ø("template").create({x:2,y:2}) will create a template node at 2,2.

Select a node

Ø("template") will select the template node.

Connect a node

Ø("template").connect("parser") will connect the template node to the parser node.

You can also connect to multiple nodes at once with Ø("template").connect(["parser","console"]). The Ø("template").bind("parser") will create both a connection and a syphon between the 2 nodes.

Communication

.Send()

Ø("template").send("hello") will send "hello" to all receiving connected nodes.

.Receive()

Ø("template").receive(q) => {}, method is triggered by send().

.Request()

Ø("template").request("cake") will request "cake" from all answering connected nodes.

.Answer()

Ø("template").answer("cake"), method is triggered by request().

Extras

.Bang()

Ø("template").bang(), is a convenience method equivalent to .send(true), will send true to all receiving connected nodes.

.Signal()

Looks for a connected node(receiving/answering) with the parameter id, Ø("template").signal("parser").send("hello"). Will send "hello", directly to the parser node.

Mesh

You can group nodes into scopes with .mesh(pos,[nodes]) to visually groups the nodes into a single element that can be moved as one.

Ø("template").mesh({x:2,y:2},[
  Ø("parser").create({x:1,y:2}),
  Ø("header").create({x:2,y:3})
])

That's it!

This framework does nothing else, but it does this well.

Enjoy.

riven's People

Contributors

Stargazers

Watchers

riven's Issues

Bidirectional connections displayed unclearly.

By specification, system that im trying to build using Riven requires p2p connection between nodes that expects every node to be server and client. Currently its possible for Riven to make such connections but they are not drawn clearly.

Graph Visualisation changed for worse.

So I was given a presentation on Redux, with a pivotal slide dealing with the differences between Redux and streams, or request/response vs fire/forget respectively - which are the two fundamental paradigms that constitute the axes of a Riven node.

And I thought "What a better way to demonstrate how polar these two are than showing the web example graph from Riven", but to my surprise the graph has changed and is now WELL less clear than what it was a month ago.

Also, you can't scroll horizontally, which means that with my laptop you can't show the lot.

And there's no way to see the old graph.

Is this WIP? The old graph was way better! The old graph was very much like this, whereas the new one look more like that.

Riven with JSX-enabled view (idea)

Would be kinda like CycleJS, Hyperapp, React with Redux, etc. but cooler!

Black fill in routes.

Connection between nodes called routes in code depend on browser default behaviour of drawing paths.
On some browsers default behaviour is filling paths resulting in black background as presented in here.

Publishing a NPM package for Riven

This would make easier to work with Riven in environments like Webpack or even Node.

Examples work in rawgit, please link!

Ø Selector

On Windows, there's no easy way to produce "Ø" with "alt+shift+O", instead it's Alt +0216 (on the number pad). This is also providing that the keyboard you're using makes this easy if you don't have a number pad. I don't know how this affects other distributions off the top of my head but suspect it might.

As a solution/work-around, renaming all instances of "Ø" with "rvn" in riven.js and any documents calling it works just as well. It may just be me, but using special characters for selectors or variable names is slightly annoying, otherwise this is pretty solid. 👍