example-driver.js

import { Subject } from 'rx';

/*
** A factory function which creates our driver
** @param { options } options that manipulate driver function
** @returns { Function } The actual driver function
*/
export default function makeHandshakeDriver( options ) {
  // create unchanging variables in factory function
  
  const { greeting, name } = options;
  
  /*
  ** The cycle driver function
  ** @params { source$ } an Rx.Observable providing data 
  **   to create side-effects provided by the driver 
  ** @returns Rx.Observable with data provided
  **   by the side-effect for your application 
  **   to interact with
  */
  return function handshakeDriver( source$ ) {
    /*
    ** All logic provided by the driver should be
    ** executed inside of the driver function.
    */
    
    /*
    ** You may be wondering what a Subject is
    ** It's the mutable version of an Observable.
    ** It's an Observer and and Observable
    ** You can programmaticaly (imperatively) provide 
    ** the data it will contain using onNext()
    ** as you will see below.
    ** subscribe() is also available the same as
    ** an observable.
    */
    const sink$ = new Subject();
    
    source$
      .susbcribe( ( data ) => {
        /*
        ** Subscription to Observables should only occur
        ** inside of a driver. Never inside of your application.
        */
        const meaningfulData = `${greeting}, ${data} ${name}`;
        console.log( meaningfulData ); // perform side-effect
        sink$.onNext( meaningfulData ); // Push data to sink$
      });
      
    /*
    ** The Observable returned by the driver is 
    ** the interface available to your appliction
    **
    ** This can be an Observable/Subject as shown here
    ** or an Object with methods that returns Observables
    ** as used in the DOM driver.
    */
    return sink$;
  }
  
}

example-main.js

import { run } from '@cycle/core';
import { makeHandshakeDriver } from 'example-driver';

/*
** The entry point to your entire application
** @params { sources } <Object>
**   sources is an object containing all sinks
**   returned from your defined drivers.
**   Available by the same name as you define them.
*/
function main( sources ) {
  const { Handshake } = sources; // Use some ES6 goodies for destructoring
  // Handshake is the handshakeDrivers returned sink$
  
  /*
  ** Here we can take the values
  ** returned the handshakeDriver
  ** and create a new piece of data
  */
  const message$ = Handshake
    .startWith( 'world from' )
    .map( message => {
      if ( message === 'Hello, world from Cycle') {
        return "you've created your first application using"
      }
    });
  
  /*
  ** sinks is an Object of Observables 
  ** returned as the sources to the drivers
  ** The naming of the keys should mirror those
  ** defined in your drivers Object below
  */
  const sinks = {
    Handshake: message$
    // Welcome to the future
  };
  
  return sinks;
  
}

// Options provided to the driver
const handshakeDriverOptions = {
  greeting: "Hello",
  name: "Cycle"
};

// Create your driver functions
const drivers = {
  Handshake: makeHandshakeDriver( handshakeDriverOptions )
};

run(main, drivers); 
// Let Cycle introduce you to fully reactive programming