Affranchissons nous des problèmes du développement hybride sur mobile
Ionic Framework
Pourquoi faire de l’hybrid
?
Mais pourquoi tant de haine ?
Pourquoi ne surtout pas faire
de l’hybrid ?
Gros besoin de performance
Je veux des effets au top sinon rien
Rapport natif ...
L’hybrid sans ionic
+
=
Ce qui ne change pas :’(
La validation AppStore
On pense une application mobile différemment d’un
site web
Les composants
Header / footer
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-c...
Listes
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCan...
ActionSheet
var hideSheet =
$ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This'
},
{ text: 'Move' }
],
destruc...
SlideBox
<ion-slide-box on-slide-
changed="slideHasChanged($ind
ex)">
<ion-slide>
<div class="box
blue"><h1>BLUE</h1></div...
SideMenu
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-
controller="ContentController
">
</ion-side-m...
Initialisation d’une
application
npm install -g cordova ionic
ionic start myApp tabs
ionic serve
Les nouveaux outils ionic
ngCordova
Ionic Creator https://creator.ionic.io/
Ionic + Crosswalk
http://ionicframework.com/bl...
Windows & Fox ?
Pas encore dispo mais des pistes :
http://appfoundry.be/blog/2014/10/16/ionic-
windows-phone/
Retrouvez nous sur http://donkeycode.com ou
Twitter @_donkeycode
Ionic Framework
Prochain SlideShare
Chargement dans…5
×

Paris js#42 - IonicFramework : Affranchissons nous des problèmes du développement hybride sur mobile

922 vues

Publié le

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

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
922
Sur SlideShare
0
Issues des intégrations
0
Intégrations
152
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Paris js#42 - IonicFramework : Affranchissons nous des problèmes du développement hybride sur mobile

  1. 1. Affranchissons nous des problèmes du développement hybride sur mobile Ionic Framework
  2. 2. Pourquoi faire de l’hybrid ?
  3. 3. Mais pourquoi tant de haine ?
  4. 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. 5. L’hybrid sans ionic
  6. 6. + =
  7. 7. Ce qui ne change pas :’( La validation AppStore
  8. 8. On pense une application mobile différemment d’un site web
  9. 9. Les composants
  10. 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. 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. 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. 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. 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. 15. Initialisation d’une application npm install -g cordova ionic ionic start myApp tabs ionic serve
  16. 16. Les nouveaux outils ionic ngCordova Ionic Creator https://creator.ionic.io/ Ionic + Crosswalk http://ionicframework.com/blog/crosswalk-comes- to-ionic/
  17. 17. Windows & Fox ? Pas encore dispo mais des pistes : http://appfoundry.be/blog/2014/10/16/ionic- windows-phone/
  18. 18. Retrouvez nous sur http://donkeycode.com ou Twitter @_donkeycode Ionic Framework

×