Introduction à Ionic Framework et son écosystème : * Choisir la technologie de son application mobile : hybride vs natif * Présentation de Cordova, AngularJS et Ionic Framework * Exemples de composants Ionic avec le code associé * Comment démarrer son application Ionic * L'écosystème Ionic : Ionic CLI, ngCordova, Ionic Lab, Ionic Creator, Ionic View & Ionic Backend... * Points d'attentions pour avoir une application qui fonctionne bien : cycle de vie des vues et contrôleurs, mocker ses plugin cordova, ne pas faire de traitement lourd, bien gérer le cache (localStorage) * Liens utiles : - http://codepen.io/ionic/public-list/ : exemples de composants - https://github.com/loicknuchel/ionic-starter

1. Construire un application hybride de qualité !
@loicknuchel

2. Loïc Knuchel
● Développeur web freelance
● Startuper
● Organisateur des HumanTalks, Bagger
Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/blog/

3. Il vous faut une application mobile ?

5. Pour quoi faire ?
Avec quelles contraintes ?
Et quel contexte ?
Gagner un hackthon
Un outil interneTester une idée
Avoir une application hype
Développement rapide
Pas cher
Mutli-plateforme dès le début
Application stratégique
Equipe en place
Startup

6. Native vs Hybride

7. Des smartphones puissants !
1.4 GHz
dual-core

8. Avec de bons navigateurs

9. Et des outils efficaces...

10. L’hybride offre un bon rapport
qualité/prix est convient dans la
plupart des cas

12. “Hello”

13. Cordova
“Apache Cordova is a platform for building
native mobile applications using HTML, CSS
and JavaScript”
● 2009: Nitobi crée PhoneGap
● 2011: Adobe rachète PhoneGap
● 2012: PhoneGap est cédé à Apache sous le nom de Cordova

14. AngularJS
● Framework JavaScript MVC le plus
populaire actuellement.
● Créé par Google.

15. Ionic
Ensemble de composants permettant de créer facilement
une application mobile hybride.
● Composants UI optimisés pour le mobile
● Animations
● Gestures
Créé par

16. Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technologique

17. Composants Ionic

18. <ion-header-bar class="bar-positive">
<h1 class="title">Home</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">List Icons</div>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble"></i> Call Ma
<i class="icon ion-ios-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i> Emails
<span class="badge badge-assertive">0</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i> Record album
<span class="item-note">Grammy</span>
</a>
<div class="item item-divider">List Avatar</div>
<a class="item item-avatar" href="#">
<img src="http://ionicframework.com/img/docs/spengler.jpg">
<h2>Egon</h2>
<p>We're gonna go full stream.</p>
</a>
</div>
</ion-content>
Composant: Lists
http://codepen.io/loicknuchel/pen/GgxWwJ

19. <ion-header-bar class="bar-positive">
<h1 class="title">Pull To Refresh ...</h1>
</ion-header-bar>
<ion-content>
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>
<div class="list">
<div class="item" ng-repeat="item in items">
Item {{item}}
</div>
</div>
</ion-content>
.controller('MainCtrl', function($scope) {
$scope.items = [1, 2, 3];
$scope.doRefresh = function() {
setTimeout(function(){
$scope.items.push($scope.items.length + 1);
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
};
});
Composant: Pull To Refresh
http://codepen.io/loicknuchel/pen/EaEmYG

20. <ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-navicon"
menu-toggle="left" ng-hide="$exposeAside.active"></button>
<h1 class="title">Home</h1>
</ion-header-bar>
<ion-content class="padding">
<p>Hi !</p>
</ion-content>
</ion-side-menu-content>
<ion-side-menu expose-aside-when="large">
<ion-header-bar class="bar-royal">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item" ui-sref="app.page1" nav-clear menu-close>Page 1</a>
<a class="item" ui-sref="app.page2" nav-clear menu-close>Page 2</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Composant: Sidemenu
http://codepen.io/loicknuchel/pen/ByrWrj

21. Composant: Tabs
<ion-tabs class="tabs-striped tabs-top tabs-color-calm">
<ion-tab title="Timeline" icon-on="ion-social-twitter" icon-off="ion-social-twitter-
outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Messages" icon-on="ion-ios-chatboxes" icon-off="ion-ios-chatboxes-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Profil" icon-on="ion-ios-person" icon-off="ion-ios-person-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>

22. Composant: Popover
.controller('MainCtrl', function($scope, $ionicPopover) {
$scope.user = {avatar: 'venkman.jpg', name: 'Venkman', account: '@venkman'};
$ionicPopover.fromTemplateUrl('menu-popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
});

23. Menu: markup
<ion-header-bar class="bar-calm">
<h1 class="title">Timeline</h1>
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-header-bar>
<script id="menu-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item item-avatar" href="#">
<img ng-src="http://ionicframework.com/img/docs/{{user.avatar}}">
<h2>{{user.name}}</h2>
<p>{{user.account}}</p>
</a>
<a class="item" href="#">Listes</a>
<a class="item" href="#">Brouillons</a>
<a class="item" href="#">Comptes</a>
<a class="item" href="#">Paramètres</a>
</div>
</ion-content>
</ion-popover-view>
</script>

24. Et beaucoup d’autres
● Modal
● Popup
● Action Sheet
● Form (Toggle, Range, Select, Checkbox,
Radio...)
● Loading
● Slide Box
● Backdrop

25. Getting started

26. Installer Ionic et Cordova
$ npm install -g cordova ionic

27. Ionic templates
$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

28. Lancer l’application
● Dans le navigateur
● Sur son téléphone (usb) ou sur l’émulateur
$ ionic serve --lab
$ ionic platform add [android/ios]
$ ionic [run/emulate] [android/ios]

30. Ionic SDK

31. ● Livereload
● Génération d’icones & splash screens
● Intégration de Crosswalk

32. ngCordova
AdMob
App Avaiability
App Rate
ActionSheet
App Version
Badge
Background Geolocation
Battery Status
Barcode Scanner
Calendar
Camera
Capture
Clipboard
Contacts
Date picker
Device
Device Motion
Device Orientation
Dialogs
Email Composer
Facebook
File
File Transfer
FileOpener2
SQLite
Splashscreen
Social Sharing
Vibration
SMS
Push Notifications
Progress Indicator
Printer
Preferences
Pin Dialog
OAuth
Network
Native Audio
Media
Local Notification
Keychain
Keyboard
In App Browser
Image Picker
Health Kit
Google Analytics
Globalization
Geolocation
Flashlight

34. Ionic Ions
http://ions.ionic.io/

35. Ionic Creator

36. Ionic View

37. Ionic Backend
● Push
● Analytics
● A/B testing
● LiveUpdate
● Packaging

38. Et d’autres initiatives...

40. Tip #1: /! Cache Ionic des vues
Attention au cycle de vie des vues & controllers
.controller('MyCtrl', function($scope){
'use strict';
// first initialization
$scope.$on('$ionicView.enter', function(){
// on view enter (active)
});
$scope.$on('$ionicView.leave', function(){
// on view leave (cached or destroyed)
});
})
http://ionicframework.com/docs/api/directive/ionView/

41. Tip #2 : Mock des plugins
ngCordovaMocks : mocks pour ngCordova
cordova.js : simuler les fonctions natives

42. Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// heavy work...
// app & animations will freeze :(
for(var i=0; i<1000; i++){
console.log(i);
}
})

43. Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// better...
$scope.$on('$ionicView.afterEnter', function(){
for(var i=0; i<1000; i++){
console.log(i);
}
});
})

44. Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// best... but MUST avoid heady work !
$scope.$on('$ionicView.afterEnter', function(){
for(var i=0; i<1000; i++){
window.requestAnimationFrame(console.log(i));
}
});
})

45. Tip #4 : Bien gérer le LocalStorage
● /! sérialisation : opération lourde si objet volumineux
(cache par ex !)
● Éviter ngStorage pour le mobile (sérialisations
“intempestives”)
● Utiliser angular-localForage
● Ajouter un cache en mémoire : storage-utils.js

46. Tip #5 : $digest & DOM
● Utiliser au maximum le “one-time-binding”
de AngularJS (ex: {{::user.name}})
● Utiliser le collection-repeat de Ionic pour les
longues listes

47. Liens
http://ionicframework.com/docs/components/ : Composants standards Ionic
http://learn.ionicframework.com/ : Tutoriels Ionic
http://codepen.io/ionic/public-list/ : Examples de composants Ionic
http://ngcordova.com/ : Wrappers AngularJS pour les plugins Cordova
http://mcgivery.com/ : Blog fourni en articles sur Ionic
https://github.com/loicknuchel/ionic-starter : Démarrer rapidement un projet Ionic

48. Merci :)