SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
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://loic.knuchel.org/
Geek passionné
Un petit historique...
Juin 2007 Septembre 2008
Un petit historique...
Idée :
Coder des applications mobiles
entièrement dans la webview
Avantages :
● Technologies connues
● Cross-platform
Mars 2009
Un petit historique...
Oups...● UI moche
● UI peu réactive
● UI pas intégrée à l’OS
● Bugs
● Mauvaise qualité
=> petits budgets
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 change careers.” - Max Lynch, Ionic CEO
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
Votre application
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 !
Ionic c’est :
● Une forte attention aux performances
Ionic et Angular n’ont pas été pensé pour les performances…
Contrairement à leur version 2 !!!
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 essentiels
● Header / Footer
● Bouttons
● Icônes
● Listes
● Cartes
● Formulaires
● Gestures
● Tabs
● Side Menu
● Action Sheet
● Slides
● Popover
● Modal
● Popup
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
#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.” - Max Lynch
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
Ionic Lab
http://lab.ionic.io/
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
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, cheaply, updated in realtime,
...”
Max Lynch
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"></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 :
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>
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 :
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();
};
};
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 de belles applications
● avec les technologies d’aujourd’hui et demain
Mangez en, c’est bon !
@loicknuchel

Contenu connexe

Tendances

Tendances (13)

BlaBlaCar - Going Native !
BlaBlaCar - Going Native ! BlaBlaCar - Going Native !
BlaBlaCar - Going Native !
 
J'ai fait une app native en React Native
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
 
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Code flow - Cocoaheads paris
Code flow - Cocoaheads parisCode flow - Cocoaheads paris
Code flow - Cocoaheads paris
 
ngParis - Rendu cote serveur
ngParis - Rendu cote serveurngParis - Rendu cote serveur
ngParis - Rendu cote serveur
 
REX react native
REX react nativeREX react native
REX react native
 
Introduction à Vaadin
Introduction à VaadinIntroduction à Vaadin
Introduction à Vaadin
 
Introduction to WebRTC on iOS
Introduction to WebRTC on iOSIntroduction to WebRTC on iOS
Introduction to WebRTC on iOS
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Présentation iBeacon (cocoaheads toulouse)
Présentation iBeacon (cocoaheads toulouse)Présentation iBeacon (cocoaheads toulouse)
Présentation iBeacon (cocoaheads toulouse)
 

En vedette

вступна презентація виховного проекту «швець без чобіт
вступна презентація виховного проекту «швець без чобітвступна презентація виховного проекту «швець без чобіт
вступна презентація виховного проекту «швець без чобіт
ovrasviktoria
 
Eqpo 7 entorno de trabajo (escritorio)
Eqpo 7 entorno de trabajo  (escritorio)Eqpo 7 entorno de trabajo  (escritorio)
Eqpo 7 entorno de trabajo (escritorio)
Alfredo Hernandez
 

En vedette (20)

3 Spiritual Pitfalls
3 Spiritual Pitfalls3 Spiritual Pitfalls
3 Spiritual Pitfalls
 
What houston has to offer
What houston has to offerWhat houston has to offer
What houston has to offer
 
Influencers Copy
Influencers CopyInfluencers Copy
Influencers Copy
 
Presentacion equipo 7
Presentacion equipo   7Presentacion equipo   7
Presentacion equipo 7
 
педагогічна рада охорона праці
педагогічна рада охорона праціпедагогічна рада охорона праці
педагогічна рада охорона праці
 
вступна презентація виховного проекту «швець без чобіт
вступна презентація виховного проекту «швець без чобітвступна презентація виховного проекту «швець без чобіт
вступна презентація виховного проекту «швець без чобіт
 
Star 22 26 32
Star 22 26 32Star 22 26 32
Star 22 26 32
 
How to market yourself on linked in
How to market yourself on linked inHow to market yourself on linked in
How to market yourself on linked in
 
Can We Speak in Tongues Today?
Can We Speak in Tongues Today?Can We Speak in Tongues Today?
Can We Speak in Tongues Today?
 
Give Thanks
Give ThanksGive Thanks
Give Thanks
 
Simon Havingaschool
Simon HavingaschoolSimon Havingaschool
Simon Havingaschool
 
Pentecost: What An Amazing Day!
Pentecost: What An Amazing Day!Pentecost: What An Amazing Day!
Pentecost: What An Amazing Day!
 
2014 스마트한 교실수업
2014 스마트한 교실수업2014 스마트한 교실수업
2014 스마트한 교실수업
 
задачі на відсотки
задачі на відсоткизадачі на відсотки
задачі на відсотки
 
BreeCS Example Report - Co2 by Contractor
BreeCS Example Report - Co2 by ContractorBreeCS Example Report - Co2 by Contractor
BreeCS Example Report - Co2 by Contractor
 
Capitulo 8
Capitulo 8Capitulo 8
Capitulo 8
 
Eqpo 7 entorno de trabajo (escritorio)
Eqpo 7 entorno de trabajo  (escritorio)Eqpo 7 entorno de trabajo  (escritorio)
Eqpo 7 entorno de trabajo (escritorio)
 
Chamonix
ChamonixChamonix
Chamonix
 
формування поняття відсотка 5 кл.
формування поняття відсотка 5 кл.формування поняття відсотка 5 кл.
формування поняття відсотка 5 кл.
 
What You Need to Know About Bottled Water
What You Need to Know About Bottled WaterWhat You Need to Know About Bottled Water
What You Need to Know About Bottled Water
 

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

Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
Loïc Knuchel
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
Sacha Leprêtre
 

Similaire à Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015 (20)

Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Rex ionic
Rex ionicRex ionic
Rex ionic
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
 
02_Chapitre_1_.pdf
02_Chapitre_1_.pdf02_Chapitre_1_.pdf
02_Chapitre_1_.pdf
 
BlendWebMix - Concevez rapidement vos applications mobiles
BlendWebMix - Concevez rapidement vos applications mobilesBlendWebMix - Concevez rapidement vos applications mobiles
BlendWebMix - Concevez rapidement vos applications mobiles
 
Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !Après Coding4Fun, voici NUI4Fun !
Après Coding4Fun, voici NUI4Fun !
 
Midi technique - présentation d'ionic
Midi technique - présentation d'ionicMidi technique - présentation d'ionic
Midi technique - présentation d'ionic
 
Ionic
IonicIonic
Ionic
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
 
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
 

Plus de Loïc Knuchel

Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Loïc Knuchel
 
Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014
Loïc Knuchel
 

Plus de Loïc Knuchel (11)

Scala bad practices, scala.io 2019
Scala bad practices, scala.io 2019Scala bad practices, scala.io 2019
Scala bad practices, scala.io 2019
 
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
 
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
 
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
 
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
 
FP is coming... le 19/05/2016
FP is coming... le 19/05/2016FP is coming... le 19/05/2016
FP is coming... le 19/05/2016
 
Programmation fonctionnelle en JavaScript
Programmation fonctionnelle en JavaScriptProgrammation fonctionnelle en JavaScript
Programmation fonctionnelle en JavaScript
 
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
 
Ionic HumanTalks - 11/03/2015
Ionic HumanTalks - 11/03/2015Ionic HumanTalks - 11/03/2015
Ionic HumanTalks - 11/03/2015
 
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
 
Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014
 

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

  • 1. L’avenir du mobile sera hybride ! Ionic Framework
  • 2. ?
  • 3. ?
  • 4. ?
  • 5. Loïc Knuchel Freelance Développeur web full-stack Entrepreneur Cookers / SalooN loicknuchel@gmail.com @loicknuchel http://loic.knuchel.org/ Geek passionné
  • 6. Un petit historique... Juin 2007 Septembre 2008
  • 7. Un petit historique... Idée : Coder des applications mobiles entièrement dans la webview Avantages : ● Technologies connues ● Cross-platform Mars 2009
  • 8. Un petit historique... Oups...● UI moche ● UI peu réactive ● UI pas intégrée à l’OS ● Bugs ● Mauvaise qualité => petits budgets
  • 10. Un petit historique... Novembre 2013 Ionic est le bootstrap des applications mobiles (et bien plus…)
  • 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. Un framework UI pour les app mobiles ● Styles ● Directives ● Outils
  • 13. Anatomie d’une application Ionic Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application
  • 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. Ionic c’est : ● Une forte attention aux performances Ionic et Angular n’ont pas été pensé pour les performances… Contrairement à leur version 2 !!!
  • 16. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre
  • 17. Ionic c’est : ● Une forte attention aux performances ● Un design simple et propre
  • 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. 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.
  • 25. 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
  • 26. 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
  • 28. 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
  • 31. Faire télécharger son application est difficile ! ?
  • 32. Faire télécharger son application est difficile ! 11.7 Mo / Pas de deep linking !
  • 36. 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
  • 37.
  • 38.
  • 39. Ionic 2 Performance Simplicité S’approcher de l’UX native Liberté de création Pensé pour le futur
  • 41. 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 :
  • 42. 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>
  • 43. 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 :
  • 44. 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(); }; };
  • 47.
  • 48. Annonce officielle probable de Ionic 2 à 20/21 octobre 2015
  • 49. 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 !