COBALT
UN 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, Wi...
La voie royale : le natif
Un développement par plate-forme,

Temps de développement long,

Souvent trop cher pour les clie...
Mais le HTML5 s’en mêle
Des sites Web mobiles : 

m.cobalt.fr

Des frameworks Web orientés interface mobile : 

Sencha Tou...
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 ...
HTML5 et le mobile :
le site mobile
Fonctionne sur tous les
terminaux,

API pauvre,

Pas de store disponible.
source : étu...
HTML5 et le mobile :
les générateurs d’application
Génération d’une
application native à partir de
code HTML5 spécifique ou...
HTML5 et le mobile :
PhoneGap / Cordova
Le seul vrai hybride,

Développement entièrement
en HTML5,

Quelques fonctions nat...
HTML5 et le mobile :
PhoneGap / Cordova
Mais : 

Performances HTML5 : 

Support CSS limité,

Animations saccadées,

Naviga...
HTML5 ET LE
MOBILE
UNE AUTRE SOLUTION ?
« Si le seul outil que vous avez est un marteau,
vous tendez à voir tout problème comme un clou »
Abraham Maslow (The Psyc...
« 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épart
Remplacer le code HTML5 par du code natif là où le
HTML5 n’est pas performant : 

transitions,

touch event...
Comment ?
Un système de communication Web <-> Natif
simple mais robuste,

Une navigation native,

Des composants natifs po...
Ils l’utilisent
Ils l’utilisent
WebView
Natif
Natif
Cobalt
Natif
WebView
2 WebViews
Une gestion évènement / callback : 



<– Native, make me sandwich!

–> Here it is.

Un format JSON souple,

Un système id...
La communication Web <–> Natif
Le Web ordonne : 



Et le natif s’exécute :
cobalt.sendEvent("playVideo", {

	 video_id: 6...
Le natif notifie le Web : 









Et le Web réagit :
JSONObject data = new JSONObject()

try {

	 data.put("value", 11);
...
Une navigation native
Depuis le Web : 

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

Respect des transitions pro...
« One file to push them all »
Sébastien Vitard (mars 2013)
Une navigation native
Un fichier de configuration : cobalt.conf

!
!
!
!
!
Pour naviguer aisément dans l’application depuis ...
Des WebViews buggées ? 

On corrige !
LocalStorage sur Android,

Support de l’Ajax sur
BlackBerry 10,

Pipeline de communi...
Des composants
Pull-to-refresh

&

Infinite scroll
cobalt.init({

	 events: {

	 	 "pullToRefresh": function(data, callback...
Des composants
Web Layers
cobalt.webLayer("show", "layerContent.html");
cobalt.webLayer("dismiss", { some: "optionalData" ...
Des composants
Alerts
cobalt.alert(‘Title’,

	 	 ‘Message’,

	 	 [‘OK’, ‘Cancel’],

	 	 function(data) {

	 	 	 if (data.i...
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ées

String, Number, Date, JSON, etc.
co...
Device info, 

Geolocation, 

Contacts access, 

Side menu, 

Swipe gestures, 

Fullscreen video player, 

Open external U...
On y réfléchit :
Des composants
More gestures,

Page events

onPause, onResume, onShow, etc. 

YouTube, Dailymotion and Vim...
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 ...
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 
...
COBALT
LET’S CODE!
Cobalt est OpenSource !
cobaltframework.com 

ou cobaltians.com

Sur GitHub :

Wiki,

BugTracker,

Roadmap,

Liste des fon...
Et maintenant ?
Compléter la documentation !

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

Concevoir un système de plug...
Guillaume Gendre

Développeur web

!
guillaume@haploid.fr

@ggendre
Merci !!
Sébastien Vitard

Développeur Mutli-OS

!
seb...
Prochain SlideShare
Chargement dans…5
×

Cobalt @ Code d'Armor Lannion 20130318 [FR]

1 046 vues

Publié le

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

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 046
Sur SlideShare
0
Issues des intégrations
0
Intégrations
168
Actions
Partages
0
Téléchargements
11
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cobalt @ Code d'Armor Lannion 20130318 [FR]

  1. 1. COBALT UN FRAMEWORK MOBILE HYBRIDE MADE IN LANNION 18/03/2014
  2. 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. 3. La voie royale : le natif Un développement par plate-forme, Temps de développement long, Souvent trop cher pour les clients.
  4. 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. 5. L’hybride, késako ?
  6. 6. L’hybride, késako ?
  7. 7. L’hybride, késako ?
  8. 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. 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. 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. 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. 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. 13. HTML5 ET LE MOBILE UNE AUTRE SOLUTION ?
  14. 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. 15. « Si j’avais un marteau… 
 Je bâtirais une ferme » Claude François (Si j'avais un marteau, 1963)
  16. 16. « Si j’avais un marteau… 
 Je bâtirais un framework hybride » Guillaume Gendre (décembre 2012)
  17. 17. COBALT
  18. 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. 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. 20. Ils l’utilisent
  21. 21. Ils l’utilisent WebView Natif Natif Cobalt Natif WebView 2 WebViews
  22. 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. 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. 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. 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. 26. « One file to push them all » Sébastien Vitard (mars 2013)
  27. 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. 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. 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. 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. 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. 32. Des composants Toasts
  33. 33. Des composants Toasts cobalt.toast(‘In Cobalt we toast!’);
  34. 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. 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. 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. 37. Vous êtes ic
  38. 38. bjectif
  39. 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. 40. Ce que ça change 
 pour le développeur Web
  41. 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. 42. COBALT LET’S CODE!
  43. 43. Cobalt est OpenSource ! cobaltframework.com 
 ou cobaltians.com Sur GitHub : Wiki, BugTracker, Roadmap, Liste des fonctionnalités et leur mode d’emploi.
  44. 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. 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

×