1. A HTML5 & IE10PROOF OF CONCEPT

2. Thibault Lanssade Lucas Lampietti @tibolan @lucaslampiettiApp DevelopperArchitect #JS#JS #HTML5 #CSS3Nicolas Massouh Damien Berseron@nicolasmassouh @hikkyu Motion developperMotion developper#CSS3 #HTML5#CSS3 #HTML5Florian HarmelLoc Calvy @florianharmel @loic_calvyCreative Technologist CTO #JS#JS 3. PLEASE, DRAW ME A SLIDOTRON 4. OUR ANSWER : SNAPYX 5. SNAPYX ?WHAT ?HOW ?HTML5 & CSS3A CLIENT SIDEAPPLICATION BACKBONE.JS &BACKBONE-RELATIONAL.JSSINGLE PAGE & BACKBONE-INDEXEDDB.JSAPPLICATIONAPP CACHE (CACHEOFFLINE USAGE MANIFEST)CLIENT SIDE STORAGEINDEXEDDBIMAGING TOOLFILE API / CANVAS 6. HTML5 / CSS3 : Project structureCLIENT 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 organisationSINGLE PAGE APPLICATION 10. BACKBONE.JS Client Side MVP Framework REST / JSON Server Side handle persistence (andcreate id) Models (& Collections) / Views /Routes Events Backbone.Sync Template is basically managed byUnderscore.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 templateTemplates in lazyloading modeHTML indented and easily editable byIDE Method to unload viewsDisposing HTML in DOMUnbind events 13. WATCH PERFORMANCES 14. ROUTER Adding a business layer to handle initsplashscreen No HTML5 deeplinking 15. IndexedDBCLIENT SIDE STORAGE 16. BACKBONE.JS + BACKBONE-INDEXEDDB.JS Backbone.Sync function overridded Change Server Side storage by clientSide with HTML5 IndexedDB API IndexedDB :No relationnal local DatabaseComplex objects storage as JSONNatively asynchronous Fork backbone-indexeddb.js :Now support chrome 17/ FF11/IE10DP&CPUnit testing : jstestdriver + qunit 17. WORK WITH INDEXEDDB? Developpement phase :deletedb or fallback to random db nameat each F5 Control : Idbexplorer.htm Using unit tests No transactions or updating duringschema version upgrade IndexedDB is roughly implementedAll objects types are not supporteddepending on browsers 18. FileAPILOCAL IMAGE UPLOAD +PREPARE FOR STORAGE 19. FILE API File API usage contextNative dragndrop from desktop allowing multiple file uploadBinary conversion of the uploaded File objectKeeping model image content for persistent storage GoalTreating large 8M files on client sideStore it in the right wayUsing it in SVG or Canvas 20. HOW TO STORE IMAGES? NO KIDINGTO HEAVY FOR FIREBUG???? First try with base64 : To Heavy in DOM and for Firebug! Save in blob (FF11 & IE10 CP): 21. Canvas / SVGLOCAL IMAGE TREATMENT 22. WHY CANVAS TO DEAL WITH STATICIMAGES? SVG limitationsUnable to export a SVG filter into a Base 64 string usable in images tagPhoto filters are harder to calibrate in SVG Our solutionUsing canvas to treat images px/pxUsing Pixastic library (under MPL) 23. SUM UP A lot of new things Need to go fast ;) No idea of the performance troublesrelated to HTML5 new things Small knowledges on big complexHTML5 apps Experimental brief Experimental technologies F*** experimental browser 24. A SMALL THING WE ARE PROUD OFAn app on the Win 8 Store 25. http://www.ekino.com/ @3k1n0To see or read : Slides, quelques dmos et vidos des sessions IE10/HTML5/CSS3 des Techdays2012 (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 Vido de prsentation de lapplication :http://www.youtube.com/watch?v=3winPXeMx_cFrameworks 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