A reactive frontend framework for JavaScript

import {Block, run} from 'cyclow'

const Counter = () => Block({
  on: {
    'in.init':  () => counter => 0,
    'dom.increment': () => counter => counter + 1,
    'dom.decrement': () => counter => counter - 1
  },
  view: counter => ({tag:'div#app', content: [
    {tag: 'div.counter', content: `${counter}`},
    {tag: 'div.buttons', content: [
      {tag: 'button', on: {click: 'decrement'}, content: '-'},
      {tag: 'button', on: {click: 'increment'}, content: '+'}
    ]}
  ]})
})

run(Counter, {target: 'app'})

Why another JavaScript framework?

Well, I really like Cycle.js. It's a nice reactive framework. But it's too pure for me.

With Cyclow, instead of thinking in a big global model and pure functions, you have to think in interconnected components with async inputs/outputs and their own state. It's something like an electronic circuit, where you can wire up electronic components. Cyclow aims to be more intuitive and easier while it's still reactive and quite declarative.

Reactive

Powered by Graflow, a graph stream library

Scalable

Build your apps connecting components

Fast

Powered by Snabbdom, a virtual DOM library with a great performance

Light

The whole framework weights less than 10 kb (minimified and gzipped)