Asynchronous Interfaces

Asynchrono
us
Or, how to build a great web experience.

•Responsive
• Non blocking
• Realtime

Fred Wilson
10 golden rules for building successful web apps

Libraries,
libraries,
everywhere

SuperClass
SuperApp
SuperModel
SuperConnect
SuperRPC

SuperClass
Very simple class abstraction & inheritance

SuperApp

•State Machine
• Global Events
• Modular

SuperApp.Vi
Simple view manager

App.state.view = new SuperApp.View($("#views"));

<div id="views">
<div class="loading" data-view="loading">
<h2>Loading...</h2>
</div>

<div class="channel" data-view="channel">
...
</div>
</div>

var Channel = SuperModel.setup("Channel");
Channel.attributes = ["name"];

var channel = new Channel;
channel.name = "Foo"
channel.save();

Preload data
Instant access

class RiaController < ApplicationController
before_filter :require_user
respond_to :html, :json
layout false

def index
end

def loader
@activity = current_user.activity
@channel_activity = current_user.channel_activity
@channels = current_user.channels
@users = [current_user]

render :json => {
:activity => @activity,
:channel_activity => @channel_activity,
:channels => @channels,
:users => @users
}
end
end

jQuery(function($){
App.trigger("loading");

var loader = function(data){
for (var name in data) {
var model = $.constantize($.classify(name));
model.populate(data[name]);
}

App.state.change("loaded");
};

$.ajax({
url: "/ria/loader",
dataType: "json",
cache: false,
success: loader
});
});

SuperConne
Templating & binding

var element = $("#channels");
var connector = new SuperConnect(Channel, element);

class RiaController < ApplicationController
before_filter :require_user
respond_to :html, :json

include SuperRPC::Controller
end

class ChannelActivity < SuperModel::Base
include SuperRPC::Model
end

SuperRPC.invoke(
"ChannelActivity",
"update",
[1, {name: "New name"}]
);

app
javascripts
application.js
lib
models
channel.js
user.js
states
channel.js
search.js

gem "rack-sprockets"
gem "yui-compressor"

config.middleware.use "Rack::Sprockets",
:load_path => ["app/javascripts/", "app/javascripts/lib/"]

//= require <jquery>

//= require <rails>
//= require <rails.application>

this.view.dropArea();

this.view.bind("drop", this.proxy(function(e){
e.stopPropagation();
e.preventDefault();

var files = e.originalEvent.dataTransfer.files;
for ( var i = 0; i < files.length; i++)
this.createAsset(files[i]);

return false;
}));

if (typeof FileReader != "undefined" &&
file.type.match(/image.*/) &&
file.size < 50000000) {

var reader = new FileReader();
reader.onload = function(e) {
img.attr({src: e.target.result});
};
reader.readAsDataURL(file);
}

What’s new?

• WebSocket support
• Built on Node.js
• Horizontally scalable
• PubSub model
• Even more simple!

jQuery(function($){
jug.subscribe("/chats", function(data){
$("#chats").append($("<li />").text(data));
});
});
</script>

jQuery(function($){
jug.subscribe("/chats/203942lkj34u0uasdf084", function(data){
$("#chats").append($("<li />").text(data));
});
});
</script>

Juggernaut.publish("/chats","Hello World!")

http://github.com/

Asynchronous Interfaces

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Asynchronous Interfaces (20)

Asynchronous Interfaces

Editor's Notes