L’avenir du mobile sera hybride !
Ionic Framework
?
?
?
Loïc Knuchel
Freelance
Développeur web full-stack
Entrepreneur
Cookers / SalooN
loicknuchel@gmail.com
@loicknuchel
http://...
Un petit historique...
Juin 2007 Septembre 2008
Un petit historique...
Idée :
Coder des applications mobiles
entièrement dans la webview
Avantages :
● Technologies connue...
Un petit historique...
Oups...● UI moche
● UI peu réactive
● UI pas intégrée à l’OS
● Bugs
● Mauvaise qualité
=> petits bu...
Un petit historique...
Un petit historique...
Novembre 2013
Ionic est le bootstrap des applications mobiles (et bien plus…)
Un petit historique...
Novembre 2013
“Ionic empowers web developers to build compelling mobile apps
without having to chan...
Un framework UI pour les app mobiles
● Styles
● Directives
● Outils
Anatomie d’une application Ionic
Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic...
Ionic c’est :
● Une forte attention aux performances
Mise en cache des vues
Collection-repeat
FastClic
Multiples retours d...
Ionic c’est :
● Une forte attention aux performances
Ionic et Angular n’ont pas été pensé pour les performances…
Contraire...
Ionic c’est :
● Une forte attention aux performances
● Un design simple et propre
Ionic c’est :
● Une forte attention aux performances
● Un design simple et propre
Ionic2 preview
Ionic2 preview
Ionic2 preview
Ionic c’est :
● Une forte attention aux performances
● Un design simple et propre
● Tous les composants basiques essentiel...
Ionic c’est :
● Une forte attention aux performances
● Un design simple et propre
● Tous les composants basiques essentiel...
#AWESOME !!!
DX
“We want to cater to the 99% who just want to build something functional quickly
and not break the bank to do it.” - Ma...
Ionic CLI
● Démarrer un projet ionic start myApp sidemenu --sass
● Ajouter une platforme ionic platform add android
● Live...
Ionic Lab
http://lab.ionic.io/
ngCordova
AdMob
App Avaiability
App Rate
ActionSheet
App Version
Badge
Background Geolocation
Battery Status
Barcode Scann...
Ionic Services
Hybrid killer features
Faire télécharger son application est difficile !
?
Faire télécharger son application est difficile !
11.7 Mo / Pas de deep linking !
Applications isomorphiques
Applications isomorphiques
http://bit.ly/bdx-ionic
Accès direct !
Deep linking !
3,9 Mo seulement !
Ionic View
Ionic Deploy
#ContinuousDelivery
#Rollback
#A/B testing
“Ionic in a nutshell: Apps are small, they should be built quickly...
Ionic 2
Performance
Simplicité
S’approcher de l’UX native
Liberté de création
Pensé pour le futur
Ionic 2
Propriétés à la place des classes
<a class="button button-positive"></a>
<a class="button button-outlined button-balanced"...
Ionic2 preview
<icon home></icon>
<icon person></icon>
<icon settings></icon>
<icon globe></icon>
<icon lock></icon>
<icon...
Gestion des couleurs
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !defaul...
Navigation Push/Pop
exit UI-router
Inspiré de la navigation sous iOS
Pas liée aux URLs
import SecondPage from '../secondpa...
Platform continuity
Platform continuity
Annonce officielle probable de Ionic 2 à
20/21 octobre 2015
Au final
Un dév web est maintenant aussi un dév mobile
Ionic permet de :
● développer de manière simple & agréable
● faire...
@loicknuchel
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Prochain SlideShare
Chargement dans…5
×

Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015

2 373 vues

Publié le

Découvrez Ionic Framework, le meilleur outil pour les application cordova actuellement.
Il permet de développer des applications mobile hybrides très qualitatives et très simplement. A tester de toute urgence !!!

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

Aucun téléchargement
Vues
Nombre de vues
2 373
Sur SlideShare
0
Issues des intégrations
0
Intégrations
210
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015

  1. 1. L’avenir du mobile sera hybride ! Ionic Framework
  2. 2. ?
  3. 3. ?
  4. 4. ?
  5. 5. Loïc Knuchel Freelance Développeur web full-stack Entrepreneur Cookers / SalooN loicknuchel@gmail.com @loicknuchel http://loic.knuchel.org/ Geek passionné
  6. 6. Un petit historique... Juin 2007 Septembre 2008
  7. 7. Un petit historique... Idée : Coder des applications mobiles entièrement dans la webview Avantages : ● Technologies connues ● Cross-platform Mars 2009
  8. 8. Un petit historique... Oups...● UI moche ● UI peu réactive ● UI pas intégrée à l’OS ● Bugs ● Mauvaise qualité => petits budgets
  9. 9. Un petit historique...
  10. 10. Un petit historique... Novembre 2013 Ionic est le bootstrap des applications mobiles (et bien plus…)
  11. 11. Un petit historique... Novembre 2013 “Ionic empowers web developers to build compelling mobile apps without having to change careers.” - Max Lynch, Ionic CEO
  12. 12. Un framework UI pour les app mobiles ● Styles ● Directives ● Outils
  13. 13. Anatomie d’une application Ionic Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application
  14. 14. Ionic c’est : ● Une forte attention aux performances Mise en cache des vues Collection-repeat FastClic Multiples retours d’expérience : Les utilisateurs ne se plaignent pas des performances !
  15. 15. Ionic c’est : ● Une forte attention aux performances Ionic et Angular n’ont pas été pensé pour les performances… Contrairement à leur version 2 !!!
  16. 16. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre
  17. 17. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre
  18. 18. Ionic2 preview
  19. 19. Ionic2 preview
  20. 20. Ionic2 preview
  21. 21. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre ● Tous les composants basiques essentiels ● Header / Footer ● Bouttons ● Icônes ● Listes ● Cartes ● Formulaires ● Gestures ● Tabs ● Side Menu ● Action Sheet ● Slides ● Popover ● Modal ● Popup
  22. 22. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre ● Tous les composants basiques essentiels ● Une Marketplace http://market.ionic.io/ https://ionicthemes.com/ http://codecanyon.net/category/mobile/native-web http://www.gajotres.net/best-looking-ionic-framework-themes/ Thèmes complets ● Restaurant App ● Music App ● Event App ● Instagram clone ● e-commerce App ● Messenger clone ● Tinder clonePlugins & composants ● Timeline ● Search bar ● Swipeable Cards ● Gallery Exemples d’intégration de services ● Firebase ● Parse ● Wordpress
  23. 23. #AWESOME !!!
  24. 24. DX “We want to cater to the 99% who just want to build something functional quickly and not break the bank to do it.” - Max Lynch
  25. 25. Ionic CLI ● Démarrer un projet ionic start myApp sidemenu --sass ● Ajouter une platforme ionic platform add android ● Livereload dans le navigateur ionic serve --lab ● Livereload sur le téléphone ionic run -l ● Ajouter un plugin ionic plugin add <package> ● Générer les icônes ionic resources ● Uploader l’app sur ionic.io ionic upload ● Partager l’app avec Ionic view ionic share <email> ● Builder l’app sur ionic.io ionic package build android
  26. 26. Ionic Lab http://lab.ionic.io/
  27. 27. ngCordova AdMob App Avaiability App Rate ActionSheet App Version Badge Background Geolocation Battery Status Barcode Scanner Calendar Camera Capture Clipboard Contacts Date picker Device Device Motion Device Orientation Dialogs Email Composer Facebook File File Transfer FileOpener2 SQLite Splashscreen Social Sharing Vibration SMS Push Notifications Progress Indicator Printer Preferences Pin Dialog OAuth Network Native Audio Media Local Notification Keychain Keyboard In App Browser Image Picker Health Kit Google Analytics Globalization Geolocation Flashlight
  28. 28. Ionic Services
  29. 29. Hybrid killer features
  30. 30. Faire télécharger son application est difficile ! ?
  31. 31. Faire télécharger son application est difficile ! 11.7 Mo / Pas de deep linking !
  32. 32. Applications isomorphiques
  33. 33. Applications isomorphiques http://bit.ly/bdx-ionic Accès direct ! Deep linking ! 3,9 Mo seulement !
  34. 34. Ionic View
  35. 35. Ionic Deploy #ContinuousDelivery #Rollback #A/B testing “Ionic in a nutshell: Apps are small, they should be built quickly, cheaply, updated in realtime, ...” Max Lynch
  36. 36. Ionic 2 Performance Simplicité S’approcher de l’UX native Liberté de création Pensé pour le futur
  37. 37. Ionic 2
  38. 38. Propriétés à la place des classes <a class="button button-positive"></a> <a class="button button-outlined button-balanced"></a> <a class="button button-clear button-dark"></a> <a class="button button-assertive button-icon ion-close"></a> <button block>Default</button> <button secondary block>Secondary</button> <button danger block>Danger</button> <button light block>Light</button> <button dark block>Dark</button> V1 : V2 :
  39. 39. Ionic2 preview <icon home></icon> <icon person></icon> <icon settings></icon> <icon globe></icon> <icon lock></icon> <icon mail></icon> <icon options></icon> <icon camera></icon> <icon calculator></icon> <icon finger-print></icon> <icon flash></icon> <icon beer></icon>
  40. 40. Gestion des couleurs $light: #fff !default; $stable: #f8f8f8 !default; $positive: #387ef5 !default; $calm: #11c1f3 !default; $balanced: #33cd5f !default; $energized: #ffc900 !default; $assertive: #ef473a !default; $royal: #886aea !default; $dark: #444 !default; $colors: ( primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, ) !default; $colors: ( primary: #387ef5, myBrand: #ead351 ) !default; V1 : V2 :
  41. 41. Navigation Push/Pop exit UI-router Inspiré de la navigation sous iOS Pas liée aux URLs import SecondPage from '../secondpage'; export class FirstPage { constructor(nav: NavController) { this.nav = nav; }; goNextPage() { this.nav.push(SecondPage); }; goBack() { this.nav.pop(); }; };
  42. 42. Platform continuity
  43. 43. Platform continuity
  44. 44. Annonce officielle probable de Ionic 2 à 20/21 octobre 2015
  45. 45. Au final Un dév web est maintenant aussi un dév mobile Ionic permet de : ● développer de manière simple & agréable ● faire de belles applications ● avec les technologies d’aujourd’hui et demain Mangez en, c’est bon !
  46. 46. @loicknuchel

×