10. BACKBONE.JS
Client Side « MVP » Framework
REST / JSON
Server Side handle persistence (and
create id)
Models (& Collections) / Views /
Routes
Events
Backbone.Sync
Template is basically managed by
Underscore.js
11. BACKBONE.JS = RAW FRAMEWORK
No default View
No default Model
Router not handle views lifecycles
12. DEFAULT VIEW
DefaultView extend initialize to
remotely get and apply view template
Templates in lazyloading mode
HTML indented and easily editable by
IDE
Method to unload views
Disposing HTML in DOM
Unbind events
16. BACKBONE.JS + BACKBONE-
INDEXEDDB.JS
Backbone.Sync function overridded
Change Server Side storage by client
Side with HTML5 IndexedDB API
IndexedDB :
No relationnal local Database
Complex objects storage as JSON
Natively asynchronous
Fork backbone-indexeddb.js :
Now support chrome 17/
FF11/IE10DP&CP
Unit testing : jstestdriver + qunit
17. WORK WITH INDEXEDDB?
Developpement phase :
deletedb or fallback to random db name
at each F5
Control : Idbexplorer.htm
Using unit tests
No transactions or updating during
schema version upgrade
IndexedDB is roughly implemented
All objects types are not supported
depending on browsers
19. FILE API
File API usage context
Native drag’n’drop from desktop allowing
multiple file upload
Binary conversion of the uploaded File
object
Keeping model image content for persistent
storage
Goal
Treating large 8M files on client side
Store it in the right way
Using it in SVG or Canvas
20. HOW TO STORE IMAGES? NO KIDING
TO HEAVY FOR FIREBUG????
First try with base64 :
To Heavy in DOM and for Firebug!
Save in blob (FF11 & IE10 CP):
22. WHY CANVAS TO DEAL WITH STATIC
IMAGES?
SVG limitations
Unable to export a SVG filter into a Base
64 string usable in images tag
Photo filters are harder to calibrate in
SVG
Our solution
Using canvas to treat images px/px
Using Pixastic library (under MPL)
23. SUM UP
A lot of new things
Need to go fast ;)
No idea of the performance troubles
related to HTML5 new things
Small knowledges on big complex
HTML5 apps
Experimental brief
Experimental technologies
F*** experimental browser
24. A SMALL THING WE ARE PROUD OF
An app on the Win 8 Store
25. http://www.ekino.com/
@3k1n0
To see or read :
• « Slides, quelques démos et vidéos des sessions IE10/HTML5/CSS3 des Techdays
2012 » (fr)
David Roussethttp://blogs.msdn.com/b/davrous/archive/2012/02/20/slides-quelques-
d-233-mos-et-vid-233-os-des-sessions-ie10-html5-css3-des-techdays-2012.aspx
• Keynote « World of developers » including SnapyX demo (fr)
MS TechDays 2012 :
http://www.youtube.com/watch?v=r64B13fh9nc
• Vidéo de présentation de l’application :
http://www.youtube.com/watch?v=3winPXeMx_c
Frameworks and plugins Used :
• Backbone : here
• Backbone Relational : here
• Backbone Indexed DB
• Original : here
• Our fork : here
• Underscore : here
• Pixastic : here
• IdbExplorer : here
• Raphael Goetter CSS3 presentation : here