cobalt @ code d'armor lannion 20130318 [fr]
TRANSCRIPT
![Page 1: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/1.jpg)
COBALTUN FRAMEWORK MOBILE HYBRIDE MADE IN LANNION 18/03/2014
![Page 2: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/2.jpg)
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.
![Page 3: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/3.jpg)
La voie royale : le natif
Un développement par plate-forme,
Temps de développement long,
Souvent trop cher pour les clients.
![Page 4: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/4.jpg)
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.
![Page 5: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/5.jpg)
L’hybride, késako ?
![Page 6: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/6.jpg)
L’hybride, késako ?
![Page 7: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/7.jpg)
L’hybride, késako ?
![Page 8: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/8.jpg)
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.
![Page 9: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/9.jpg)
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/
![Page 10: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/10.jpg)
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/
![Page 11: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/11.jpg)
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/
![Page 12: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/12.jpg)
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/
![Page 13: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/13.jpg)
HTML5 ET LE MOBILEUNE AUTRE SOLUTION ?
![Page 14: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/14.jpg)
« 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)
![Page 15: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/15.jpg)
« Si j’avais un marteau… Je bâtirais une ferme »
Claude François (Si j'avais un marteau, 1963)
![Page 16: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/16.jpg)
« Si j’avais un marteau… Je bâtirais un framework hybride »
Guillaume Gendre (décembre 2012)
![Page 17: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/17.jpg)
COBALT
![Page 18: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/18.jpg)
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 !
![Page 19: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/19.jpg)
Comment ?
Un système de communication Web <-> Natif simple mais robuste,
Une navigation native,
Des composants natifs pour pallier aux manques du HTML5.
![Page 20: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/20.jpg)
Ils l’utilisent
![Page 21: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/21.jpg)
Ils l’utilisent
WebView
Natif
Natif
CobaltNatif
WebView2 WebViews
![Page 22: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/22.jpg)
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
![Page 23: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/23.jpg)
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;}
![Page 24: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/24.jpg)
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
![Page 25: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/25.jpg)
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.
![Page 26: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/26.jpg)
« One file to push them all »
Sébastien Vitard (mars 2013)
![Page 27: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/27.jpg)
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 }}
![Page 28: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/28.jpg)
Des WebViews buggées ? On corrige !
LocalStorage sur Android,
Support de l’Ajax sur BlackBerry 10,
Pipeline de communication sur iOS6 et inférieur.
![Page 29: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/29.jpg)
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); } }});
![Page 30: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/30.jpg)
Des composants
Web Layerscobalt.webLayer("show", "layerContent.html");
cobalt.webLayer("dismiss", { some: "optionalData" });
cobalt.addEventListener("onWebLayerDismissed", function(data) { // WebLayer closed, some data has changed.});
![Page 31: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/31.jpg)
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 } });
![Page 32: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/32.jpg)
Des composants
Toasts
![Page 33: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/33.jpg)
Des composants
Toasts
cobalt.toast(‘In Cobalt we toast!’);
![Page 34: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/34.jpg)
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’);
![Page 35: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/35.jpg)
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
![Page 36: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/36.jpg)
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.
![Page 37: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/37.jpg)
Vous êtes ic
![Page 38: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/38.jpg)
bjectif
![Page 39: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/39.jpg)
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
![Page 40: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/40.jpg)
Ce que ça change pour le développeur Web
![Page 41: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/41.jpg)
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.
![Page 42: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/42.jpg)
COBALTLET’S CODE!
![Page 43: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/43.jpg)
Cobalt est OpenSource !cobaltframework.com ou cobaltians.com
Sur GitHub :
Wiki,
BugTracker,
Roadmap,
Liste des fonctionnalités et leur mode d’emploi.
![Page 44: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/44.jpg)
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 ?
![Page 45: Cobalt @ Code d'Armor Lannion 20130318 [FR]](https://reader034.vdocuments.fr/reader034/viewer/2022042701/55a304161a28ab32078b464c/html5/thumbnails/45.jpg)
Guillaume GendreDéveloppeur [email protected]@ggendre
Merci !!
Sébastien VitardDéveloppeur Mutli-OS
@doc1faux
cobaltframework.com
Diane MoebsContributrice historique
!!
@DianeMoebs
COBALT