Présentation de Cobalt par Kristal.io le 13 Octobre 2015 chez Soft, Orange, Lannion

1. Cobalt
Le meilleur des deux mondes

2. Notre monde a changé
2008
App Store iOS2
Android Market
Android 1.0
2010
iPad
2011
Android 3.0
& tablettes
android
2015
All addicted :)

3. Aujourd’hui
1,75 milliard d’utilisateurs
9 millions de développeurs
mobile
Chiffres Q2 2015, France, Source ZDNet
Chiffres Q1 2015, Monde, Source Developer Economics

4. Comment développer des applis
Méthode 1 : The Good Old Way
LE NATIF

5. Comment développer des applis
Méthode 2 : Esquive
LE TRADUCTEUR

6. Comment développer des applis
Méthode 3 : The new kid
HYBRID

7. Comment développer des applis
Méthode 3 : HTML5 & Hybrid
● Lent au chargement
● Long a développer
● Beaucoup de bugs CSS
● Peu de support des nouveautés
● Des promesses
Et ça fait 5 ans que ça dure !
● Transitions saccadées

8. Réinventons l’hybride
Méthode 3b : COBALT
● Réconcillier devs web et natif
● Gagner du temps
● Economiser de l’argent
● Utiliser le meilleur des deux mondes

9. Comment ça marche ?
Embarquement !

10. What’s in the box ?
Un framework
Android
(aar soon)
Un framework
iOS
(pod soon)
Une librairie
VanillaJS
Un CLI en
NodeJS
Un framework
Windows
(En 2016)

11. What’s in the box ?
FlexibilitéRespect des
guidelines
Navigation
Native
Echanges simples,
système robuste

12. Cobalt - Communication Web <-> Natif
Echanges simples,
système robuste

13. Cobalt - Communication Web <-> Natif CODE
Exemple d’envoi d’événement du Web vers le natif :
cobalt.sendEvent("playVideo", { video_id: 6500 }, function(){
cobalt.log("Video is playing");
});
@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);
sendCallback(callback);
catch (JSONException e) {
// handle exception
}
return true;
}
return false;
}
JavaScript, Web
Java, Android

14. Cobalt - Communication Web <-> Natif CODE
Exemple d’envoi d’événement du natif vers le Web :
JSONObject data = new JSONObject()
try {
data.put("value", 11);
sendEvent("setZoom", data, “myCallbackId”);
}
catch (JSONException e) {
// handle exception
}
cobalt.addEventListener(“setZoom”, function(data, callback ) {
$("body").css("font-size", data.value + "px");
cobalt.sendCallback(callback);
});
Java, Android
Javascript, Web

15. Cobalt - Navigation Native
Navigation
Native

16. Cobalt - Navigation Native
● possibilité de demande de
navigation native depuis le web,
● choix du contrôleur natif dans
lequel charger la pageNavigation
Native

17. Cobalt - Navigation Native
{
"controllers": {
"default": {
"ios": "ViewController",
"android": ".activities.DefaultActivity",
"pullToRefresh": true,
"inifiniteScroll": true
},
"create": {
"ios": "CreateViewController",
"android": ".activities.CreateActivity"
}
}
}
cobalt.navigate.push({ page : ‘index.html’, controller : ‘create’, data : { some : ‘data’ } });
Pour naviguer dans l’application depuis le Web :
Un fichier de configuration : cobalt.conf
CODE

18. Cobalt - Navigation Native
● chaque vue web est dans une
WebView différente
Navigation
Native

19. Chaque vue web est dans une WebView différente
Cobalt - Navigation Native

20. Comment manipuler mes données ?
Chaque vue web est dans une WebView différente
● Cobalt.storage
● navigate with data
● Cobalt PUBSUB Plugin
Cobalt - Navigation Native

21. Respect
des guidelines
Respect des guidelines
L’utilisateur doit retrouver l’interface
et l’expérience auxquelles il est
habitué.

22. Composants natifs
Pull-to-refresh... … Infinite scroll

23. Composants natifs - Pull-to-refresh CODE
// cobalt.conf
"controller": {
[...],
"pullToRefresh": true
}
// page.html
cobalt.init({
events: {
"pullToRefresh": function(data, callback) {
// Update your page content here!
// Call callback when content is up to date:
cobalt.sendCallback(callback);
}
}
});

24. Composants natifs
Alerts Toasts

25. Composants natifs - Alerts CODE
// page.html
cobalt.alert({
title: "Do you want some tea?",
buttons: ["Yes", "No"],
callback: function(data) {
cobalt.log(data.index ? ‘Are you sure?’ : ‘I make you one.’);
}
});

26. Composants natifs
Et plein d’autres !
● DatePicker,
● WebLayer,
● etc.
À venir
● AppBar,
● etc.

27. Respect
des guidelines
Respect des guidelines
Des composants natifs, c’est l’
assurance de toujours profiter des
dernières mises à jour des OS sans
tout devoir réécrire.

28. Respect des guidelines - Pull-to-refresh EXEMPLE
Rien Barre de progression Indicateur

29. Flexibilité
Flexibilité
● Système de communication
Web <-> Natif,
● Intégration modulable,
● Système de plugins.

30. Où est la vue “full-native” ?

31. Plugins
● 1 plugin = 1 fichier JS + 1 singleton iOS + 1 singleton Android,
● Réception des messages du Web par les singletons natifs,
● Après, tout est possible !

32. Plugins CODE
// LocationPlugin.java
public class LocationPlugin extends CobaltAbstractPlugin {
static PubSubPlugin sInstance;
public static CobaltAbstractPlugin getInstance() {
if (sInstance == null) sInstance = new LocationPlugin();
return sInstance;
}
@Override
public void onMessage(CobaltPluginWebContainer webContainer, JSONObject message) {
// Handle message
}
}

33. Plugins CODE
// cobalt.conf
{
"plugins": {
"location": {
"android": "org.cobaltians.location.LocationPlugin",
"ios": "LocationPlugin"
}
}
}
// page.html
cobalt.getLocation(function(position) {
console.log(‘location is’ + position);
});

34. // location.js
(function(cobalt) {
var plugin = {
name: "location",
onResult: undefined,
init: function(options) {
// Create shortcuts
cobalt.getLocation = this.getLocation.bind(this);
},
getLocation: function(callback) {
if (typeof callback == "function") {
this.onResult = callback;
}
cobalt.send({
type: "plugin",
name: "location",
action: "getLocation"});
},
handleEvent: function(json) {
if (json && json.data && this.onSuccess) {
this.onSuccess(json.data.value)
}
}
};
cobalt.plugins.register(plugin);
})(cobalt || {});
Plugins CODE

35. Plugins
Disponibles En cours
● ActionPicker,
● AppInfos,
● Location,
● PubSub,
● WebServices.
● Contacts,
● FullScreenImage,
● PhotoPicker,
● Slideshow,
● VideoPlayer,
● etc.
Compatibilité aves les plugins Cordova !

36. Récapitulatif - Une app Cobalt
Natif Web
● Navigation et transitions,
● Composants propre à la plateforme,
● Accès aux capteurs et données.
● Logique applicative,
● Interface graphique.
Système de communication
/ ! Cobalt n’est pas un framework d’UI Web !
Mais vous pouvez utiliser vos frameworks habituels
● Hybride modulable,
● Plugins.

37. Get started FAST
Essayez avant d’adpoter
sudo npm install -g cobaltians
cobaltians create myApp HelloWorld
“Cobalt Catalog”, l’app de démonstration
disponible sur les stores

38. Cobalt - Join the Rebels!
Cobalt est Open Source !
cobaltians.org
cobaltians/cobalt
@Cobaltians
contact@cobaltians.org We need YOU
on the next release !

39. Cobalt
We can help you :)
● Formation approfondie
● Développement de plugins
● Développement d’apps ou de protos

40. contact@kristal.io
09 72 49 07 37
Merci de votre attention
Sébastien Famel
Développeur Android
Sébastien Vitard
Développeur Cross-platform
Guillaume Gendre
Développeur Web Hybride Cobalt
Suivez-nous :
@kristal_fr
@cobaltians