Asynchronous Interfaces
Upcoming SlideShare
Loading in...5
×
 

Asynchronous Interfaces

on

  • 1,114 views

LRUG talk on using SuperApp with Rails - letting you create beautiful and fast web apps. Also includes a section on Juggernaut 2.

LRUG talk on using SuperApp with Rails - letting you create beautiful and fast web apps. Also includes a section on Juggernaut 2.

Statistics

Views

Total Views
1,114
Views on SlideShare
1,114
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Lot of JavaScript in this talk! Should really be speaking at LJUG. <br />
  • <br />
  • Google going to add it to pagerank. <br />
  • <br />
  • <br />
  • Group chat app. For developers. iPad. <br />
  • <br />
  • using MacRuby/WebKit <br />
  • What&#x2019;s great is this interface is realtime - synced between all clients. Even the file upload progress bar are synced - everybody can see when a file is being uploaded. <br />
  • You client should be able to function without a server. <br />
  • Just learn JavaScript - it&#x2019;s too important for you not too. <br />
  • <br />
  • Don&#x2019;t like any framework that abstracts away from the DOM. Want something like light, lik JQuery, componentized and flexible. <br /> <br />
  • Rather than give you a high level I&#x2019;m going to be as practical as possible, and go through various libraries I&#x2019;ve built <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Facebook search. Needs to be accessed locally so your UI is instantaneous. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Pass a function as the last argument to get a callback. <br />
  • We&#x2019;ve added class support to JavaScript, now we need to add &#x2018;require&#x2019; support. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • If you want to add other variables to the page, such as a user-id, such is the way to do it. <br />
  • So, now that I&#x2019;ve explained the various libraries and techniques I use, I want to tackle one of the major UI flaws - file uploading. Tangent. <br />
  • HTML5 lets you drag and drop files to upload them <br />
  • But the API requires you to implement at least 5 methods to get it work <br />
  • http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Webkit lets you upload files by pasting them too. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • No request/response model <br />
  • <br />
  • Created when I was 16 <br />
  • <br />
  • <br />
  • <br />
  • Group chat <br />
  • Single user chat <br />
  • One of the few pieces of Ruby in this talk <br /> Juggernaut Ruby client <br />
  • <br />
  • <br />
  • Just add a class observer <br />
  • <br />
  • Looking for consultancy <br />

Asynchronous Interfaces Asynchronous Interfaces Presentation Transcript

  • Asynchrono us Or, how to build a great web experience.
  • •Responsive • Non blocking • Realtime
  • Speed Is essential
  • Fred Wilson 10 golden rules for building successful web apps
  • Or Perceived Speed
  • Holla New name please?
  • Move logic and rendering
  • Forget RJS
  • Options?
  • SproutCore Cappuccino
  • Libraries, libraries, everywhere
  • SuperClass SuperApp SuperModel SuperConnect SuperRPC
  • SuperClass Very simple class abstraction & inheritance
  • var SuperApp = new SuperClass; SuperApp.include(SuperEvent); SuperApp.include({ init: function(name){ this.name = name; } }); var App = new SuperApp("name"); App.bind("load", function(){}); SuperApp.extend({ // Class methods })
  • SuperApp
  • SuperApp •State Machine • Global Events • Modular
  • (function($){ var state = App.state.add("loading"); state.afterEnter(function(){ App.log("Loaded state!") }); state.setup(function(){ App.log("Executed on first instantiation") }); state.load(function(){ App.log("Executed on page load") }); })(jQuery); App.state.change("loading")
  • 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>
  • SuperModel ORM
  • 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
  • <div> <ul id="channels"> <li>${name}</li> </ul> </div>
  • var element = $("#channels"); var connector = new SuperConnect(Channel, element);
  • SuperRPC JSON RPC
  • 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"}] );
  • user.saveRemote();
  • Sprockets
  • 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>
  • What else?
  • jquery.drop.j
  • 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; }));
  • FileReader
  • 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); }
  • File Uploads
  • jquery.upload.j
  • $.upload(file, options);
  • One more thing...
  • Realtime
  • Juggernaut
  • 4 Years Old
  • Juggernaut 2
  • What’s new? • WebSocket support • Built on Node.js • Horizontally scalable • PubSub model • Even more simple!
  • <script src="http://localhost:8080/application.js" type="text/ javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> jQuery(function($){ var jug = new Juggernaut; jug.subscribe("/chats", function(data){ // ETC }); }); </script>
  • <script src="http://localhost:8080/application.js" type="text/ javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> jQuery(function($){ var jug = new Juggernaut; jug.subscribe("/chats", function(data){ $("#chats").append($("<li />").text(data)); }); }); </script>
  • <script src="http://localhost:8080/application.js" type="text/ javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> jQuery(function($){ var jug = new Juggernaut; jug.subscribe("/chats/203942lkj34u0uasdf084", function(data){ $("#chats").append($("<li />").text(data)); }); }); </script>
  • Juggernaut.publish("/chats","Hello World!")
  • http://github.com/
  • @maccman