cobalt @ code d'armor lannion 20130318 [fr]
Post on 13-Jul-2015
633 Views
Preview:
TRANSCRIPT
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
top related