Offloading server work to the client side

A presentation of a few JavaScript libraries that help you do in the browser what you traditionally do on the server.

Transcript

1. Offloading server work to
   the client side
   Dimiter Petrov
   @crackofdusk
   21 November 2013
   

   View Slide

2. Background
   

   View Slide

3. Scoffing at JavaScript is easy
   

   View Slide

4. Scoffing at JavaScript is easy
   (Search for “wtfjs”)
   

   View Slide

5. Scoffing at JavaScript
   in the browser was easy
   

   View Slide

6. Scoffing at JavaScript
   in the browser was easy
   (Remember DHTML?)
   

   View Slide

7. Not anymore
   

   View Slide

8. In a browser near you
   • Typed arrays
   • Web workers
   • File API
   • Canvas
   • WebGL
   • Web Audio API
   (and many more)
   

   View Slide

9. pdf.js
   

   View Slide

10. pdf.js
    PDF reader in JavaScript
    

    View Slide

11. pdf.js
    PDF reader in JavaScript
    The default PDF reader in Firefox
    

    View Slide

12. Aurora.js
    JavaScript audio decoding framework
    

    View Slide

13. Aurora.js
    JavaScript audio decoding framework
    Codecs for MP3, AAC, FLAC, ALAC
    

    View Slide

14. Aurora.js
    JavaScript audio decoding framework
    Codecs for MP3, AAC, FLAC, ALAC
    In your browser, without any plugins
    

    View Slide

15. 3D games!
    (Also in your browser, without any plugins)
    

    View Slide

16. http://www.unrealengine.com/html5/
    

    View Slide

17. https://www.youtube.com/watch?v=BV32Cs_CMqo
    

    View Slide

18. “Yeah, okay. Show me something useful.”
    

    View Slide

19. Shifting responsibilities
    

    View Slide

20. PDF rendering
    

    View Slide

21. View Slide

22. View Slide

23. jsPDF
    A client-side PDF generator
    

    View Slide

24. jsPDF
    Good browser support
    (Firefox 3+, Chrome, Safari 3+, Opera, IE6+*)
    

    View Slide

25. jsPDF drawback
    You need to make sur you can run the
    same code on the server as a fallback
    

    View Slide

26. http://www.flickr.com/photos/mrcam/206628965/
    

    View Slide

27. zip.js
    A JavaScript library to zip and unzip files
    

    View Slide

28. zip.js
    Fully compatible with Chrome, Firefox,
    Safari 6, Internet Explorer 10
    Workaround for Safari 5 and IE9
    (Typed Array polyfill and disbled Web Workers)
    

    View Slide

29. File uploads
    

    View Slide

30. http://en.wikipedia.org/wiki/File:Occupy_Oakland_99_Percent_signs.jpg
    

    View Slide

31. Failed uploads of large files are no fun
    

    View Slide

32. What if you didn’t need to re-upload the
    entire file?
    

    View Slide

33. Resumable.js
    Simultaneous, stable, resumable uploads
    

    View Slide

34. Resumable.js
    Resists to network failure
    Resumes automatically when the
    connection is up again
    Allows pausing uploads
    

    View Slide

35. Resumable.js
    Requires:
    • the HTML 5 File API to split files into
    small pieces
    • server-side setup to put the file back
    together
    

    View Slide

36. Thank you!
    

    View Slide

37. pdf.js
    https://github.com/mozilla/pdf.js
    Aurora.js
    https://github.com/audiocogs/aurora.js/
    Unreal engine demo
    http://www.unrealengine.com/html5/
    jsPDF
    http://parall.ax/products/jspdf
    zip.js
    http://gildas-lormeau.github.io/zip.js/
    resumable.js
    http://resumablejs.com/
    

    View Slide