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
- safeApply ( coderwall.com/p/ngisma )
$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.
-
Faire attention aux bindings trop complexes
-
Utiliser bindonce (
github.com/Pasvaz/bindonce
)
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
-
Topcoat (
topcoat.io
)
-
Ionic (
ionicframework.com
)
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 :
- Apk : goo.gl/I3DQOL
- Github : tricky21/
angular-cordova-jug
AngularJs & PhoneGap / Cordova
By tricky21
AngularJs & PhoneGap / Cordova
- 3,602