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

francoiseoche.fr

francoiseoche@caramailgmail.com

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?

Ionic
AngularJS
WebView (Cordova)
Native SDK

Après avoir "buildé" l'appli avec des tâches Gulp, c'est restitué comme ceci :

Application Web

Ionic, ça apporte quoi?

<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?

<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?

Ionic, ça apporte quoi?

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...

Ionic 2

  • 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

http://slides.com/feoche/ionic-the-hybrid-theory

Ionic - The Hybrid Theory

By François Eoche

Made with Slides.com

Ionic - The Hybrid Theory

  • 3,511

More from François Eoche