48
Construire un application hybride de qualité ! @loicknuchel

Ionic bbl le 19 février 2015

Embed Size (px)

Citation preview

Page 1: Ionic bbl le 19 février 2015

Construire un application hybride de qualité !

@loicknuchel

Page 3: Ionic bbl le 19 février 2015

Il vous faut une application mobile ?

Page 4: Ionic bbl le 19 février 2015
Page 5: Ionic bbl le 19 février 2015

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

Page 6: Ionic bbl le 19 février 2015

Native vs Hybride

Page 7: Ionic bbl le 19 février 2015

Des smartphones puissants !

1.4 GHz dual-core

Page 8: Ionic bbl le 19 février 2015

Avec de bons navigateurs

Page 9: Ionic bbl le 19 février 2015

Et des outils efficaces...

Page 10: Ionic bbl le 19 février 2015

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

plupart des cas

Page 11: Ionic bbl le 19 février 2015
Page 12: Ionic bbl le 19 février 2015

“Hello”

Page 13: Ionic bbl le 19 février 2015

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

Page 14: Ionic bbl le 19 février 2015

AngularJS

● Framework JavaScript MVC le plus populaire actuellement.

● Créé par Google.

Page 15: Ionic bbl le 19 février 2015

Ionic

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

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

Créé par

Page 16: Ionic bbl le 19 février 2015

Natif

Web

Téléphone & APIs natives

Cordova : webview +JavaScript bridges

AngularJS

Ionic

Votre applicationStack technologique

Page 17: Ionic bbl le 19 février 2015

Composants Ionic

Page 18: Ionic bbl le 19 février 2015

<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

Page 19: Ionic bbl le 19 février 2015

<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

Page 20: Ionic bbl le 19 février 2015

<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

Page 21: Ionic bbl le 19 février 2015

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>

Page 22: Ionic bbl le 19 février 2015

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

Page 23: Ionic bbl le 19 février 2015

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>

Page 24: Ionic bbl le 19 février 2015

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

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

Page 25: Ionic bbl le 19 février 2015

Getting started

Page 26: Ionic bbl le 19 février 2015

Installer Ionic et Cordova

$ npm install -g cordova ionic

Page 27: Ionic bbl le 19 février 2015

Ionic templates

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

Page 28: Ionic bbl le 19 février 2015

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]

Page 29: Ionic bbl le 19 février 2015
Page 30: Ionic bbl le 19 février 2015

Ionic SDK

Page 31: Ionic bbl le 19 février 2015

● Livereload

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

● Intégration de Crosswalk

Page 32: Ionic bbl le 19 février 2015

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

Page 33: Ionic bbl le 19 février 2015
Page 34: Ionic bbl le 19 février 2015

Ionic Ions

http://ions.ionic.io/

Page 35: Ionic bbl le 19 février 2015

Ionic Creator

Page 36: Ionic bbl le 19 février 2015

Ionic View

Page 37: Ionic bbl le 19 février 2015

Ionic Backend

● Push

● Analytics

● A/B testing

● LiveUpdate

● Packaging

Page 38: Ionic bbl le 19 février 2015

Et d’autres initiatives...

Page 39: Ionic bbl le 19 février 2015
Page 40: Ionic bbl le 19 février 2015

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/

Page 42: Ionic bbl le 19 février 2015

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

}

})

Page 43: Ionic bbl le 19 février 2015

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

}

});

})

Page 44: Ionic bbl le 19 février 2015

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

}

});

})

Page 45: Ionic bbl le 19 février 2015

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

Page 46: Ionic bbl le 19 février 2015

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

Page 47: Ionic bbl le 19 février 2015

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

Page 48: Ionic bbl le 19 février 2015

Merci :)