SnapyX

2,201 views
2,081 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,201
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×