AngularJS

PhoneGap / Cordova

 
Mathieu Tricoire
Développeur web indépendant

Disclaimer



Je ne suis pas développeur mobile !
(rohhhh ...)


Idée de cette présentation suite à la participation 
au récent hackathon Montpellier 
et où il fallait développer une application mobile.

AngularJS


  • Lisible et maintenable
  • Léger
  • Pensé pour être testé
  • Librairie mobile (angular-touch.js)
  • Communication JSON

Populaire il semblerait ?
Grosse communauté, effervescence

PhoneGap / Cordova


  • Multi-plateformes :
    (iOS, Android, Windows Phone, BlackBerry, FirefoxOS)
  • Accessible via les "stores"
  • Accès aux fonctionnalités natives de l'appareil :
    (Caméra, Accéléromètre, Géolocalisation)  
  • HTML / CSS / JavaScript

API Tierces (1/2) : Tenez-le au jus !

API Tierces (1/2) : Tenez-le au jus !


$timeout(function() {
  // Now I'm wrapped for protection !
}); 

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};

$scope.safeApply(function() {
  // Now I'm wrapped for protection and performance !
}); 

API Tierces (2/2) : Habillez-les !

API Tierces (2/2) : Habillez-les !


  • Facilite les tests
  • Abstraire le fonctionnement de l'API tierce
  • Structuration du code ++

Écouter Cordova

Écouter Cordova


document.addEventListener("deviceready", onDeviceReady, false);
Cordova.factory('cordovaReady', function() {
    return function(fn) {

      var queue = [];

      var impl = function() {
        queue.push(Array.prototype.slice.call(arguments));
      };

      document.addEventListener('deviceready', function() {
        queue.forEach(function(args) {
          fn.apply(this, args);
        });
        impl = fn;
      }, false);

      return function() {
        return impl.apply(this, arguments);
      };
    };
  });

Attention aux bindings

Attention aux bindings


Sur mobile il arrive que l'on retrouve
des problèmes de performances que l'on avait oubliés.



Chargez ce qu'il faut !

Chargez ce qu'il faut !


  • v 1.1.4 & 1.1.5 :  angular-mobile.js
    => ngMobile
  • >= v 1.2 : angular-touch.js 
    => ngTouch

Surcharge de ngClick,
suppression du délai de 300ms sur les écrans tactiles

Ajout de la directive swipe (1.1.5 et >= 1.2)

Pour l'instant préférer l'utilisation de la librairie fastclick.js
Multi-touch avec hammer.js voir angular-gestures

Faire illusion

Faire illusion


Donnez la vie

Donnez la vie


Modifié dans la version 1.2

Séparé du coeur : angular-animate.js
=> ngAnimate


3 manières d'animer :
  • CSS Transitions
  • CSS Keyframe Animations
  • JavaScript Animations

Ressources


 

Merci !

Ces slides : slid.es/tricky21
L'appli :

AngularJs & PhoneGap / Cordova

By tricky21

AngularJs & PhoneGap / Cordova

  • 1,744