L'Open Web en tant que pierre angulaire du

développement multi-objets@tbassetto

Mon parcours

• Développeur Front-End chez

• Développeur JavaScript chez

• Paris Hackers, ParisJS, PhoneGap Paris

• Représentant français pour Mozilla WebFWD

Joshfire

Définitions

L'Open Web en tant que pierre angulaire du

développement multi-objets

L'Open Web en tant que pierre angulaire du

développement multi-objets

Objets connectés ?

http://fuckyeahinternetfridge.tumblr.com

Multi-objets connectés

On ne laisse personne derrière (ordinateurs de bureau, ordinateurs portables, téléphones,

tablettes,TVs, etc.)

Multi-objets connectés

• Multi-touch

• GPS

• Accéléromètre

• Orientation

• Microphone

• Capture video & image

• Push

• Bluetooth / RFID

• Capteurs de proximité

• Capteurs de luminosité

• Gyroscope

“Open Web”

• Nous réalisons peu de sites Web

• Principalement des applications ou objets basées sur HTML/CSS/JS (hybrides)

Le choix de l’hybride

Application hybride

© trigger.io

Une fragmentation à plusieurs niveaux

famillemarqueperfsinput

language Java .NET Objective-C JS C++

...

Pourquoi ce choix ?

• Mutualisation des compétences

• Mutualisation du code

• Royalty Free

• Expérience plus complète

• Utilisation des markets

• APIs disponibles

Expérience “bizarre”

Accès aux APIs

Qualité

Partage de code

Hybrides célèbres

Le natif ne fait pas tout

Problématiques évitées

• SEO

• Nombre de requêtes HTTP

• Plus d’accès depuis un UA inconnu

Nouvelles problématiques

• Validation pour entrer dans le market

• Gestion de la perte de connexion

• Resume/pause de l’application

• Mise à jour

WRITE ONCE, RUN EVERYWHERE

• Adapter le layout et le comportement

• Tout en partageant le même coeur applicatif, le même contenu

Objectif

Responsive Web Design

Le postulat de départ : même code HTML, changement de layout via des media-queries

Responsive Web Design@media screen and (max-width:999px){ #extras { clear: left; float: none; margin: 0 0 0 225px; width: 550px; }}

@media screen and (max-width:480px){ #nav { float: none; width: auto; }

#extras { float: none; width: auto; margin: 0; }

.feature-image { display: none; }}

Feature detection

• Par exemple, pour navigateur “moderne” :

if('querySelector' in document     && 'localStorage' in window     && 'addEventListener' in window) {     // victoire} else {     // ...    }

Feature detection: Modernizr

if (Modernizr.localstorage) { // localstorage disponible} else { // on doit faire sans}

Les limites

• Pas toujours suffisant

• Pas de dégradation possible, expérience complète

• Utilisation du RWD par type de familles

Outils

• adapt.js

• respond.js

• formfactor.js

• device.js

formfactor.js(function() { /* contents of tv.js */ formfactor.register({tv: [ "tv", function() { return navigator.indexOf("Samsung") > 0; }, (navigtor.indexOf("Samsung") > 0) ]})();var formfactor = formfactor.detect([ { formfactor : "tv", resources: ["/style/tv.css", "/style/fullscreen.less", "/script/ambientsounds.js", "/script/fx.coffee" ], callbacks: function() { alert("Look mum, I am on TV!"); } },},// default callback when nothing matches.{ "resources": ["/style/plain.css", "script/plain.js"], "callbacks": function() { alert("In plain mode.");}});

device.js<link rel="alternate" href="http://foo.com" id="desktop" media="only screen and (touch-enabled: 0)">

<link rel="alternate" href="http://m.foo.com" id="phone" media="only screen and (max-device-width: 640px)">

<link rel="alternate" href="http://tablet.foo.com" id="tablet" media="only screen and (min-device-width: 641px)">

<script src="device.js"></script>

Frameworks UI

• jQuery Mobile

• Sencha Touch 2

• Kendo UI Mobile

• Jo

Frameworks

• Backbone.js

• Ember

• Ender

• Zepto

Créer son framework

• “Joshfire Framework 2”

• Basé sur Backbone.js + Require.js

• Sur GitHub, dans une branche (pas master) mais sans documentation

Quelques considérations sur les différentes familles

d’objets

Téléphones & Tablettes

PhoneGap/Cordova

Principe

• Même APIs pour accéder aux capteurs quelque soit le matériel

• Système de plugin qui permet quand même d’appeler toutes les fonctions du SDK officiel

API disponibles

• Calquées sur celle du W3C

• Risque d’évolution en fonction de B2G

Exemple

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });

function onSuccess(imageData) {    var image = document.getElementById('myImage');    image.src = "data:image/jpeg;base64," + imageData;}

function onFail(message) {    alert('Failed because: ' + message);}

Debug mobile

Weinre

Mettre les lignes de commandes qui vont bien

Weinre

• $ sudo npm -g install weinre

• Insérer <script src="http://a.b.c:8081/target/target-script-min.js"></script>

• http://debug.phonegap.com

Simuler les événements touch

• Options des nouveaux Chrome Dev Tools

• Touch Bookmarklet: http://louisremi.github.com/touch-devtool/

Un mot sur les touch events

• Version W3C basée sur l’implémentation d’Apple

• Bloquée par Apple

• Version Microsoft

TVs

En commun

• Un paradigme entièrement différent

• Contexte connu (contrairement aux téléphones)

• La télécommande s’utilise comme un clavier moins souvent comme une souris

• Domaine des jeux et des médias vidéos

Problèmes<link rel="stylesheet" media="screen" href="..."><link rel="stylesheet" media="tv" href="...">

User Agent String d’une LG Smart TV 2012:

Mozilla/5.0 (DirectFB; Linux; ko-KR)AppleWebKit/534.26+ (KHTML, likeGecko) Version/5.0 Safari/534.26+

Samsung

• SDK Windows

• Leader incontesté

• Basé sur un vieux Firefox (peut-être plus vrai en 2012)

Philips

• Moteur web basé sur Opera

• Site Web plein écran

LG

• SDK Windows

• Basé sur WebKit

• On peut soumettre une URL à leur store

Google TV

• Comme un Chrome (sauf le paradigme différent)

• <meta name="gtv-autozoom" content="off" />

“Desktop”

Peu de solutions

• QtWebKit

• MacGap

• AIR

Les objets ambiants

Juste un jeu d’API

Serveur d’API

BeagleBoneL’embarqué cible le developpeur système / C

mais si on préinstalle node et cloud9 cela change la donne

Raspberry PI

Le Miroir

Le Miroir

Le Miroir

• Micro-ordinateur

• WebKit plein écran

• Une app hybride pour en lancer d’autres

Canapé

Canapé

• Arduino + RFID

• Serveur node.js qui pilote une Google TV

La Borne

La Borne

La Borne

• iPad + app hybride

• Arduino + RFID pour passer le badge

Conclusion

Quelques souhaits

• Plus d’implications dans les devices APIs

• De meilleurs frameworks multi-objets

Two more things

Joshfire recrute !http://www.notaregularcompany.com

dotJS.fr — 30 Nov

+ grande conférence JavaScript en France

Mr doob

Tickets early birds: http://www.dotjs.fr

QUESTIONS ?