L'Open Web en tant que pierre angulaire du développement multi-objets

LOpen Web en tant que pierre angulaire dudé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

Joshﬁre

Déﬁnitions

LOpen Web en tant que pierre angulaire dudéveloppement multi-objets

Objets connectés ?http://fuckyeahinternetfridge.tumblr.com

Multi-objets connectésOn ne laisse personne derrière (ordinateurs de bureau, ordinateurs portables, téléphones, tablettes,TVs, etc.)

Multi-objets connectés• Multi-touch • Push• GPS • Bluetooth / RFID• Accéléromètre • Capteurs de• Orientation proximité• Microphone • Capteurs de luminosité• Capture video & image • 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 famille marque ... perfs input language Java .NET Objective-C JS C++

Pourquoi ce choix ?• Mutualisation des • Expérience plus compétences complète• Mutualisation du • Utilisation des code markets• Royalty Free • 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

Objectif• Adapter le layout et le comportement• Tout en partageant le même coeur applicatif, le même contenu

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:480px)@media screen and (max-width:999px) {{ #nav #extras { { float: none; clear: left; width: auto; float: none; } margin: 0 0 0 225px; width: 550px; #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: Modernizrif (Modernizr.localstorage) { // localstorage disponible} else { // on doit faire sans}

Les limites• Pas toujours sufﬁsant• 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

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• “Joshﬁre Framework 2”• Basé sur Backbone.js + Require.js• Sur GitHub, dans une branche (pas master) mais sans documentation

Quelques considérationssur 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 ofﬁciel

API disponibles• Calquées sur celle du W3C• Risque d’évolution en fonction de B2G

Exemplenavigator.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

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, like Gecko) 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• 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• 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

Joshﬁre recrute !http://www.notaregularcompany.com

dotJS.fr — 30 Nov

+ grande conférenceJavaScript en France

Mr doobTickets early birds: http://www.dotjs.fr

QUESTIONS ?

L'Open Web en tant que pierre angulaire du développement multi-objets

by Thomas Bassetto on Jun 19, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 93

Statistics