The Hybrid Theory
François Eoche
Je suis ici...
...ou là
Ingénieur d'études à Niji depuis 2 ans
- Développeur Web/Web mobile/Hybride
- Full-stack, mais préférence pour le front
@feoche
Projets récents à Niji (2015)
- Natixis Rouler Serein - Application mobile (Hybride)
- ERDF A mes côtés - Application mobile (Hybride)
- Virgin Mobile - Plateforme eBoutique (Web)
- AonAuto - Application mobile (Hybride) [en cours]
Problématique
et solutions
Prenons un cas concret, à Niji
Je souhaite créer une application native
D'accord, pour quelles plateformes?
iOS, Android et Windows Phone
On peut faire cela !
Ça nous fait 3 x 300K !
*Sort sa merveilleuse calculette*
Oula, c'est cher dis donc ! Je vais voir ailleurs alors !
Trop cher? Des solutions?
- Site web mobile
Unicité du code avec le site web
Pas d'accès aux fonc° natives
Mais HTML5 permet d'accéder à certaines fonctionnalités (géoloc, accéléromètre,...)
Ajout de styles adaptés au device ciblé (Material Design pour Android)
Pas adapté à du front (CSS) complexe
Performance, chargement automatique
Framework React
Flexibilité des interfaces
Base de Ruby
(pour Niji)
Trop cher? Des solutions?
Du sur mesure
En C#, et outil payant
Beaucoup d'intégrations par défaut
Arborescence en XML, et outil payant
- Ionic
(pour Niji)
Ionic
Advanced HTML5 Hybrid Mobile App Framework
Comment ça se passe?
Après avoir "buildé" l'appli avec des tâches Gulp, c'est restitué comme ceci :
Application Web
Ionic, ça apporte quoi?
-
Des interfaces pré-construites
- via le CSS déjà intégré dans Ionic
<div id="example-item-icons" class="ionic-body">
<div class="bar bar-header">
<div class="h1 title">List Icons</div>
</div>
<div class="content has-header ionic-pseudo">
<div class="list">
// [...]
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
<div class="item item-divider">
Activities
</div>
<a class="item item-icon-left" href="#">
<i class="icon ion-beaker"></i>
Breaking Bad
<span class="item-note">
Blue, yellow, pink
</span>
</a>
// [...]
</div>
</div>
</div>
Ionic, ça apporte quoi?
-
Des éléments pré-construits aussi
- via des directives Angular
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
Ionic, ça apporte quoi?
-
Une gestion fine de prise en compte des devices
- Permet l'adaptation de l'interface en fonction de l'OS et des versions
Ionic, ça apporte quoi?
-
Un lien entre éléments natifs et éléments Web
- Gérés par Cordova et mis en exergue par Ionic
angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {
$scope.show = function() {
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Share' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {},
buttonClicked: function(index) {
return true;
}
});
$timeout(function() {
hideSheet();
}, 2000);
};
});
Ionic, ça apporte quoi?
-
Un CLI bien fourni et qui marche pas (trop) mal
- Surcharge une bonne partie des commandes Cordova
- Ajoute des spécificités également :
-
ionic serve : Serveur local visible par navigateur
- ionic resources : Générateur d'icônes/splashscreen
- ionic upload : Upload sur les serveurs Ionic
-
- 27 commandes listées dans la documentation d'Ionic
Retour d'expérience
sur les projets hybrides, à Niji
Pourquoi l'hybride en 1er lieu?
- Une volonté de trouver une solution moins coûteuse que le développement natif
- Puis, une demande explicite des clients sur cette technologie
- A la suite des premiers projets (et de retours positifs), l'hybride est mis en avant dans les soutenances Niji
Episode 1 - Natixis Rouler Serein
- 3 développeurs Web
- Premier projet professionnel en Angular pour 2/3 dev ➜ Pas de maturité sur la techno
- Hiérarchie du projet bancale
- Utilisation abusive du $rootScope et du $scope Angular
- Problèmes majeurs d'interfaçage avec les composants Natixis, pas de mocks de notre côté
- Évolutions souhaitées par le client abandonnées faute de problèmes d'intégration dans l'application (par exemple, du deep-linking entre applications avec des paramètres)
- Premiers problèmes de déploiement via Jenkins
- L'application est publiée et active sur les stores
"Le coup d'essai"
Episode 2 - ERDF A mes côtés
- 3 développeurs Web
- Fonctionnel de l'application plus léger qu'à l'épisode 1, design ambitieux pour une technologie hybride
- On a bien évolué sur la techno, grâce aux experts Angular (@ghouiller, et la "méthode PapaMotto")
- Ajout de la plateforme Windows Phone, non supportée officiellement par Ionic, des problèmes en découlent
- Problèmes via Jenkins pour la nouvelle plate-forme facétieuse
- Néanmoins, de très bons retours d'ERDF
- Une première version, puis une seconde ont été publiées sur les stores
"Le renouveau, avec un nouveau challenge"
Episode 3 - Aon Auto
- 3 développeurs Web
- Fonctionnel moyennement complexe
- Utilisation d'ES2015 (et Babel) pour plus de souplesse et une syntaxe plus lisible
- Problèmes majeurs sur la gestion des notifications Push
- VABF en cours, wait and see...
"Rouler sa bosse"
Finalement...
- Ionic est utile et aisé sur des besoins fonctionnels simples, où le métier est déporté côté back-end (de par la spécificité d'Angular)
- Le développement sur Windows Phone a bien évolué, mais c'est pas encore ça
- Comme npm, la communauté Cordova/PhoneGap propose une pléthore de plugins
- Beaucoup de choix, très peu sont entretenus/mis à jour
- On a hâte de voir de nouvelles mises à jour du framework, et justement...
- Basé sur Angular 2
- 3 fois plus performant qu'Ionic premier du nom
- Testable dès maintenant
- Affaire à suivre !
Demo time !
ERDF - A mes côtés
Merci.
ToSpeak List : CrossWalk, tâches Gulp, hooks Cordova, intégration avec Jenkins, différence emulateur/device, Vorlon.js, ngCordova, ionic Creator/Lab/View, gestion du wording/traduction
Ionic - The Hybrid Theory
By François Eoche
Ionic - The Hybrid Theory
- 3,491