Cycle.js

an honestly reactive framework 

Why another JS framework?

Because this one is better!

It is different at least

We got used to MV*

Some of them provide kind of data streams

// Knockout.js

function MyViewModel() {
    this.produce = [ 'Apple', 'Banana', 'Celery', 'Corn', 'Orange', 'Spinach' ];
    this.selectedProduce = ko.observableArray([ 'Corn', 'Orange' ]);
    this.selectedAllProduce = ko.pureComputed({
        read: function () {
            return this.selectedProduce().length === this.produce.length;
        },
        write: function (value) {
            this.selectedProduce(value ? this.produce.slice(0) : []);
        },
        owner: this
    });
}

// Ampersand.js

var Person = AmpersandState.extend({
    props: {
        firstName: 'string',
        lastName: 'string'
    },
    session: {
        signedIn: ['boolean', true, false],
    },
    derived: {
        fullName: {
            deps: ['firstName', 'lastName'],
            fn: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    }
});

Then flux appeared

  • unidirectional data flow
  • inversion of control (reactive)
  • one-way data binding

But it's still far from ideal

A lot of imperative calls

  • this.setState()
  • Store.waitFor([...])
  • Actions.action(...)

What if we want something truly reactive?

Cycle.js

How human-computer interaction works?

© Andre Staltz

Computer translates user actions to view

© Andre Staltz

It takes input and produces output, like a...

Function!

© Andre Staltz

User is a function too

© Andre Staltz

© Andre Staltz

Output of user function is input of computer function

Output of computer function is input of user function

This is a cycle

© Andre Staltz

We can't program the user (yet)...

We can do it with computer

© Andre Staltz

Let's code!

Function is a main building block

function computer({ DOM }) {
    let initial$ = Rx.observable.just(0);
    



    




  





    return {





    };
}
function computer() {
    















    return {
        




    };
}
function computer({ DOM }) {
    let initial$ = Rx.observable.just(0);

    // intent
    let click$ = DOM.get('button', 'click');

    



    



  


    return {





    };
}
function computer({ DOM }) {
    let initial$ = Rx.observable.just(0);

    // intent
    let click$ = DOM.get('button', 'click');

    // model
    let counter$ = click$.merge(initial$).scan((counter) => counter + 1));

    // view
    let vtree$ = counter$.map((counter) => // view
        h('div', [
            h('span', `Counter value is: ${counter}`),
            h('button', 'Increase counter')
        ])
    );

    return {
        DOM: vtree$,
        



    };
}
function computer({ DOM, REST }) {
    let initial$ = Rx.observable.just(0);

    // intent
    let click$ = DOM.get('button', 'click');

    // model
    let counter$ = click$.merge(initial$).scan((counter) => counter + 1));

    // view
    let vtree$ = counter$.map((counter) => // view
        h('div', [
            h('span', `Counter value is: ${counter}`),
            h('button', 'Increase counter')
        ])
    );

    return {
        DOM: vtree$,
        REST: counter$.map((counter) => ({
            resource: 'increase-counter',
            method: 'UPDATE'
        })
    };
}
function computer({ DOM }) {
    let initial$ = Rx.observable.just(0);

    // intent
    let click$ = DOM.get('button', 'click');

    // model
    let counter$ = click$.merge(initial$).scan((counter) => counter + 1));


    



  


    return {





    };
}

And to wire things up...

/*
 * App definition function
 *          |                    drivers
 *          |                  /                   */
Cycle.run(computer, {/*       /                    */
    // DOM driver renders Virtual DOM to provided element, like BODY tag                 
    DOM: makeDomDriver(document.body),

    REST: makeRestDriver({
        root: '/rest',
        resources: {
            'increase-counter': '/counter/increase'
        }
    })
});
/*
 * App definition function
 *          |                    drivers
 *          |                  /                   */
Cycle.run(computer, {/*       /                    */
    // DOM driver renders Virtual DOM to provided element, like BODY tag                 
    DOM: makeDomDriver(document.body),
    // this one doesn't exits yet, you are welcome to make one!
    REST: makeRestDriver({
        root: '/rest',
        resources: {
            'increase-counter': '/counter/increase'
        }
    })
});
/*
 * App definition function
 *          |                    
 *          |                                      */
Cycle.run(computer, {                 

    DOM: makeDomDriver(document.body),

    REST: makeRestDriver({
        root: '/rest',
        resources: {
            'increase-counter': '/counter/increase'
        }
    })
});




Cycle.run(computer, {                 

    DOM: makeDomDriver(document.body),

    REST: makeRestDriver({
        root: '/rest',
        resources: {
            'increase-counter': '/counter/increase'
        }
    })
});

Componentize!

Function is main building block, right?

function computer({ DOM, REST }) {
    let click$ = DOM.get('button', 'click'); // intent
    let counter$ = click$.scan((counter) => counter + 1)); // model
    let vtree$ = counter$.map((counter) => // view

        // just extract counter UI definition to the function
        createCounter(counter)

    );

    return {
        DOM: vtree$,
        REST: counter$.map((counter) => ({
            resource: 'increase-counter',
            method: 'UPDATE'
        })
    };
}

function createCounter(counter) {
    return h('div', [
        h('span', `Counter value is: ${counter}`),
        h('button', 'Increase counter')
    ]);
}
function computer({ DOM, REST }) {
    let click$ = DOM.get('button', 'click'); // intent
    let counter$ = click$.scan((counter) => counter + 1)); // model
    let vtree$ = counter$.map((counter) => // view
        h('div', [
            h('span', `Counter value is: ${counter}`),
            h('button', 'Increase counter')
        ])
    );

    return {
        DOM: vtree$,
        REST: counter$.map((counter) => ({
            resource: 'increase-counter',
            method: 'UPDATE'
        })
    };
}

But what about logic?

Custom elements!

function computer({ DOM, REST }) {
    let initial$ = Rx.Observable.just(0);
    let click$ = DOM.get('button', 'click'); // intent
    let counter$ = click$.merge(initial$).scan((counter) => counter + 1));
    let vtree$ = counter$.map((counter) => // view
        h('div', [
            h('span', `Counter value is: ${counter}`),
            h('button', 'Increase counter')
        ])
    );

    return {
        DOM: vtree$,
        REST: counter$.map((counter) => ({
            resource: 'increase-counter',
            method: 'UPDATE'
        })
    };
}
function counterComponent({ DOM, props }) {
    let initial$ = props.get('value');
    let click$ = DOM.get('button', 'click'); // intent
    let counter$ = click$.merge(initial$).scan((counter) => counter + 1));
    let vtree$ = counter$.map((counter) => // view
        h('div', [
            h('span', `Counter value is: ${counter}`),
            h('button', 'Increase counter')
        ])
    );

    return {
        DOM: vtree$,
        events: {
            increase: counter$.map(() => true)
        }
    };
}
function computer({ DOM, REST }) {
    let increaseCounter$ = DOM.get('simple-counter', 'increase');
    let vtree$ = Rx.Observable.just(
        h('div', [
            h('h1', 'Simple counter example'),
            h('simple-counter', {
                value: 0
            })
        ])
    );

    return {
        DOM: vtree$,
        REST: increaseCounter$.map(() => ({
            resource: 'increase-counter',
            method: 'UPDATE'
        })
    };
}

Cycle.run(computer, {                 
    DOM: makeDomDriver(document.body, {
        'simple-counter': counterComponent
    }),

    REST: makeRestDriver({
        root: '/rest',
        resources: {
            'increase-counter': '/counter/increase'
        }
    })
});

Let's make things more complicated!

https://github.com/erykpiast/cyclejs-examples/blob/master/src/file-manager/

function computer(interactions) {
  let listId = uuid();
  let listClass = 'files';
  let listItemClass = listClass + '__item';
  let addNewClass = 'add-new';
  let addNewFormClass = addNewClass + '__form';
  let cancelAddingNewButtonClass = addNewClass + '__cancel';
  let navClass = 'nav';
  let buttonClass = navClass + '__button';
  let renameButtonClass = buttonClass + '--rename';
  let removeButtonClass = buttonClass + '--remove';
  let addNewButtonClass = buttonClass + '--add-new';
  let removalConfirmationClass = 'removal-confirmation';
  let removalConfirmationMessageClass = removalConfirmationClass + '__message';

  let model = createGroup({
    files$: (
      initialFiles$,
      selectedOptions$,
      addingNewConfirmed$,
      removalConfirmed$,
      fileNameChange$,
      files$
    ) =>
      Rx.Observable.merge(
        selectedOptions$
          .withLatestFrom(
            files$,
            (selectedFiles, files) =>
              files.map(({ fileName, uuid }) => ({
                fileName,
                uuid,
                selected: selectedFiles.indexOf(uuid) !== -1
              }))
          ),
        fileNameChange$
          .withLatestFrom(
            files$,
            (nameChange, files) =>
              files.map((file) =>
                nameChange.uuid === file.uuid ? ({
                  fileName: nameChange.fileName,
                  uuid: file.uuid,
                  selected: file.selected
                }) : file
              )
          ),
        removalConfirmed$
          .withLatestFrom(
            files$,
            (remove, files) =>
              files.filter(({ selected }) =>
                !selected
              )
          ),
        addingNewConfirmed$
          .withLatestFrom(
            files$,
            (newName, files) =>
              [{
                fileName: newName,
                uuid: uuid(),
                selected: true
              }].concat(files)
          ),
        initialFiles$
      ).distinctUntilChanged((files) =>
        JSON.stringify(files)
      ),
    anyFileSelected$: (files$) =>
      files$
        .map((files) => !!files.filter(({ selected }) => selected).length)
        .startWith(false)
        .distinctUntilChanged(),
    renameMode$: (renameButtonClick$) =>
      renameButtonClick$
        .scan(false, (previous) =>
          !previous
        )
        .startWith(false)
        .distinctUntilChanged(),
    addingNewMode$: (
      addNewButtonClick$,
      addingNewConfirmed$,
      addingNewCanceled$
    ) =>
      Rx.Observable.merge(
        Rx.Observable.merge(
          addingNewConfirmed$,
          addingNewCanceled$
        ).map(() => false),
        addNewButtonClick$.map(() => true)
      ).startWith(false)
      .distinctUntilChanged(),
    removingMode$: (
      removeButtonClick$,
      removalConfirmed$,
      removalCanceled$
    ) =>
      Rx.Observable.merge(
        Rx.Observable.merge(
          removalConfirmed$,
          removalCanceled$
        ).map(() => false),
        removeButtonClick$.map(() => true)
      ).startWith(false)
      .distinctUntilChanged()
  });
  model.inject({
      initialFiles$: Rx.Observable.just(
        Array.from(new Array(10), (value, index) =>
          `file${index+1}.${[ 'txt', 'doc', 'jpg' ][Math.floor(Math.random() * 3)]}`
        )
          .map((fileName) => ({
            fileName,
            uuid: uuid(),
            selected: false
          }))
      ),
      selectedOptions$: interactions.get(`.${listClass}`, 'selectedOptions')
        .map(({ detail }) => detail)
        .map((options) =>
          options.map((option) =>
            option.properties.id
          )
        ),
      renameButtonClick$: interactions.get(`.${renameButtonClass}`, 'click'),
      removeButtonClick$: interactions.get(`.${removeButtonClass}`, 'click'),
      addNewButtonClick$: interactions.get(`.${addNewButtonClass}`, 'click'),
      addingNewConfirmed$: interactions.get(`.${addNewFormClass}`, 'value')
        .map(({ detail }) => detail),
      addingNewCanceled$: interactions.get(`.${cancelAddingNewButtonClass}`, 'click'),
      removalConfirmed$: interactions.get(`.${removalConfirmationClass}`, 'confirm')
        .map(({ detail }) => detail)
        .share(),
      removalCanceled$: interactions.get(`.${removalConfirmationClass}`, 'cancel')
        .map(({ detail }) => detail),
      fileNameChange$: interactions.get(`.${listItemClass}`, 'name')
        .map(({ detail, target }) => ({
          uuid: target.id,
          fileName: detail
        }))
    },
    model
  );

  return {
    DOM: Rx.Observable.combineLatest(
      model.files$,
      model.renameMode$,
      model.addingNewMode$,
      model.anyFileSelected$,
      model.removalConfirmationVisible$,
      (files, renameMode, addingNewMode, anyFileSelected, removalConfirmationVisible) =>
        h('div', [
          h('div', {
            className: `${navClass}`
          }, [
            h('button', {
              className: `${renameButtonClass}`,
              disabled: !anyFileSelected || addingNewMode || removalConfirmationVisible
            }, renameMode ? 'Finish renaming' : 'Rename'),
            h('button', {
              className: `${removeButtonClass}`,
              disabled: renameMode || !anyFileSelected || addingNewMode || removalConfirmationVisible
            }, 'Remove'),
            h('button', {
              className: `${addNewButtonClass}`,
              disabled: renameMode || addingNewMode || removalConfirmationVisible
            }, 'New folder')
          ]),
          h('selectable-list', {
            disabled: renameMode || addingNewMode || removalConfirmationVisible,
            key: listId,
            className: `${listClass}`
          },  (addingNewMode ? [
              h('div', {
                selected: true
              }, h('div', {
                className: `${addNewClass}`
              }, [
                h('file-rename-form', {
                  className: `${addNewFormClass}`,
                  value: getNewFolderName(files),
                  key: 'adding-new-file-form'
                }),
                h('button', {
                  className: `${cancelAddingNewButtonClass}`
                }, 'Cancel')
              ]))
            ] : [ ]).concat(
            files.map(({ fileName, uuid, selected }) =>
              h('div', {
              // custom elements can't be embedded in other custom elements directly
              // until we fix it in the core, use plain DIV to wrap
                id: uuid,
                selected: selected
              },
                h('files-list-item', {
                  key: uuid,
                  id: uuid,
                  name: fileName,
                  renameMode: selected && renameMode,
                  className: `${listItemClass}`
                })
              )
            ))
          )
        ].concat(
          removalConfirmationVisible ? [ h('confirmation-popup', {
            className: `${removalConfirmationClass}`,
            key: 'files-removal-confirmation-popup',
            messages: {
              confirm: 'Delete',
              cancel: 'Cancel'
            }
          }, [
            h('p', {
              className: `${removalConfirmationMessageClass}`,
            }, dedent`Delete selected files?
            This operation cannot be undone!`),
            h('ul', files
              .filter(({ selected }) => selected)
              .map(({ fileName }) =>
                h('li', fileName)
              )
            )
          ])
        ] : [ ])
      )
    )
  };
}


let newFolderRegex = /^New folder(?: \((\d+)\))?$/;
function getNewFolderName(files) {
  let lastNewFolder = files.map(({ fileName }) =>
    fileName.match(newFolderRegex)
  ).filter((result) =>
    result
  ).map((result) =>
    'undefined' !== typeof result[1] ?
    parseInt(result[1], 10) :
    0
  ).sort((a, b) => b - a)[0];

  return 'New folder' + ('undefined' !== typeof lastNewFolder ? ` (${lastNewFolder + 1})` : '');
}

So much code!

Let's split it.

MVI

© Andre Staltz

© Andre Staltz

Intent

  • transformation from user action to semantic command (ex. "click on button" to "confirm files removal")
  • group of data streams needed to render the view
  • each model stream is combination of intent streams, initial data and another model streams

Model

View

  • definition of application UI for each possible state that can be expressed by taking values from model streams
function computer({ DOM }) {
  let intent = createIntent(DOM, classes);
  let model = createModel(initial, intent);
  let view = createView(model, classes);

  return {
     DOM: view.vtree$
  };
}

var initial = Array.from(new Array(10), (value, index) =>
  `file${index+1}.${[ 'txt', 'doc', 'jpg' ][Math.floor(Math.random() * 3)]}`
)
  .map((fileName) => ({
    fileName,
    uuid: uuid(),
    selected: false
  }));

var classes = {
  files: 'files',
  listItem: 'files__item',
  addNew: 'add-new',
  addNewForm: 'add-new__form',
  cancelAddingNewButton: 'add-new__cancel',
  nav: 'nav',
  button: 'nav__button',
  renameButton: 'nav__button--rename',
  removeButton: 'nav__button--remove',
  addNewButton: 'nav__button--add-new',
  removalConfirmation: 'removal-confirmation',
  removalConfirmationMessage: 'removal-confirmation__message'
};

Intent

function createIntent(DOM, classes) {
  return {
    renameButtonClick$: DOM.get(`.${classes.removeButton}`, 'click'),
    removeButtonClick$: DOM.get(`.${classes.removeButton}`, 'click'),
    addNewButtonClick$: DOM.get(`.${classes.addNewButton}`, 'click'),
    addingNewConfirmed$: DOM.get(`.${classes.addNewForm}`, 'value')
      .map(({ detail }) => detail),
    addingNewCanceled$: DOM.get(`.${classes.cancelAddingNewButton}`, 'click'),
    removalConfirmed$: DOM.get(`.${classes.removalConfirmation}`, 'confirm')
      .map(({ detail }) => detail)
      .share(),
    removalCanceled$: DOM.get(`.${classes.removalConfirmation}`, 'cancel')
      .map(({ detail }) => detail),
    fileNameChange$: DOM.get(`.${classes.listItem}`, 'name')
      .map(({ detail, target }) => ({
        uuid: target.id,
        fileName: detail
      })),
    selectedOptions$: DOM.get(`.${classes.list}`, 'selectedOptions')
      .map(({ detail }) => detail)
      .map((options) =>
        options.map((option) =>
          option.properties.id
        )
      ),
  };
}

Model

function createModel(initialFiles, intent) {
  let model = {
    files$: (
      initialFiles$,
      selectedOptions$,
      addingNewConfirmed$,
      removalConfirmed$,
      fileNameChange$,
      files$
    ) =>
      Rx.Observable.merge(
        selectedOptions$
          .withLatestFrom(
            files$,
            (selectedFiles, files) =>
              files.map(({ fileName, uuid }) => ({
                fileName,
                uuid,
                selected: selectedFiles.indexOf(uuid) !== -1
              }))
          ),
        fileNameChange$
          .withLatestFrom(
            files$,
            (nameChange, files) =>
              files.map((file) =>
                nameChange.uuid === file.uuid ? ({
                  fileName: nameChange.fileName,
                  uuid: file.uuid,
                  selected: file.selected
                }) : file
              )
          ),
        removalConfirmed$
          .withLatestFrom(
            files$,
            (remove, files) =>
              files.filter(({ selected }) =>
                !selected
              )
          ),
        addingNewConfirmed$
          .withLatestFrom(
            files$,
            (newName, files) =>
              [{
                fileName: newName,
                uuid: uuid(),
                selected: true
              }].concat(files)
          ),
        initialFiles$
      ).distinctUntilChanged((files) =>
        JSON.stringify(files)
      ),
    anyFileSelected$: (files$) =>
      files$
        .map((files) => !!files.filter(({ selected }) => selected).length)
        .startWith(false)
        .distinctUntilChanged(),
    renameMode$: (renameButtonClick$) =>
      renameButtonClick$
        .scan(false, (previous) =>
          !previous
        )
        .startWith(false)
        .distinctUntilChanged(),
    addingNewMode$: (
      addNewButtonClick$,
      addingNewConfirmed$,
      addingNewCanceled$
    ) =>
      Rx.Observable.merge(
        Rx.Observable.merge(
          addingNewConfirmed$,
          addingNewCanceled$
        ).map(() => false),
        addNewButtonClick$.map(() => true)
      ).startWith(false)
      .distinctUntilChanged(),
    removingMode$: (
      removeButtonClick$,
      removalConfirmed$,
      removalCanceled$
    ) =>
      Rx.Observable.merge(
        Rx.Observable.merge(
          removalConfirmed$,
          removalCanceled$
        ).map(() => false),
        removeButtonClick$.map(() => true)
      ).startWith(false)
      .distinctUntilChanged()
  };

  return createGroup(model).inject({
    initialFiles$: Rx.Observable.just(initialFiles)
  }, intent, model, );
}

View

function createView(model, classes) {
  let listId = uuid();

  return Rx.Observable.combineLatest(
    model.files$,
    model.renameMode$,
    model.addingNewMode$,
    model.anyFileSelected$,
    model.removingMode$, (
      files,
      renameMode,
      addingNewMode,
      anyFileSelected,
      removingMode
    ) =>
      h('div', [
        h('div', {
          className: `${classes.nav}`
        }, [
          h('button', {
            className: `${classes.renameButton}`,
            disabled: !anyFileSelected ||
              addingNewMode ||
              removingMode
          }, renameMode ? 'Finish renaming' : 'Rename'),
          h('button', {
            className: `${classes.removeButton}`,
            disabled: renameMode ||
              !anyFileSelected ||
              addingNewMode ||
              removingMode
          }, 'Remove'),
          h('button', {
            className: `${classes.addNewButton}`,
            disabled: renameMode ||
              addingNewMode ||
              removingMode
          }, 'New folder')
        ]),
        h('selectable-list', {
          disabled: renameMode ||
            addingNewMode ||
            removingMode,
          key: listId,
          className: `${classes.list}`
        }, (addingNewMode ? [
            h('div', {
              selected: true
            }, h('div', {
              className: `${classes.addNew}`
            }, [
              h('file-rename-form', {
                className: `${classes.addNewForm}`,
                value: getNewFolderName(files),
                key: 'adding-new-file-form'
              }),
              h('button', {
                className: `${classes.cancelAddingNewButton}`
              }, 'Cancel')
            ]))
          ] : [ ]).concat(
          files.map(({ fileName, uuid, selected }) =>
            h('div', {
              id: uuid,
              selected: selected
            },
              h('files-list-item', {
                key: uuid,
                id: uuid,
                name: fileName,
                renameMode: selected && renameMode,
                className: `${classes.listItem}`
              })
            )
          ))
        )
      ].concat(
        removingMode ? [ h('confirmation-popup', {
          className: `${classes.removalConfirmation}`,
          key: 'files-removal-confirmation-popup',
          messages: {
            confirm: 'Delete',
            cancel: 'Cancel'
          }
        }, [
          h('p', {
            className: `${classes.removalConfirmationMessage}`,
          }, dedent`Delete selected files?
          This operation cannot be undone!`),
          h('ul', files
            .filter(({ selected }) => selected)
            .map(({ fileName }) =>
              h('li', fileName)
            )
          )
        ])
      ] : [ ])
    )
  );
}


let newFolderRegex = /^New folder(?: \((\d+)\))?$/;
function getNewFolderName(files) {
  let lastNewFolder = files.map(({ fileName }) =>
    fileName.match(newFolderRegex)
  ).filter((result) =>
    result
  ).map((result) =>
    'undefined' !== typeof result[1] ?
    parseInt(result[1], 10) :
    0
  ).sort((a, b) => b - a)[0];

  return 'New folder' + ('undefined' !== typeof lastNewFolder ? ` (${lastNewFolder + 1})` : '');
}

Refactoring?

Functions, functions, functions...

View

function createView(model, classes) {
  let listId = uuid();

  function createNav(
    anyFileSelected,
    addingNewMode,
    removingMode,
    renameMode
  ) {
    return h('div', {
      className: `${classes.nav}`
    }, [
      h('button', {
        className: `${classes.renameButton}`,
        disabled: !anyFileSelected ||
            addingNewMode ||
            removingMode
      }, renameMode ? 'Finish renaming' : 'Rename'),
      h('button', {
        className: `${classes.removeButton}`,
        disabled: renameMode ||
            !anyFileSelected ||
            addingNewMode ||
            removingMode
      }, 'Remove'),
      h('button', {
        className: `${classes.addNewButton}`,
        disabled: renameMode ||
            addingNewMode ||
            removingMode
      }, 'New folder')
    ]);
  }

  
  function createNewRow(files) {
    return h('div', {
      selected: true
    }, h('div', {
      className: `${classes.addNew}`
    }, [
      h('file-rename-form', {
        className: `${classes.addNewForm}`,
        value: getNewFolderName(files),
        key: 'adding-new-file-form'
      }),
      h('button', {
        className: `${classes.cancelAddingNewButton}`
      }, 'Cancel')
    ]));
  }


  function createRemovalConfirmationPopup(files) {
    return h('confirmation-popup', {
      className: `${classes.removalConfirmation}`,
      key: 'files-removal-confirmation-popup',
      messages: {
        confirm: 'Delete',
        cancel: 'Cancel'
      }
    }, [
      h('p', {
        className: `${classes.removalConfirmationMessage}`,
      }, dedent`Delete selected files?
      This operation cannot be undone!`),
      h('ul', files
        .filter(({ selected }) => selected)
        .map(({ fileName }) =>
          h('li', fileName)
        )
      )
    ]);
  }


  return Rx.Observable.combineLatest(
    model.files$,
    model.renameMode$,
    model.addingNewMode$,
    model.anyFileSelected$,
    model.removingMode$, (
      files,
      renameMode,
      addingNewMode,
      anyFileSelected,
      removingMode
    ) =>
      h('div', [
        createNav(anyFileSelected, addingNewMode, removingMode, renameMode),
        h('selectable-list', {
          disabled: renameMode ||
            addingNewMode ||
            removingMode,
          key: listId,
          className: `${classes.list}`
        },
          (
            addingNewMode ? [ createNewRow(files) ] : []
          ).concat(
          files.map(({ fileName, uuid, selected }) =>
            h('div', {
              id: uuid,
              selected: selected
            },
              h('files-list-item', {
                key: uuid,
                id: uuid,
                name: fileName,
                renameMode: selected && renameMode,
                className: `${classes.listItem}`
              })
            )
          ))
        )
      ].concat(
        removingMode ? [ createRemovalConfirmationPopup(files) ] : []
      )
    )
  );
}


let newFolderRegex = /^New folder(?: \((\d+)\))?$/;
function getNewFolderName(files) {
  let lastNewFolder = files.map(({ fileName }) =>
    fileName.match(newFolderRegex)
  ).filter((result) =>
    result
  ).map((result) =>
    'undefined' !== typeof result[1] ?
    parseInt(result[1], 10) :
    0
  ).sort((a, b) => b - a)[0];

  return 'New folder' + ('undefined' !== typeof lastNewFolder ? ` (${lastNewFolder + 1})` : '');
}

Testing?

Functions, functions, functions...

test('Should use initial value', (done) => {

  let initialFiles = [
    { id: 'f1', fileName: 'file1.txt' },
    { id: 'f2', fileName: 'file2.doc' }
  ];

  // it's just a stateless function,
  // you can call it with everything you want
  model.files$(
    Rx.Observable.just(initialFiles),
    Rx.Observable.empty(),
    Rx.Observable.empty(),
    Rx.Observable.empty(),
    Rx.Observable.empty(),
    Rx.Observable.empty()
  ).subscribe((files) => {;    
    assert.deepEqual(
      files,
      initialFiles
    );

    done();
  });

});


test('Should add new file to the list', (done) => {

  let files = [
    { id: 'f1', fileName: 'file1.txt' },
    { id: 'f2', fileName: 'file2.doc' }
  ];

  model.files$(
    Rx.Observable.empty(),
    Rx.Observable.empty(),
    Rx.Observable.just(files),
    Rx.Observable.empty(),
    Rx.Observable.empty(),
    Rx.Observable.just('new file.jpg').delay(100)
  ).subscribe((files) => {;    
    assert.equal(files[0].fileName, 'new file.jpg');

    done();
  });

});

Even easier with Cycle.js Mock 

test('Should use initial value',
mock((callWithObservables, getValues) => {

  let initialFiles = [
    { id: 'f1', fileName: 'file1.txt' },
    { id: 'f2', fileName: 'file2.doc' }
  ];

  let files$ = callWithObservables(model.files$, {
    initialFiles$: initialFiles
  });

  let files = getValues(files$)[0];
      
  assert.deepEqual(
    files,
    initialFiles
  );

}));

test('Should add new file to the list',
mock((callWithObservables, getValues, onNext) => {

  let files$ = callWithObservables(model.files$, {
    files$: [
      { id: 'f1', fileName: 'file1.txt' },
      { id: 'f2', fileName: 'file2.doc' }
    ],
    addingNewConfirmed$: onNext('new file.jpg', 100)
  });

  let files = getValues(files$)[0];
      
  assert.equal(files[0].fileName, 'new file.jpg');

}));

Further reading

it's over


Thank you!

 Eryk Napierała

@UsabilityTools.com

We

are

hiring!

Awesomeness

RxJS

Tests

Third-party scripts

Angular

the latest browsers

only

Pixi.js

WebSockets

SASS

Startup

Cycle.js – An honestly reactive framework for web user interfaces

By Eryk Napierała

Made with Slides.com

Cycle.js – An honestly reactive framework for web user interfaces

  • 6,405

More from Eryk Napierała