Loading...

Building Real-Time Web Applications with

Clarence Leung (@ clarle)

Slides at clarle.github.com/yui-slides

Source code at the YUI Gallery

YUI App Framework

  • • A simple MVC-style framework built into YUI 3.5.1
  • • Write single-page JavaScript applications with models, model lists, routers, and view components
  • • Easy to pick up if you know Backbone
    var Todo = Y.Base.create('Todo', Y.Model, [], {
        
        // Toggle the completed state of the Todo.
        toggle: function () {
            this.save({completed: !this.get('completed')});
        },

        // Destroy this Todo and remove it from our sync layer.
        clear: function () {
            this.destroy({remove: true});
        }
    });

One API to Sync Them All

    var Todo = Y.Base.create('Todo', Y.Model, [Y.ModelSync.Local], {

        // Set the key in LocalStorage that we save this model type in
        root: 'todos',

        // Toggle the completed state of the Todo.
        toggle: function () {
            this.save({completed: !this.get('completed')});
        },

        // Destroy this Todo and remove it from our sync layer.
        clear: function () {
            this.destroy({remove: true});
        }
    });
  • • Sync your Models with a variety of different data sources
  • • All using the same API!
  • • First with LocalStorage...

One API to Sync Them All

    var Todo = Y.Base.create('Todo', Y.Model, [Y.ModelSync.REST], {

        // Set the URL that we map CRUD to REST to in our REST API.
        // In this case, we send our HTTP requests to '/todos/:id'
        root: 'todos',

        // Toggle the completed state of the Todo.
        toggle: function () {
            this.save({completed: !this.get('completed')});
        },

        // Destroy this Todo and remove it from our sync layer.
        clear: function () {
            this.destroy({remove: true});
        }
    });
  • • And now a REST API!

One API to Sync Them All

    var Todo = Y.Base.create('Todo', Y.Model, [Y.ModelSync.Socket], {

        // Our Model will now listen for Socket events with a 'todos/:id' header
        root: 'todos',

        // Toggle the completed state of the Todo.
        toggle: function () {
            this.save({completed: !this.get('completed')});
        },

        // Destroy this Todo and remove it from our sync layer.
        clear: function () {
            this.destroy({remove: true});
        }
    });
  • • And now even WebSockets, via Socket.IO

YUI Talk

  • • Chat application powered by the YUI App Framework
  • • Built in under 250 sloc and in action at tiny.cc/yuiapp