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