Cobalt @ Code d'Armor Lannion 20130318 [FR]

1 072 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 072
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

×