j0lvera

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

So you're curious in learning this new thing called (Functional) Reactive Programming (FRP).

Learning it is hard, even harder by the lack of good material. When I started, I tried looking for tutorials. I found only a handful of practical guides, but they just scratched the surface and never tackled the challenge of building the whole architecture around it. Library documentations often don't help when you're trying to understand some function. I mean, honestly, look at this:

Rx.Observable.prototype.flatMapLatest(selector, [thisArg])

Projects each element of an observable sequence into a new sequence of observable sequences by incorporating the element's index and then transforms an observable sequence of observable sequences into an observable sequence producing values only from the most recent observable sequence.

j0lvera

var Events = {
    _topics: {},
    _subUid: -1,

    trigger: function(event, args) {
        if (!this._topics[event]) {
            return false;
        }

        var events = this._topics[event],

j0lvera

// It needs a lot more work
//
// http://singlepageappbook.com/collections3.html
// https://gist.github.com/g6scheme/4157554#controller-example-implementation
// http://alexatnet.com/articles/model-view-controller-mvc-javascript

var Collection = function(models, options) {
    _.extend(this, options);
    this.id = _.uniqueId('collection');
    var parts, selector, eventType;

j0lvera

// Stores items and notifies observers about changes.
//
//   ```
//   var model = new Model();
//   ```
//
// @class Model
var Model = function(attributes) {
    this.id = _.uniqueId('model');
    this.attributes = attributes || {};

j0lvera

function finder(records){
    // instance of when.defer method
    var deferred = when.defer();
    setTimeout(function () {
        records.push(3, 4);
        
        // save result
        deferred.resolve(records);
    }, 500);

j0lvera

// ## box sizing reset
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
.box-sizing() {
  html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }

j0lvera

// ## gradient generator

.gradient(@top-color, @bottom-color) {
    background: @top-color; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  @top-color 0%, @bottom-color 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-s

j0lvera

// Bone.js 0.0.1
//
// Experiment based on Backbone.js
// and highly inspired in https://gist.github.com/g6scheme/4157554

/*! Salt.js DOM Selector Lib. By @james2doyle */
window.$ = function(selector, context, undefined) {
  // an object containing the matching keys and native get commands
  var matches = {
    '#': 'getElementById',

j0lvera

// # Publish/Subscribe Pattern
//
// from: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript 
var pubsub = {};
 
(function(myObject) {
 
    // Storage for topics that can be broadcast 
    // or listened to
    var topics = {};

j0lvera

// validation mixin
var validation = {
  getDefaultProps: function () {
    return {
      validate: []
    }
  }
, hasErrors: function () {
    var errors = []