Nous avons présenté cette semaine ionicframework lors du ParisJS #42 chez ESIA. L'objectif etait de présenter pourquoi utiliser ionicframework, et pourquoi le developpement hybrid n'est pas encore tout à fait adquat. En voici donc un résumé avec nos slides. Retrouvé les explications sur : http://www.donkeycode.com/blog/2015/01/24/ionicframework-parisjs-42.html

1. Affranchissons nous des problèmes du développement hybride sur mobile
Ionic Framework

2. Pourquoi faire de l’hybrid
?

3. Mais pourquoi tant de haine ?

4. Pourquoi ne surtout pas faire
de l’hybrid ?
Gros besoin de performance
Je veux des effets au top sinon rien
Rapport natif / html
Une seul plateforme ciblée

5. L’hybrid sans ionic

6. +
=

7. Ce qui ne change pas :’(
La validation AppStore

8. On pense une application mobile différemment d’un
site web

9. Les composants

10. Header / footer
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">
Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>

11. Listes
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
http://ionicframework.com/docs/api/directive/ionList/

12. ActionSheet
var hideSheet =
$ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This'
},
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index)
{
return true;
}
});

13. SlideBox
<ion-slide-box on-slide-
changed="slideHasChanged($ind
ex)">
<ion-slide>
<div class="box
blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box
yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box
pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>

14. SideMenu
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-
controller="ContentController
">
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu
side="right">
</ion-side-menu>
</ion-side-menus>

15. Initialisation d’une
application
npm install -g cordova ionic
ionic start myApp tabs
ionic serve

16. Les nouveaux outils ionic
ngCordova
Ionic Creator https://creator.ionic.io/
Ionic + Crosswalk
http://ionicframework.com/blog/crosswalk-comes-
to-ionic/

17. Windows & Fox ?
Pas encore dispo mais des pistes :
http://appfoundry.be/blog/2014/10/16/ionic-
windows-phone/

18. Retrouvez nous sur http://donkeycode.com ou
Twitter @_donkeycode
Ionic Framework