SlideShare a Scribd company logo
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
PLEASE, DRAW ME A SLIDOTRON
OUR ANSWER : SNAPYX

Recommended for you

The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014

The document discusses the MEAN stack, which is a full-stack JavaScript solution for building web applications using MongoDB, Express, AngularJS, and Node.js. It describes each component, how they work together, typical application architecture, and example applications that are well-suited for the MEAN stack. Additional tools like NPM, Bower, Grunt, Yeoman, and sample generators are also covered.

mean stackangularjsnodejs
MVP with GWT and GWTP
MVP with GWT and GWTPMVP with GWT and GWTP
MVP with GWT and GWTP

ArcBees is a company founded by Christian Goudreau and Philippe Beaudoin that develops two open source projects: GWT Platform (GWTP) and Jukito. GWTP is a framework that uses the Model-View-Presenter pattern to build complex browser-based applications in Java that get compiled to JavaScript. It allows for loosely coupled and testable code and includes features like MVP lifecycle functions, activities and places for navigation, and support for advanced topics like security and client-server communications. GWTP and GWT are best suited for structured enterprise web applications rather than small sites or functional programming projects.

gwtgwtpgoogle
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018

Gutenberg is coming, and it’s bringing a lot of changes to how WordPress themes and plugins will be developed. What does that mean for a a grumpy, old developer like me? Well if you want to keep working in WordPress, it means it’s time to buckle down and lean something new. In this session we’ll cover some of the changes Gutenberg means for developers, and all the new tools, languages and libraries you need to to learn to start to develop with Gutenberg.

wordpressgutenbergblock editor
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
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;
               }

Recommended for you

JS digest. May 2017
JS digest. May 2017JS digest. May 2017
JS digest. May 2017

The document summarizes updates from April and May regarding browsers, libraries, and developer tools. It mentions that React 15.5.0 introduced new packages and deprecations, PhantomJS is being replaced by headless Chrome, and new versions of Edge, Firefox, and Chrome were released. It also discusses emerging standards like native ES modules and popular libraries like HR.js, React VR, and stylelint.

jsreact nativefirefox
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React

This document provides an introduction to ReactJS, including: - ReactJS was developed by Facebook in 2013 and is currently at version 15.3.2; it is a view library rather than a framework - Reasons for choosing ReactJS include faster websites, reusable views, a large community, ease of writing tests, and integration with other frameworks - The document discusses Webpack, JSX, ES6 features, and Redux, which are important technologies to learn when using ReactJS

reactjsreact
Introduction à GWT
Introduction à GWTIntroduction à GWT
Introduction à GWT

Introduction à GWT Conference by Christian Goudreau, at WAQ 2015. Christian Goudreau is BEE-EO AND CO-FOUNDER at Arcbees. You can follow Christian on Twitter : @imchrisgoudreau Christian Goudreau, ArcBees’ CEO, is a self-made entrepreneur with significant experience in project management. Christian has been managing major software development projects since his early teens, and therefore has quickly learned how to juggle heavy responsibilities and deliver. A talented guest speaker, recognized expert in software architecture and developer tools, his services are much sought-after, not only in Quebec but also in Europe and the United States, where he takes great pleasure in sharing his technical knowledge and his passion for business. Christian Goudreau was named Young Business Person of the Year, technology & research division, at the Jeune personnalité d’affaires Banque Nationale competition organized by the Jeune chambre de commerce de Québec (JCCQ), in 2012. He was also awarded the Creativity and Innovation Prize, and the Grand Prize at the 2013 Annual LOJIQ awards (the Quebec International Youth Offices).

#arcbees #gwt #gquery #gwtp #waq #waq2105
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

Recommended for you

Firebase and AngularJS
Firebase and AngularJSFirebase and AngularJS
Firebase and AngularJS

This document discusses using Firebase as a backend solution for AngularJS applications. Firebase is a realtime database that allows storing and syncing data between clients and servers. It offers features like offline support, flexible data storage using JSON, and authentication integration. The document provides links to Firebase documentation on its REST API, integrations with other services, security rules, and tutorials for using Firebase with AngularJS applications.

hookieangularjsfirebase
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014

Conquer Architectural Challenges with End-to-End JavaScript ● Decrease complexity and reduce your time-to-market; ● Show a powerful a NoSQL business object datastore; ● Build hybrid or native mobile-apps with an API-centric backend. ● Play with third-party libraries in reusable drag-and-drop widgets; ● Use our AngularJS connector to develop the front end

javascriptnosqlmvp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCampHow to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp

How many times have you ever heard? "Choose the right tool for the job" or "When all you have is a hammer, everything looks like a nail." The Drupal community is embracing the "Get off the island" mantra. Modernizing Drupal was the goal of the latest Drupal 8 release, but technology moves faster than the awesome community could improve our beloved platform. Gatsby is taking the world by storm and the JAMstack is here to stay. Come to this session, to learn what can we do to keep Drupal relevant and this new era.

drupaljsonapi
WATCH PERFORMANCES
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

Recommended for you

RIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoRIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in Nuxeo

RIA (Rich Internet Applications), provide new and richer user experience for web applications. Several approaches are proposed by various vendors and open source projects, and Nuxeo is mostly agnostic in this respect, by providing appropriate data to RIA front-ends using simple protocols such as JSON. This talk will present how two RIA technologies have been recently used on Nuxeo projects, Adobe’s Flex and Google’s GWT (Google Web Toolkit).

opensourcejavaria
JS digest, March 2017
JS digest, March 2017JS digest, March 2017
JS digest, March 2017

JavaScript news, March '17 edition: new libs, new releases (Angular 4, Next.js 2.0 is out), IDE news, browser news ( Safari 10.1 out, Firefox 54 dev edition, Firefox 52), misc & some statistics

frontendnodejsangular
006. React - Redux framework
006. React - Redux framework006. React - Redux framework
006. React - Redux framework

This document discusses React and Redux. It explains why Redux is used for state management in React applications, the key concepts in Redux including stores, actions, reducers, and dispatching events. It provides examples of React application state flow without and with Redux. Key terms like actions, providers, stores, and reducers are defined. The basic Redux flow and use of middleware for side effects are demonstrated.

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

Recommended for you

005. a React project structure
005. a React project structure005. a React project structure
005. a React project structure

This document discusses the structure of a React project and routing. It mentions using the react-router package version 3.0.0 to add routing to a React app. It also discusses organizing source code in React and using routing with JSON as well as route patterns. Additionally, it brings up handling component errors, passing route parameters, and adding authorization to routes using the react-router-role-authorization package.

reactreact structurereactjs
JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017

The latest midpoint of Summer’17 collection of news from JavaScript universe. Browser news: Chrome 59 update Chrome 60 Beta Safari Technology Preview 32 WebKit Support for WebAssembly Firefox 54 Misc: Building the Web of Things Node.js Will Overtake Java Within a Year: Analysis New releases: React v15.6.0 New libs: Data-Pixels Moon vx SmartPhoto Embedo Microtip Prettier Tinytime Moon.js Birdview.js Timeline.js

libsweb development softwarenodejs
Node.js
Node.jsNode.js
Node.js

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node.s
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

Recommended for you

The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud

Hear from Kyle Mathews, CEO of Gatsby, on the state of website building and why the future is the cloud.

gatsbyjamstackcms
WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)

By Martin Robinson. After two years of work, WebKit2 has arrived to the GNOME platform, bringing security, stability, and performance. This talk will outline the new design and dive briefly into some of the gory technical details. Also, included will be a mountain of practical advice for application developers about the transition, such as whether or not applications should be rewritten for WebKit2 and how best to take advantage of the new multi-process model.

webkit
Goodwin’s theory
Goodwin’s theoryGoodwin’s theory
Goodwin’s theory

This document discusses several key elements of music videos including demonstrating genre characteristics through visuals and lyrics, adding new meanings that don't contradict the lyrics, and having a relationship between the music and visuals. It also notes that record labels often demand close-ups of artists and artists may develop recurring visual motifs in their work. Frequently there are references to looking in mirrors or direct addresses to the camera along with intertextual references to other media.

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

More Related Content

What's hot

GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
Tobias Meixner
 
JavaFX and HTML5 - Like Curds and Rice
JavaFX and HTML5 - Like Curds and RiceJavaFX and HTML5 - Like Curds and Rice
JavaFX and HTML5 - Like Curds and Rice
Stephen Chin
 
Cross-platform JavaScript
Cross-platform JavaScriptCross-platform JavaScript
Cross-platform JavaScript
Hristo Chakarov
 
The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014
Simona Clapan
 
MVP with GWT and GWTP
MVP with GWT and GWTPMVP with GWT and GWTP
MVP with GWT and GWTP
Christian Goudreau
 
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Mike Hale
 
JS digest. May 2017
JS digest. May 2017JS digest. May 2017
JS digest. May 2017
ElifTech
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
Binh Quan Duc
 
Introduction à GWT
Introduction à GWTIntroduction à GWT
Introduction à GWT
Arcbees
 
Firebase and AngularJS
Firebase and AngularJSFirebase and AngularJS
Firebase and AngularJS
Ladislav Prskavec
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Alexandre Morgaut
 
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCampHow to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
Jesus Manuel Olivas
 
RIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoRIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in Nuxeo
Nuxeo
 
JS digest, March 2017
JS digest, March 2017JS digest, March 2017
JS digest, March 2017
ElifTech
 
006. React - Redux framework
006. React - Redux framework006. React - Redux framework
006. React - Redux framework
Binh Quan Duc
 
005. a React project structure
005. a React project structure005. a React project structure
005. a React project structure
Binh Quan Duc
 
JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017
ElifTech
 
Node.js
Node.jsNode.js
Node.js
Neethu Dasan
 
The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud
Gatsbyjs
 
WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)
Igalia
 

What's hot (20)

GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0GraphQL Bangkok Meetup 6.0
GraphQL Bangkok Meetup 6.0
 
JavaFX and HTML5 - Like Curds and Rice
JavaFX and HTML5 - Like Curds and RiceJavaFX and HTML5 - Like Curds and Rice
JavaFX and HTML5 - Like Curds and Rice
 
Cross-platform JavaScript
Cross-platform JavaScriptCross-platform JavaScript
Cross-platform JavaScript
 
The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014
 
MVP with GWT and GWTP
MVP with GWT and GWTPMVP with GWT and GWTP
MVP with GWT and GWTP
 
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
Gutenberg: You Can't Teach an Old Dev New Tricks - WordCamp Chicago 2018
 
JS digest. May 2017
JS digest. May 2017JS digest. May 2017
JS digest. May 2017
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
 
Introduction à GWT
Introduction à GWTIntroduction à GWT
Introduction à GWT
 
Firebase and AngularJS
Firebase and AngularJSFirebase and AngularJS
Firebase and AngularJS
 
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
Conquer Architectural Challenges with End-to-End JavaScript - enterJS 2014
 
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCampHow to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
 
RIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in NuxeoRIA front-ends: Flex, GWT integration in Nuxeo
RIA front-ends: Flex, GWT integration in Nuxeo
 
JS digest, March 2017
JS digest, March 2017JS digest, March 2017
JS digest, March 2017
 
006. React - Redux framework
006. React - Redux framework006. React - Redux framework
006. React - Redux framework
 
005. a React project structure
005. a React project structure005. a React project structure
005. a React project structure
 
JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017JS digest. Mid-Summer 2017
JS digest. Mid-Summer 2017
 
Node.js
Node.jsNode.js
Node.js
 
The Future Is The Cloud
The Future Is The CloudThe Future Is The Cloud
The Future Is The Cloud
 
WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)
 

Viewers also liked

Goodwin’s theory
Goodwin’s theoryGoodwin’s theory
Goodwin’s theory
Angeline1
 
What is the function of a music video
What is the function of a music videoWhat is the function of a music video
What is the function of a music video
Angeline1
 
Hola
HolaHola
Hola
Junkeer
 
How i used video transition (editing)
How i used video transition (editing)How i used video transition (editing)
How i used video transition (editing)
Angeline1
 
IITI Hub BTP Report
IITI Hub BTP ReportIITI Hub BTP Report
IITI Hub BTP Report
harshit4003
 
Maria chimborazo primero d
Maria chimborazo  primero dMaria chimborazo  primero d
Maria chimborazo primero d
alexa-sucuy
 
Analysis of digipak mock up
Analysis of digipak mock upAnalysis of digipak mock up
Analysis of digipak mock up
Angeline1
 
Windows azure overview
Windows azure overviewWindows azure overview
Windows azure overview
codemotion_es
 
Don’t hold your breath
Don’t hold your breathDon’t hold your breath
Don’t hold your breath
Angeline1
 
The Java EE 7 Platform: Developing for the Cloud
The Java EE 7 Platform: Developing for the CloudThe Java EE 7 Platform: Developing for the Cloud
The Java EE 7 Platform: Developing for the Cloud
codemotion_es
 
JAX-RS 2.0: RESTful Web services on steroids
JAX-RS 2.0: RESTful Web services on steroidsJAX-RS 2.0: RESTful Web services on steroids
JAX-RS 2.0: RESTful Web services on steroids
codemotion_es
 
Качество - залог успеха Maika ua
Качество - залог успеха Maika uaКачество - залог успеха Maika ua
Качество - залог успеха Maika ua
Владимир Корн
 
Run leona lewis
Run  leona lewisRun  leona lewis
Run leona lewis
Angeline1
 
Qstix
QstixQstix
Qstix
qstix
 
Zachman Framework As Enterprise Architecture Ontology
Zachman Framework As Enterprise Architecture OntologyZachman Framework As Enterprise Architecture Ontology
Zachman Framework As Enterprise Architecture Ontology
Osama Abandeh
 

Viewers also liked (18)

Goodwin’s theory
Goodwin’s theoryGoodwin’s theory
Goodwin’s theory
 
What is the function of a music video
What is the function of a music videoWhat is the function of a music video
What is the function of a music video
 
Hola
HolaHola
Hola
 
How i used video transition (editing)
How i used video transition (editing)How i used video transition (editing)
How i used video transition (editing)
 
IITI Hub BTP Report
IITI Hub BTP ReportIITI Hub BTP Report
IITI Hub BTP Report
 
Maria chimborazo primero d
Maria chimborazo  primero dMaria chimborazo  primero d
Maria chimborazo primero d
 
Analysis of digipak mock up
Analysis of digipak mock upAnalysis of digipak mock up
Analysis of digipak mock up
 
Windows azure overview
Windows azure overviewWindows azure overview
Windows azure overview
 
Don’t hold your breath
Don’t hold your breathDon’t hold your breath
Don’t hold your breath
 
Locations
LocationsLocations
Locations
 
The Java EE 7 Platform: Developing for the Cloud
The Java EE 7 Platform: Developing for the CloudThe Java EE 7 Platform: Developing for the Cloud
The Java EE 7 Platform: Developing for the Cloud
 
JAX-RS 2.0: RESTful Web services on steroids
JAX-RS 2.0: RESTful Web services on steroidsJAX-RS 2.0: RESTful Web services on steroids
JAX-RS 2.0: RESTful Web services on steroids
 
Качество - залог успеха Maika ua
Качество - залог успеха Maika uaКачество - залог успеха Maika ua
Качество - залог успеха Maika ua
 
Run leona lewis
Run  leona lewisRun  leona lewis
Run leona lewis
 
Qstix
QstixQstix
Qstix
 
Ravers
RaversRavers
Ravers
 
Smm для maika
Smm для maikaSmm для maika
Smm для maika
 
Zachman Framework As Enterprise Architecture Ontology
Zachman Framework As Enterprise Architecture OntologyZachman Framework As Enterprise Architecture Ontology
Zachman Framework As Enterprise Architecture Ontology
 

Similar to SnapyX - ParisJS

Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
David Amend
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
Pravasini Sahoo
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
Status of the Layer-Based SVG Engine in WebKit
Status of the Layer-Based SVG Engine in WebKitStatus of the Layer-Based SVG Engine in WebKit
Status of the Layer-Based SVG Engine in WebKit
Igalia
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
David Manock
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
Larson Software Technology
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
Binary Studio
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
Yuriy Silvestrov
 
Education&work experience
Education&work experienceEducation&work experience
Education&work experience
Lyubomir Velchev
 
Planbox Backbone MVC
Planbox Backbone MVCPlanbox Backbone MVC
Planbox Backbone MVC
Acquisio
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
Stephan Hochdörfer
 
Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)
Naveen Krishnamurthy
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
Sergejus Barinovas
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
Kevin Read
 

Similar to SnapyX - ParisJS (20)

Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
Status of the Layer-Based SVG Engine in WebKit
Status of the Layer-Based SVG Engine in WebKitStatus of the Layer-Based SVG Engine in WebKit
Status of the Layer-Based SVG Engine in WebKit
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
VizEx View HTML5 Workshop
VizEx View HTML5 WorkshopVizEx View HTML5 Workshop
VizEx View HTML5 Workshop
 
Web Performance Part 4 "Client-side performance"
Web Performance Part 4  "Client-side performance"Web Performance Part 4  "Client-side performance"
Web Performance Part 4 "Client-side performance"
 
JS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJSJS FAST Prototyping with AngularJS & RequireJS
JS FAST Prototyping with AngularJS & RequireJS
 
Education&work experience
Education&work experienceEducation&work experience
Education&work experience
 
Planbox Backbone MVC
Planbox Backbone MVCPlanbox Backbone MVC
Planbox Backbone MVC
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
Igalia Focus and Goals 2020 (2019 WebKit Contributors Meeting)
 
Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012Offline strategies for HTML5 web applications - pfCongres2012
Offline strategies for HTML5 web applications - pfCongres2012
 
Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)Mobile Web Application Development (An Insight)
Mobile Web Application Development (An Insight)
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
How I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScriptHow I learned to stop worrying and love embedding JavaScript
How I learned to stop worrying and love embedding JavaScript
 

Recently uploaded

20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 

Recently uploaded (20)

20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 

SnapyX - ParisJS

  • 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; }
  • 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
  • 14. ROUTER  Adding a business layer to handle init splashscreen  No HTML5 deeplinking
  • 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