ionic framework, l'avenir du mobile sera hybride, bdx.io le 16-10-2015
TRANSCRIPT
L’avenir du mobile sera hybride !
Ionic Framework
?
?
?
Loïc Knuchel
Freelance
Développeur web full-stack
Entrepreneur
Cookers / SalooN
@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-repeatFastClic
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-webhttp://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
ngCordova
AdMobApp Avaiability
App Rate
ActionSheet
App VersionBadge
Background GeolocationBattery Status
Barcode ScannerCalendarCameraCapture
ClipboardContacts
Date pickerDevice
Device MotionDevice Orientation
DialogsEmail Composer
FacebookFile
File TransferFileOpener2
SQLiteSplashscreenSocial Sharing
Vibration
SMSPush NotificationsProgress IndicatorPrinterPreferencesPin DialogOAuthNetworkNative AudioMediaLocal NotificationKeychain
KeyboardIn App Browser
Image PickerHealth Kit
Google AnalyticsGlobalization
GeolocationFlashlight
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-ionicAccè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
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