SnapyX - ParisJS

A HTML5 & IE10
PROOF OF CONCEPT

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

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

HTML5 / CSS3 : Project structure

CLIENT SIDE APPLICATION

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 {
height:220px; width:220px;
}
.bloc3 {
-ms-grid-column:3; -ms-grid-row:2; -ms-grid-row-span:3;
width:450px; height:450px;
}
.bloc4 {
width:450px; height:220px;
}
.bloc5 {
}
.bloc6 {
}

Backbone.js project organisation

SINGLE PAGE APPLICATION

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

BACKBONE.JS = RAW FRAMEWORK

 No default View
 No default Model
 Router not handle views lifecycles

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

ROUTER

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

IndexedDB

CLIENT SIDE STORAGE

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

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

FileAPI

LOCAL IMAGE UPLOAD +
PREPARE FOR STORAGE

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

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

Canvas / SVG

LOCAL IMAGE TREATMENT

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)

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

A SMALL THING WE ARE PROUD OF

An app on the Win 8 Store

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

SnapyX - ParisJS

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to SnapyX - ParisJS (20)

Recently uploaded (20)

SnapyX - ParisJS