This presentation talks about an Ekino (www.ekino.com) application made for Microsoft Techdays 2012 in Paris. This application is based on many new technologies : HTML5, CSS3, IndexedDB, File API, D'n'D, SPA, IE10.

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