Cycle.js: framework Javascript reattivo

Cycle.js è un framework Javascript in cui l'intera applicazione viene descritta da un'unica funzione principale che accetta in input lo stream di eventi dell'applicazione e lo produce in output aggiornato in tempo reale. Cycle.js è un framework, come React ed Angular, che è basato dunque sulla reattività dei flussi/stream di input/output.

L'astrazione del core di Cycle.js risiede nella funzione principale main(), dove gli input sono gli eventi di lettura (read effects/sources) provenienti dall'esterno e gli output (write effectts/sinks) sono eventi di scrittura che alterano lo stesso esterno. Gli eventi di input/output sono gestiti dai driver, plug-in che gestiscono tutte le funzionalità principali di un'applicazione moderna, come gli effetti DOM, le richieste HTTP e cosi via.

La struttura intera della funzione main() è costruita con il paradigma di programmazione Reactive Programming, un pattern dichiarativo che, come abbiamo visto, si occupa della gestione e "dell'ascolto" di uno stream di dati e della propagazione dei cambiamenti in tempo reale. Il flow di dati è facilmente visibile nel codice, rendendolo di facile lettura e pienamente tracciabile, grazie all'organizzazione dichiarativa del motore.

Cycle.js è definito dall'autore, Andrè Staltz, come un framework funzionale, perché produce codice facilmente prevedibile, e reattivo, perché produce codice separato ma modulare. Le applicazioni costruite con Cycle.js sono composte da funzioni, che accettano dati in input e producono risultati prevedibili in output. La struttura in stream permette di applicare il design pattern SoC (separazione delle problematiche), dato che tutti i cambiamenti dinamici che affliggono una parte di dati saranno co-localizzati e possibili solo dall'interno della stessa struttura.

Il seguente è uno snippet scritto con Cycle.js, che permette produrre un campo di input in cui sarà possibile digitare una stringa di testo, che a sua volta apparirà in tempo reale all'interno di un elemento contenitore:

import {run} from '@cycle/run'
import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom'
function main(sources) {
  const input$ = sources.DOM.select('.field').events('input')
  const name$ = input$.map(ev => ev.target.value).startWith('')
  const vdom$ = name$.map(name =>
    div([
      label('Name:'),
      input('.field', {attrs: {type: 'text'}}),
      hr(),
      h1('Hello ' + name),
    ])
  )
  return { DOM: vdom$ }
}
run(main, { DOM: makeDOMDriver('#app-container') })

Nel sito ufficiale del progetto sono disponibili sia la guida completa per iniziare a sviluppare in ambiente di produzione, sia le API complete del framework.

Via Cycle.js