How to lie cheat and steal

Better browsers, more CPU cores, faster Javascript engines — performance on the client side has been improving rapidly over the past years. And with HTML5 web app developers now have more possibilities than ever to take advantage of all this power.

Time to move some of the heavy lifting from the server to the client. Time to “lie, cheat, and steal”, as Aaron Patterson put it in his RubyConf keynote.

Experimentation is the foundation for this talk, so put on your lab coats. You might not want to put every bit of code you’ll see into your production apps, but you may just get some new (and wild) ideas. Make the browser work for your (Rails) app!

Transcript

1. How to lie, cheat and steal
2. @polarblau
4. How to lie, cheat and steal
6. Ruby 2.0 Rails 4.0
9. http://blog.airbrake.io/guest-post/exploring-everything/
10. How does it work?
11. Not well …
13. ctx = $($canvas).get(0).getContext('2d') preview = $($preview).get(0) localMediaStream = null start = null
14. start: -> start = (new Date).getTime() started = true isStarted: -> started? and started stop: -> started = false isStopped: -> started == false
15. success = (stream) => preview.src = window.URL.createObjectURL(stream) localMediaStream = stream preview.addEventListener 'loadeddata', capture error = -> console.error arguments navigator.getUserMedia video: true, success, error
18. capture: => ctx.drawImage(preview, 0, 0) if localMediaStream? now = (new Date).getTime() pixels = ctx.getImageData(0, 0, WIDTH, HEIGHT).data timestamp = now - start createFrame(pixels, timestamp) requestAnimationFrame capture unless isStopped()
19. v [red, green, blue, alpha]
20. createFrame = (pixels, timestamp) -> intensity = 0 intensity += pixel for pixel in pixels by 4 when pixel? { intensity: intensity, timestamp: timestamp }
21. v [red, green, blue, alpha]
26. window.URL ?= window.webkitURL window.requestAnimationFrame ?= window.webkitRequestAnimationFrame navigator.getUserMedia ?= navigator.webkitGetUserMedia
28. Server Client Request Response
29. Server Request Response Browser
30. Server Request Response Browser
32. Can it run Crysis?
33. crack = (hash, maxLength = 10, charset) -> charset ?= ( 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + '0123456789' ).split('') stack = [''] for [1..maxLength] buffer = [] for item in stack for character in charset word = item + character if md5(word) == hash return word else buffer.push word stack = stack.concat buffer
34. hash = '3858f62230ac3c915f300c664312c63f' # "foobar" crack(hash)
35. def crack(hash, max_length = 10, charset = nil) charset ||= ( 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + '0123456789' ).split('') stack = [''] max_length.times do buffer = [] for item in stack for character in charset word = item + character if Digest::MD5.hexdigest(word) == hash return word else buffer << word end end end stack = stack + buffer end end
36. Javascript Ruby
37. v
38. Square one
40. Try to solve problems closer to the GUI
44. <input type='file' name='source' size='65' id='source' /> <div id="output"></div>
45. url = window.URL || window.webkitURL
46. # Creates a new object URL. window.URL.createObjectURL() # Revokes an object URL previously created window.URL.revokeObjectURL()
47. video = document.createElement 'video')
48. $('#source').on 'change', -> src = url.createObjectURL(@files[0]) video.src = src video.autoplay = false video.load()
49. THUMBNAILSIZE = 0.25 $(video).on 'canplaythrough', -> width = video.videoWidth * THUMBNAILSIZE height = video.videoHeight * THUMBNAILSIZE extractFrame(video, width, height)
50. step = 1 # extract a frame every on second extractFrame = (video, width, height, time = 0) -> video.currentTime = time $(video).one 'seeked', -> ctx = createAndInsertCanvas(width, height) ctx.drawImage(video, 0, 0, width, height) time += step if time < video.duration extractFrame(video, width, height, time) else $('#output') .show() .on('mousemove', scrub) .find('canvas:not(:last)') .hide()
51. $output = $('#output') outputOffset = $output.offset().left outputWidth = $output.width() pages = $output.find('canvas') pageCount = pages.length stepSize = outputWidth / (pageCount - 1) scrub = (e) -> page = Math.round((e.pageX - outputOffset) / stepSize) pages.hide().eq(page).show()
53. Potential issues —
54. Potential issues — Video format
55. Potential issues — Video format Canvas support
56. Potential issues — Video format Canvas support Javascript support
60. <img class="resize" alt="Strange things in space" src="space.jpg" data-width="200" data-height="100" />
61. width = $image.data('width') height = $image.data('height') src = $image.attr('src') $canvas = $('<canvas />') $canvas.attr(width: width, height: height) ctx = $canvas.get(0).getContext('2d') image = new Image() image.onload = -> ratio = if width > height then height / width else height / height [sWidth, sHeight] = if width > height [@width, @width * ratio] else [@height * ratio, @height] ctx.drawImage(@, 0, 0, sWidth, sHeight, 0, 0, width, height) $image.replaceWith $canvas
62. ctx.drawImage( image, # image object sx, # crop positition sy, # sWidth, # crop size sHeight, # dx, # target position dy, # dWidth, # target size dHeight # )
63. <img class="resize" alt="Strange things in space" src="space.jpg" data-width="200" data-height="100" data-zoom="false" data-gravity="sw" />
64. $('img.resize').resize() $('img.resize').resize(gravity: 'ne', zoom: false) # resize, crop if necessary to maintain aspect ratio # north-east gravity $('img.resize').resize('400x300#ne') # resize only if the image is smaller than this $('img.resize').resize('400x300<')
66. Potential issues —
67. Potential issues — Canvas support
68. Potential issues — Canvas support Javascript support
69. But, can it run Crysis?
70. ORANGE
71. v [red, green, blue, alpha]
72. createFrame = (pixels, timestamp) -> intensity = 0 intensity += pixel for pixel in pixels by 4 when pixel? { intensity: intensity, timestamp: timestamp } & requestAnimationFrame capture unless isStopped()
73. Web Workers
74. ORANGE
75. Orange = require 'orange'
76. set = new Orange.JobSet set.on 'complete', -> console.log 'All done'
77. job = new Orange.Job 'calculate_intensity', pixels : pixels timestamp: timestamp job.on 'complete', (data) => console.log data.intensity job.perform() # or run whole set at once set.push(job) set.perform()
78. self.onmessage = (event) -> [type, data] = [event.data.type, event.data.data] switch type when 'perform' intensity = 0 intensity += pixel for pixel in data.pixels by 4 ↵ when pixel? self.postMessage type: 'complete' data: intensity: intensity timestamp: data.timestamp
80. The Future —
81. The Future —
82. The Future — Worker API
83. The Future — Worker API Persistent jobs (?)
84. The Future — Worker API Persistent jobs (?) Worker class shim
85. The Future — Worker API Persistent jobs (?) Worker class shim Queue interface
86. The Future — Worker API Persistent jobs (?) Worker class shim Queue interface Custom events
87. The Future — Worker API Persistent jobs (?) Worker class shim Queue interface Custom events Job retry
88. The Future — Worker API Persistent jobs (?) Worker class shim Queue interface Custom events Job retry Error handling
89. Why not?
90. Fundamental lack of trust
91. window.onbeforeunload = -> 'Are you sure you want to leave?'
92. Local storage
94. Shims / Shivs https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-Polyfills
95. Dziękuję! Thanks!