ionic framework, l'avenir du mobile sera hybride, bdx.io le 16-10-2015

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-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

Ionic Lab

http://lab.ionic.io/

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

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