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

• NativeScript

Ajout de styles adaptés au device ciblé (Material Design pour Android)

Pas adapté à du front (CSS) complexe

• React Native

Performance, chargement automatique

Framework React

• Rubymotion

Flexibilité des interfaces

Base de Ruby

(pour Niji)

Trop cher? Des solutions?

• Outil Xamarin

Du sur mesure

En C#, et outil payant

• Outil Appcelerator

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 :

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

Ionic 2

• Basé sur Angular 2
• 3 fois plus performant qu'Ionic premier du nom
• Testable dès maintenant
• Affaire à suivre !