Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Asynchronous Web Interfaces

Alex MacCaw
July 07, 2012
2k

Asynchronous Web Interfaces

Oh how to lie, cheat and steal.

Alex MacCaw

July 07, 2012
Tweet

Transcript

  1. • Amazon: 100 ms of extra load time caused a

    1% drop in sales • Google: 500 ms of extra load time caused 20% fewer searches • Yahoo!: 400 ms of extra load time caused a 5–9% increase in the number of people who clicked “back” before the page even loaded
  2. $('body').dropArea(); $('body').bind('drop', function(e){ e.preventDefault(); e = e.originalEvent; var files =

    e.dataTransfer.files; for (var i=0; i < files.length; i++) { // Only upload images if (/image/.test(files[i].type)) { createAttachment(files[i]); } }; });
  3. $('body').dropArea(); $('body').bind('drop', function(e){ e.preventDefault(); e = e.originalEvent; var files =

    e.dataTransfer.files; for (var i=0; i < files.length; i++) { // Only upload images if (/image/.test(files[i].type)) { createAttachment(files[i]); } }; });
  4. $('body').dropArea(); $('body').bind('drop', function(e){ e.preventDefault(); e = e.originalEvent; var files =

    e.dataTransfer.files; for (var i=0; i < files.length; i++) { // Only upload images if (/image/.test(files[i].type)) { createAttachment(files[i]); } }; });
  5. var createAttachment = function(file) { var uid = [App.username, (new

    Date).getTime(), 'raw'].join('-'); var data = new FormData(); data.append('attachment[file]', file); data.append('attachment[uid]', uid); $.ajax({ url: '/attachments', data: data, cache: false, contentType: false, processData: false, type: 'POST', }) };
  6. var createAttachment = function(file) { var uid = [App.username, (new

    Date).getTime(), 'raw'].join('-'); var data = new FormData(); data.append('attachment[file]', file); data.append('attachment[uid]', uid); $.ajax({ url: '/attachments', data: data, cache: false, contentType: false, processData: false, type: 'POST', }) };
  7. var createAttachment = function(file) { var uid = [App.username, (new

    Date).getTime(), 'raw'].join('-'); var data = new FormData(); data.append('attachment[file]', file); data.append('attachment[uid]', uid); $.ajax({ url: '/attachments', data: data, cache: false, contentType: false, processData: false, type: 'POST', }) };
  8. var absText = '![' file.name + '](/attachments/' + uid +

    ')'; $('.edit').insertAtCaret(absText);
  9. Parts to an Async UI: • Render on the client

    • Store state & data on the client • Communicate with the server asynchronously
  10. { users: [ { name: "Johnny", assets: [ { name:

    "A file" }, ... ] }, ... ] }
  11. validate: function(){ if ( !this.name ) return 'name required'; if

    ( isNaN(parseInt(this.amount, 10)) ) return 'amount is invalid'; };
  12. get '/stream', :provides => 'text/event-stream' do stream :keep_open do |out|

    streams << out out.callback { streams.delete(out) } end end post '/' do msg = params[:msg] streams.each do |out| out << "data: #{msg}\n\n" end 204 end
  13. • Don’t block the interface • Async network requests •

    Store state on the client • Render views on the client • Intelligently preload data