Asynchronous Web Interfaces

Baf018e2cc4616e4776d323215c7136c?s=47 Alex MacCaw
July 07, 2012
1.9k

Asynchronous Web Interfaces

Oh how to lie, cheat and steal.

Baf018e2cc4616e4776d323215c7136c?s=128

Alex MacCaw

July 07, 2012
Tweet

Transcript

  1. 2.
  2. 4.
  3. 8.
  4. 9.

    • 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
  5. 15.
  6. 16.
  7. 20.
  8. 21.
  9. 22.
  10. 23.
  11. 24.
  12. 25.
  13. 26.
  14. 27.
  15. 28.
  16. 29.
  17. 30.
  18. 31.
  19. 32.
  20. 33.
  21. 36.
  22. 37.

    $('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]); } }; });
  23. 38.

    $('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]); } }; });
  24. 39.

    $('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]); } }; });
  25. 41.

    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', }) };
  26. 42.

    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', }) };
  27. 43.

    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', }) };
  28. 45.

    var absText = '![' file.name + '](/attachments/' + uid +

    ')'; $('.edit').insertAtCaret(absText);
  29. 46.

    Parts to an Async UI: • Render on the client

    • Store state & data on the client • Communicate with the server asynchronously
  30. 53.
  31. 56.
  32. 65.

    { users: [ { name: "Johnny", assets: [ { name:

    "A file" }, ... ] }, ... ] }
  33. 67.

    validate: function(){ if ( !this.name ) return 'name required'; if

    ( isNaN(parseInt(this.amount, 10)) ) return 'amount is invalid'; };
  34. 70.
  35. 74.

    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
  36. 86.

    • Don’t block the interface • Async network requests •

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