COBALTUN FRAMEWORK MOBILE HYBRIDE MADE IN LANNION 18/03/2014

Le développement mobile, une joyeuse jungle

Depuis 2008, date de sortie de l’iPhone :

Plates-formes : Android, iOS, Windows Phone 8, BlackBerry, Tizen, etc.

Terminaux et tailles d’écran : résolution (en ppp), définition (en px) et format d’écran, etc.

La voie royale : le natif

Un développement par plate-forme,

Temps de développement long,

Souvent trop cher pour les clients.

Mais le HTML5 s’en mêle

Des sites Web mobiles : m.cobalt.fr

Des frameworks Web orientés interface mobile : Sencha Touch, jQuery Mobile, Wink

Le Responsive Web Design,

Des frameworks hybrides : PhoneGap / Cordova.

L’hybride, késako ?

L’hybride, késako ?

L’hybride, késako ?

L’hybride, késako ?

Utiliser un maximum de code Web dans une application native,

Les WebViews permettent d’afficher du Web sur toutes les plateformes connues,

Augmenter le code commun d’une application multi-plateformes pour en réduire les coûts de développement.

HTML5 et le mobile : le site mobile

Fonctionne sur tous les terminaux,

API pauvre,

Pas de store disponible.

source : étude visionmobile, septembre 2013 http://www.developereconomics.com/downloads/can-html5-compete-native/

HTML5 et le mobile : les générateurs d’application

Génération d’une application native à partir de code HTML5 spécifique ou d’un éditeur WYSIWYG,

Développement complexe,

Peu customisable.

source : étude visionmobile, septembre 2013 http://www.developereconomics.com/downloads/can-html5-compete-native/

HTML5 et le mobile : PhoneGap / Cordova

Le seul vrai hybride,

Développement entièrement en HTML5,

Quelques fonctions natives accessibles depuis le JavaScript,

Communauté active.

source : étude visionmobile, septembre 2013 http://www.developereconomics.com/downloads/can-html5-compete-native/

HTML5 et le mobile : PhoneGap / CordovaMais :

Performances HTML5 :

Support CSS limité,

Animations saccadées,

Navigation lente,

Ne se prête pas aux applications complexes.

source : étude visionmobile, septembre 2013 http://www.developereconomics.com/downloads/can-html5-compete-native/

HTML5 ET LE MOBILEUNE AUTRE SOLUTION ?

« Si le seul outil que vous avez est un marteau, vous tendez à voir tout problème comme un clou »

Abraham Maslow (The Psychology of Science, 1966)

« Si j’avais un marteau… Je bâtirais une ferme »

Claude François (Si j'avais un marteau, 1963)

« Si j’avais un marteau… Je bâtirais un framework hybride »

Guillaume Gendre (décembre 2012)

COBALT

Idée de départRemplacer le code HTML5 par du code natif là où le HTML5 n’est pas performant :

transitions,

touch events complexespull-to-refresh, swipe, etc.

accès aux fonctions nativesphoto, contacts, géolocalisation, etc.

Mais le Web reste à la barre !

Comment ?

Un système de communication Web <-> Natif simple mais robuste,

Une navigation native,

Des composants natifs pour pallier aux manques du HTML5.

Ils l’utilisent

Ils l’utilisent

WebView

Natif

Natif

CobaltNatif

WebView2 WebViews

Une gestion évènement / callback : <– Native, make me sandwich!–> Here it is.

Un format JSON souple,

Un système identique pour toutes les plates-formes.

La communication Web <–> Natif

La communication Web <–> NatifLe Web ordonne :

Et le natif s’exécute :

cobalt.sendEvent("playVideo", { video_id: 654564});

@Overrideprotected boolean onUnhandledEvent( String event, JSONObject data, String callback) { if (event.equals("playVideo")) { try { int video_id = data.getInt("video_id"); playVideo(video_id); catch (JSONException e) { // handle exception } return true; } return false;}

Le natif notifie le Web :

Et le Web réagit :

JSONObject data = new JSONObject()try { data.put("value", 11); sendEvent("setZoom", data, null);}catch (JSONException e) { // handle exception}

cobalt.init({ debug: true, events: { "setZoom": function(data, callback ) { $("body").css("font-size", data.value + "px"); } }});

La communication Web <–> Natif

Une navigation nativeDepuis le Web :

Push / pop d’une page HTML avec une animation native,

Respect des transitions propres à l’OS

Choix du contrôleur natif dans lequel charger la page,

Choix des options de ce contrôleur.

« One file to push them all »

Sébastien Vitard (mars 2013)

Une navigation nativeUn fichier de configuration : cobalt.conf

!

!

!

!

!

Pour naviguer aisément dans l’application depuis le Web : cobalt.navigate('push','home.html','home');cobalt.navigate('pop');

{ "default": { "androidController": "fr.codedarmor.codedarmor.activities.DefaultActivity", "iosController": "CDADefaultViewController", "pullToRefresh": false, "infiniteScroll": false }, "home": { "androidController": "fr.codedarmor.codedarmor.activities.HomeActivity", "iosController": "CDAHomeViewController", "iosNibName": "CDADefaultViewController", "pullToRefresh": false, "infiniteScroll": false }}

Des WebViews buggées ? On corrige !

LocalStorage sur Android,

Support de l’Ajax sur BlackBerry 10,

Pipeline de communication sur iOS6 et inférieur.

Des composantsPull-to-refresh

&Infinite scroll

cobalt.init({ events: { "pullToRefresh": function(data, callback) { // Update your page content here! // Call callback when content is up to date: cobalt.sendCallback(callback); }, "infiniteScroll": function(data, callback) { // Load your next page here… // And when it’s done: cobalt.sendCallback(callback); } }});

Des composants

Web Layerscobalt.webLayer("show", "layerContent.html");

cobalt.webLayer("dismiss", { some: "optionalData" });

cobalt.addEventListener("onWebLayerDismissed", function(data) { // WebLayer closed, some data has changed.});

Des composants

Alertscobalt.alert(‘Title’, ‘Message’, [‘OK’, ‘Cancel’], function(data) { if (data.index == 0) { // handle OK button pressed } else if (data.index == 1) { // handle Cancel button pressed } });

Des composants

Toasts

Des composants

Toasts

cobalt.toast(‘In Cobalt we toast!’);

Des composants

LocalStorage

Corrigé et même amélioré !

Supporte tout type de donnéesString, Number, Date, JSON, etc.

cobalt.storage.setItem(‘key’, ‘value’);cobalt.storage.getItem(‘key’);!cobalt.storage.setItem(‘key’, { some: ‘JSON’ }, ‘json’);cobalt.storage.getItem(‘key’, ‘json’);!cobalt.storage.setItem(‘key’, new Date(), ‘date’);cobalt.storage.getItem(‘key’, ‘date’);

Device info,

Geolocation,

Contacts access,

Side menu,

Swipe gestures,

Fullscreen video player,

Open external URL,

InApp external WebView,

Action Picker,

Date picker,

Simple / multiple photo picker.

En développement :

Des composants

On y réfléchit :

Des composants

More gestures,

Page eventsonPause, onResume, onShow, etc.

YouTube, Dailymotion and Vimeo fullscreen video player,

Fullscreen slideshow,

Cross-platform top bar,

PhoneGap plugins integration.

Vous êtes ic

bjectif

Ce que ça change pour le développeur Web

Un fichier HTML par écran,

Layout simplifié par l’absence de navigation,

Moins de bugs CSS,

Contexte conservé entre les pages grâce au LocalStorage

Ce que ça change pour le développeur Web

Developer, I’m your framework

Nooo !

Developers, join the Rebels!Oubliez vos frameworks JavaScript d’interface mobile comme JQuery Mobile !

Ils vous freinent,

Ils sont lourds,

Vous devez rhabiller tous les composants.

Utilisez un framework moins gras, moins sucré, moins salé : Zepto.js, Backbone.js… ou AngularJS si vous faites attention

Utilisez FastClick et gagnez 300ms sur chaque touch,

N’abusez pas des logs, ils ralentissent votre application.

COBALTLET’S CODE!

Cobalt est OpenSource !cobaltframework.com ou cobaltians.com

Sur GitHub :

Wiki,

BugTracker,

Roadmap,

Liste des fonctionnalités et leur mode d’emploi.

Et maintenant ?

Compléter la documentation !

Intégrer les fonctionnalités en développement,

Concevoir un système de plugins pour que chacun puisse proposer les siens,

Contribuer !

Organiser une soirée coding Cobalt ?

Guillaume GendreDéveloppeur web!guillaume@haploid.fr@ggendre

Merci !!

Sébastien VitardDéveloppeur Mutli-OS

!sebastien@haploid.fr

@doc1faux

cobaltframework.com

Diane MoebsContributrice historique

!!

@DianeMoebs

COBALT