Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SnapyX

3,143 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

SnapyX

  1. 1. A HTML5 & IE10PROOF OF CONCEPT
  2. 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_calvyCreative Technologist CTO #JS #JS
  3. 3. PLEASE, DRAW ME A SLIDOTRON
  4. 4. OUR ANSWER : SNAPYX
  5. 5. SNAPYX ?WHAT ? HOW ? HTML5 & CSS3A CLIENT SIDEAPPLICATION BACKBONE.JS & BACKBONE-RELATIONAL.JSSINGLE PAGE & BACKBONE- INDEXEDDB.JSAPPLICATION APP CACHE (CACHEOFFLINE USAGE – MANIFEST)CLIENT SIDE STORAGE INDEXEDDBIMAGING TOOL FILE API / CANVAS
  6. 6. HTML5 / CSS3 : Project structureCLIENT SIDE APPLICATION
  7. 7. SOME NEW THINGS IN HTML5
  8. 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. 9. Backbone.js project organisationSINGLE PAGE APPLICATION
  10. 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. 11. BACKBONE.JS = RAW FRAMEWORK No default View No default Model Router not handle views lifecycles
  12. 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. 13. WATCH PERFORMANCES
  14. 14. ROUTER Adding a business layer to handle init splashscreen No HTML5 deeplinking
  15. 15. IndexedDBCLIENT SIDE STORAGE
  16. 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. 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. 18. FileAPILOCAL IMAGE UPLOAD +PREPARE FOR STORAGE
  19. 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. 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. 21. Canvas / SVGLOCAL IMAGE TREATMENT
  22. 22. WHY CANVAS TO DEAL WITH STATICIMAGES? 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. 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. 24. A SMALL THING WE ARE PROUD OFAn app on the Win 8 Store
  25. 25. http://www.ekino.com/ @3k1n0To 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_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

×