Ionic bbl le 19 février 2015

Construire un application hybride de qualité !

@loicknuchel

Loïc Knuchel

● Développeur web freelance

● Startuper

● Organisateur des HumanTalks, Bagger

Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/blog/

Il vous faut une application mobile ?

Pour quoi faire ?

Avec quelles contraintes ?

Et quel contexte ?

Gagner un hackthonUn outil interneTester une idée

Avoir une application hype

Développement rapide

Pas cher

Mutli-plateforme dès le débutApplication stratégique

Equipe en placeStartup

Native vs Hybride

Des smartphones puissants !

1.4 GHz dual-core

Avec de bons navigateurs

Et des outils efficaces...

L’hybride offre un bon rapport qualité/prix est convient dans la

plupart des cas

“Hello”

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

AngularJS

● Framework JavaScript MVC le plus populaire actuellement.

● Créé par Google.

Ionic

Ensemble de composants permettant de créer facilement une application mobile hybride.

● Composants UI optimisés pour le mobile● Animations● Gestures

Créé par

Natif

Web

Téléphone & APIs natives

Cordova : webview +JavaScript bridges

AngularJS

Ionic

Votre applicationStack technologique

Composants Ionic

<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

<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

<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

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>

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; });});

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>

Et beaucoup d’autres● Modal● Popup● Action Sheet● Form (Toggle, Range, Select, Checkbox,

Radio...)● Loading● Slide Box● Backdrop

Getting started

Installer Ionic et Cordova

$ npm install -g cordova ionic

Ionic templates

$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

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]

Ionic SDK

● Livereload

● Génération d’icones & splash screens

● Intégration de Crosswalk

ngCordovaAdMob

App AvaiabilityApp Rate

ActionSheet

App VersionBadge

Background GeolocationBattery Status

Barcode ScannerCalendarCameraCapture

ClipboardContacts

Date pickerDevice

Device MotionDevice Orientation

DialogsEmail Composer

FacebookFile

File TransferFileOpener2

SQLiteSplashscreenSocial Sharing

Vibration

SMSPush NotificationsProgress IndicatorPrinterPreferencesPin DialogOAuthNetworkNative AudioMediaLocal NotificationKeychain

KeyboardIn App Browser

Image PickerHealth Kit

Google AnalyticsGlobalization

GeolocationFlashlight

Ionic Ions

http://ions.ionic.io/

Ionic Creator

Ionic View

Ionic Backend

● Push

● Analytics

● A/B testing

● LiveUpdate

● Packaging

Et d’autres initiatives...

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/

Tip #2 : Mock des plugins

ngCordovaMocks : mocks pour ngCordova

cordova.js : simuler les fonctions natives

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);

}

})

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);

}

});

})

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));

}

});

})

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

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

Lienshttp://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

Merci :)