Building Single Page Web Applications - JSDay 2013

Learn how to build modern browser-based apps that take advantage of stronger client platforms. You’ll discover the optimal design approach and the right techniques to develop and test SPA.

1. Building Single Page Applications Giulio Cesare Solaroli @gcsolaroli JSDay 2013 - Verona, May 16th
2. Once upon a time …
3. clipperz keep it to yourself
4. idea
5. idea «Safely store personal information, and make them easily accessible»
6. idea •Internet: safest place to store information •Browser: most convenient tool to access information •Cryptography: keep your data private
7. idea «Web application that process all data within the browser and only sends encrypted data to the server»
8. idea easy
9. idea ¿easy?
10. idea almost
12. Internet 2005 •GMail: April 1st, 2004 •AJAX: February 18th, 2005 •JQuery: January 2006 •“cloud”: weather only
13. constraints •Send only encrypted data to the server •verify the code before running it in the browser
14. solution
15. •Single file application •No dynamic code loading •Publicly reviewable code solution verify the code
19. cortesi/apphash A Firefox addon that that verifies pages against a known hash solution verify the code
20. ShareByHash «Any HTML tag that accepts a src= or href= attribute should also be allowed to take a hash= attribute. […]» Douglas Crockford on 03/25/2008 solution verify the code
21. •SRP: login without sharing credentials •PRNG: randomness is paramount for crypto •AES: “standard” cypher solution encrypted data
22. solution Zero knowledge Web Application
23. solution Zero knowledge Web Application Host Proof App
24. 1 solution Zero knowledge Web Application Host Proof App 1) Term suggested by Aldo Cortesi @cortesi
25. Single page application
26. Single file application
27. assembly
28. assembly dependency management
30. assembly build script ./scripts/build install debug --frontends beta gamma --backends java dev
31. assembly build script --frontends
36. assembly build script index_template.html
38. assembly build script index.html
40. assembly build script index_debug.html
42. assembly build script still missing: LESS processor
43. assembly build script --backends
44. code
45. code libraries
46. code events MochiKit.Signal
47. code templates YAHOO.ext.DomHelper
48. code async MochiKit.Async Clipperz.Async
49. code templates + events
50. code async
51. code async
52. tests
53. tests unit tests
54. tests components
55. tests dev-proxy
57. benefits
58. benefits download speed 1.5M index.html wat‽
59. benefits offline copy
61. Single page application
62. benefits •Dynamically loaded code •Server side templates
63. Q&A
64. THANKS! Giulio Cesare Solaroli @gcsolaroli