Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,100 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×