Home

Awesome

NPM version Downloads

Cycle Grid

A driver providing "grid" for communcation between multiple "main cycle" components keeping them loosely coupled accross the application. Designed for creating an arhitecture (primarily for large-scale apps) where components could be separated to work “in parallel” rather than using them as children of a single main function.

This grid can be used as an API (in form of streams) for all "main cycle" components inside the application.

Why would I do that?

The idea of this concept is not to remove all parent-child relationships inside one cycle component, but if a child is not essential for parent to function and could be reused or removed it should then separated as a "indepented cycle"

For more info on the concept, check: Creating a Scalable JavaScript Application with Cycle.js

and bear in mind that this is primarily designed for creating large-scale applications.

Installation

npm install cycle-grid-driver

Usage

Basics:

import xs from 'xstream';
import {run} from '@cycle/xstream-run';
import {makeGridDriver} from 'cycle-grid-driver';

function main({ grid }) {
  // using stream "state" from grid
  const state$ = grid.get('state');

  // ... (magic occurs)
  const actions$ = somehow(); 

  return {
    grid: grid.send(actions$).with({ type: 'actions' })
      // .send(somethingElse$).with({type: 'something'})
      // .send(anotherOne$).with({label: 'another'})
  }
}

const drivers = {
  grid: makeGridDriver()
}

run(main, drivers);

As you can see, you can use grid to send or recieve streams. Suppose then, there are multiple components sending actions$ (labeling it using "with" object) from which we need to create state$

import xs from 'xstream';
import flattenConcurrently from 'xstream/extra/flattenConcurrently';
import {run} from '@cycle/xstream-run';
import {makeGridDriver} from 'cycle-grid-driver';

function main({ grid }) {
  // using grids "stream of streams"
  const allActions$ = grid.mainStream()
    .filter(stream => stream.with.group == 'actions')
    .compose(flattenConcurrently);

  const initialData$ = grid.mainStream()
    .filter(stream => stream.with.localStorage == true)
    .compose(flattenConcurrently);

  // ... (magic occurs)
  const state$ = somehowFrom(allActions$, initialData$); 

  return {
    grid: grid.register(state$).as('state')
      // .register(magicStream$).as('magic')
      // .send(sendAsWell$).with({ label: 'me'})
  }
}

const drivers = {
  grid: makeGridDriver()
}

run(main, drivers);

Multiple grid drivers

If for some reason you need to separate your streams in different grids you can do that by creating multiple grid instances. makeGridDriver() is equivalent to makeGridDriver('default') and it returns a 'default' grid instance so for creating another one just use a different id.

API