L’avenir du mobile sera hybride !
@loicknuchel
Loïc Knuchel
Développeur web freelance
Fondateur de
Fan de depuis l’alpha ;)
Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/
L’histoire du mobile...
Juin 2007
Sortie de l’iPhone
Septembre 2008
Sortie d’Android
Fonctionnalité commune
Le navigateur
La webview
Idée
Coder des applications mobiles entièrement dans la webview.
Avantages :
Mars 2009
Lancement PhoneGap par Nitobi
“PhoneGap is a development framework that lets HTML and JavaScript developers build native mobile phone apps that take advantage of native capabilities of the phone. And it will run on iPhone, Android and BlackBerry, and eventually it will run on other platforms.”
- Andre Charland, CEO of Nitobi
Oups...
Oups...
Applications moches et lentes :(
Octobre 2011
Rachat de Nitobi par Adobe.
Don de PhoneGap à la fondation Apache sous le nom de Cordova.
Aujourd’hui ?
Téléphone puissants
Année | Téléphone | Processeur | RAM |
2007 | iPhone | 620 MHz | 128 MB |
2010 | iPhone 4 | 1 GHz | 512 MB |
2015 | iPhone 6 | 1.4 GHz dual-core | 1 GB |
Amélioration des Webview
Parc de téléphones récent
https://mixpanel.com/trends/#report/ios_9 le 24/09/2015
Parc de téléphones récent
https://mixpanel.com/trends/#report/android_os_adoption le 24/09/2015
Novembre 2013
Ionic framework
Framework UI spécialisé mobile et basé sur Angular
Stack technologique
Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Hybride vs Natif
Les promesses du natif
Une expérience utilisateur au top !
Des millions d’utilisateurs (et de $$$)
Réalité :
Le natif coûte cher
$$$
Réalité :
Le natif coûte cher
$$$
Une bonne UX/UI coûte très cher
$$$$$$$$$$$$$$$
Réalité :
Le natif coûte cher
$$$
Une bonne UX/UI coûte très cher
$$$$$$$$$$$$$$$
Le multi-platforme coûte très très cher
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Réalité :
Le natif coûte cher
$$$
Une bonne UX/UI coûte très cher
$$$$$$$$$$$$$$$
Le multi-platforme coûte très très cher
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
Les promesses de l’hybride
Du cross-platform easyyyyyy
(iOS, Android, WindowsPhone, Blackberry, Symbian, Bada, WebOS, FirefoxOS…)
Les mêmes possibilités que le natif !
Vous connaissez et utilisez déjà les technos web (HTML, CSS, JavaScript)
Pas cher :)
Réalité :
Réalité :
Osef en fait !
Ce sont les développeurs qui font une bonne application ! Pas une techno !
Quel objectif ? Avec quels moyens ?
STOP au nombrilisme technique !
Une application est bien plus que du code !
Service / UX / Valeur perçue / Design ...
Natif : meilleure qualité
Hybride : meilleur qualité/prix
Ionic toolset
Ionic CLI
Cordova CLI wrapper
+
A lot of nice features !
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
Livereload
$ ionic serve [--lab]
$ ionic run -l [-c -s]
$ ionic serve --lab
Icon & Splashscreen
$ ionic resources
ngCordova
Ionic View
ionicview
Ionic Market
Ionic Playground
Et bien d’autres...
Ce que j’attends...
Mock des plugins dans le navigateur
Industrialisation (cf http://tarifa.tools/)
Material design (cf http://ionicmaterial.com/, ionic v2 ?)
Code ?
Composant: Lists
<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: Pull To Refresh
<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: Sidemenu
<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: 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
Liens, docs
http://codepen.io/ionic/public-list/
http://learn.ionicframework.com/
http://forum.ionicframework.com/
http://loic.knuchel.org/blog/ @loicknuchel
http://blog.nraboy.com/ @nraboy
http://mcgivery.com/ @andrewmcgivery
http://www.raymondcamden.com/ @raymondcamden
http://devgirl.org/ @devgirlFL
Liens, services Ionic
http://ionicframework.com/ : Ionic Framework
http://docs.ionic.io/ : Ionic plateforme
http://market.ionic.io/ : Ionic market (themeforest like)
http://play.ionic.io/ : Ionic playground (codepen like)
http://view.ionic.io/ : Ionic view
http://lab.ionic.io/ : Ionic Lab GUI
http://jobs.ionic.io/ : Ionic job board
http://shop.ionic.io/ : Goodies Ionic ;)
https://github.com/driftyco/ionic2-starter : Ionic 2 preview
Questions ?
@loicknuchel - http://loic.knuchel.org/