The document outlines the development of a client-side HTML5 application named Snapyx, which utilizes various technologies including Backbone.js and IndexedDB for storage and rendering. It discusses the project structure, including the use of CSS3 Grid layout and file APIs for image handling. Additionally, it highlights challenges in performance and browser support while referencing related resources and tools utilized in the project.

1. A HTML5 & IE10
PROOF OF CONCEPT

2. Thibault Lanssade Lucas Lampietti
@tibolan @lucaslampietti
App Developper Architect
#JS #JS
#HTML5 #CSS3
Nicolas Massouh Damien Berseron
@nicolasmassouh @hikkyu
Motion developper Motion developper
#CSS3 #HTML5 #CSS3 #HTML5
Florian Harmel Loïc Calvy
@florianharmel @loic_calvy
Creative Technologist CTO
#JS #JS

3. PLEASE, DRAW ME A SLIDOTRON

4. OUR ANSWER : SNAPYX

5. SNAPYX ?
WHAT ? HOW ?
HTML5 & CSS3
A CLIENT SIDE
APPLICATION BACKBONE.JS &
BACKBONE-RELATIONAL.JS
SINGLE PAGE & BACKBONE-
INDEXEDDB.JS
APPLICATION
APP CACHE (CACHE
OFFLINE USAGE – MANIFEST)
CLIENT SIDE STORAGE
INDEXEDDB
IMAGING TOOL FILE API / CANVAS

6. HTML5 / CSS3 : Project structure
CLIENT SIDE APPLICATION

7. SOME NEW THINGS IN HTML5

8. SOME NEW THINGS IN HTML5
.parent {
display: -ms-grid;
-ms-grid-columns:(220px 10px)[12];
-ms-grid-rows: 50px 220px 10px 220px 27px;
}
.bloc1 {
-ms-grid-column:1; -ms-grid-row:2;
height:220px; width:220px;
}
.bloc2 {
-ms-grid-column:1; -ms-grid-row:4;
height:220px; width:220px;
}
.bloc3 {
-ms-grid-column:3; -ms-grid-row:2; -ms-grid-row-span:3;
width:450px; height:450px;
}
.bloc4 {
-ms-grid-column:7; -ms-grid-row:2;
width:450px; height:220px;
}
.bloc5 {
-ms-grid-column:7; -ms-grid-row:4;
}
.bloc6 {
-ms-grid-column:9; -ms-grid-row:4;
}

9. Backbone.js project organisation
SINGLE PAGE APPLICATION

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

13. WATCH PERFORMANCES

14. ROUTER
 Adding a business layer to handle init
splashscreen
 No HTML5 deeplinking

15. IndexedDB
CLIENT SIDE STORAGE

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

18. FileAPI
LOCAL IMAGE UPLOAD +
PREPARE FOR STORAGE

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):

21. Canvas / SVG
LOCAL IMAGE TREATMENT

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