Présentation du framework hybride Cobalt, lors de la soirée Code d'Armor du 18 mars 2014. Vidéo : http://www.youtube.com/watch?v=wkhWoyAVpOk Site : http://cobaltians.com

1. COBALT
UN FRAMEWORK MOBILE HYBRIDE MADE IN LANNION
18/03/2014

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

3. La voie royale : le natif
Un développement par plate-forme,
Temps de développement long,
Souvent trop cher pour les clients.

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

5. L’hybride, késako ?

6. L’hybride, késako ?

7. L’hybride, késako ?

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

9. 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/

10. 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/

11. 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/

12. HTML5 et le mobile :
PhoneGap / Cordova
Mais :
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/

13. HTML5 ET LE
MOBILE
UNE AUTRE SOLUTION ?

14. « 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)

15. « Si j’avais un marteau…
Je bâtirais une ferme »
Claude François (Si j'avais un marteau, 1963)

16. « Si j’avais un marteau…
Je bâtirais un framework hybride »
Guillaume Gendre (décembre 2012)

17. COBALT

18. Idée de départ
Remplacer le code HTML5 par du code natif là où le
HTML5 n’est pas performant :
transitions,
touch events complexes
pull-to-refresh, swipe, etc.
accès aux fonctions natives
photo, contacts, géolocalisation, etc.
Mais le Web reste à la barre !

19. Comment ?
Un système de communication Web <-> Natif
simple mais robuste,
Une navigation native,
Des composants natifs pour pallier aux manques
du HTML5.

20. Ils l’utilisent

21. Ils l’utilisent
WebView
Natif
Natif
Cobalt
Natif
WebView
2 WebViews

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

23. La communication Web <–> Natif
Le Web ordonne :
Et le natif s’exécute :
cobalt.sendEvent("playVideo", {
video_id: 654564
});
@Override
protected 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;
}

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

25. Une navigation native
Depuis 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.

26. « One file to push them all »
Sébastien Vitard (mars 2013)

27. Une navigation native
Un 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
}
}

28. Des WebViews buggées ?
On corrige !
LocalStorage sur Android,
Support de l’Ajax sur
BlackBerry 10,
Pipeline de communication
sur iOS6 et inférieur.

29. Des composants
Pull-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);
}
}
});

30. Des composants
Web Layers
cobalt.webLayer("show", "layerContent.html");
cobalt.webLayer("dismiss", { some: "optionalData" });
cobalt.addEventListener("onWebLayerDismissed", function(data) {
// WebLayer closed, some data has changed.
});

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

32. Des composants
Toasts

33. Des composants
Toasts
cobalt.toast(‘In Cobalt we toast!’);

34. Des composants
LocalStorage
Corrigé et même amélioré !
Supporte tout type de données
String, 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’);

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

36. On y réfléchit :
Des composants
More gestures,
Page events
onPause, onResume, onShow, etc.
YouTube, Dailymotion and Vimeo fullscreen video player,
Fullscreen slideshow,
Cross-platform top bar,
PhoneGap plugins integration.

37. Vous êtes ic

38. bjectif

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

40. Ce que ça change
pour le développeur Web

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

42. COBALT
LET’S CODE!

43. Cobalt est OpenSource !
cobaltframework.com
ou cobaltians.com
Sur GitHub :
Wiki,
BugTracker,
Roadmap,
Liste des fonctionnalités
et leur mode d’emploi.

44. 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 ?

45. Guillaume Gendre
Développeur web
!
guillaume@haploid.fr
@ggendre
Merci !!
Sébastien Vitard
Développeur Mutli-OS
!
sebastien@haploid.fr
@doc1faux
cobaltframework.com
Diane Moebs
Contributrice historique
!
!
@DianeMoebs
COBALT