Ionic Framework Introduction

Ionic Framework
Lavenir du mobile sera hybride !

?
?
?
Freelance
Dveloppeur web full-stack
Entrepreneur
Cookers / SalooN
Loc Knuchel
Geek passionn
[email protected]
@loicknuchel
http://loic.knuchel.org/
Un petit historique...
Juin 2007 Septembre 2008

Ide : Mars 2009

Coder des applications mobiles
entirement dans la webview
Avantages :
Technologies connues
Cross-platform
UI moche Oups...
UI peu ractive
UI pas intgre lOS
Bugs
Mauvaise qualit
=> petits budgets

Novembre 2013
Ionic est le bootstrap des applications mobiles (et bien plus)

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 dune application Ionic
Web
Votre application
Ionic
AngularJS
Cordova : webview +
JavaScript bridges
Tlphone & APIs natives
Natif
Ionic cest :
Une forte attention aux performances
Mise en cache des vues
FastClic
Collection-repeat
Multiples retours dexprience :

Les utilisateurs ne se plaignent pas des performances !
Ionic cest :
Ionic et Angular nont pas t pens pour les performances
Contrairement leur version 2 !!!

Ionic cest :

Un design simple et propre
Ionic cest :

Ionic2 preview
Ionic2 preview
Ionic2 preview
Ionic cest :

Tous les composants basiques essentiels
Header / Footer Tabs

Bouttons Side Menu
Icnes Action Sheet
Listes Slides
Cartes Popover
Formulaires Modal
Gestures Popup
Ionic cest :

Tous les composants basiques essentiels
Une Marketplace
Thmes complets
Exemples dintgration de services

Restaurant App
Music App
Firebase
Event App
Parse
Instagram clone
Wordpress
e-commerce App
Messenger clone
Plugins & composants Tinder clone
Timeline
Search bar
Swipeable Cards http://market.ionic.io/
Gallery
https://ionicthemes.com/
http://codecanyon.net/category/mobile/native-web
http://www.gajotres.net/best-looking-ionic-framework-themes/
#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
Dmarrer un projet ionic start myApp sidemenu --sass

Ajouter une platforme ionic platform add android
Livereload dans le navigateur ionic serve --lab
Livereload sur le tlphone ionic run -l
Ajouter un plugin ionic plugin add <package>
Gnrer les icnes ionic resources
Uploader lapp sur ionic.io ionic upload

Partager lapp avec Ionic view ionic share <email>
Builder lapp sur ionic.io ionic package build android
Ionic Lab
http://lab.ionic.io/
ngCordova
ActionSheet Vibration
AdMob SQLite
App Avaiability Splashscreen
App Rate Social Sharing
App Version SMS
Badge Push Notifications
Background Geolocation Progress Indicator
Battery Status Printer
Barcode Scanner Preferences
Calendar Pin Dialog
Camera OAuth
Capture Network
Clipboard Native Audio
Contacts Media
Date picker Local Notification
Device Keychain
Device Motion Keyboard
Device Orientation In App Browser
Dialogs Image Picker
Email Composer Health Kit
Facebook Google Analytics
File Globalization
File Transfer Geolocation
FileOpener2 Flashlight
Ionic Services
Hybrid killer features
Faire tlcharger son application est difficile !
?
Faire tlcharger son application est difficile !
11.7 Mo / Pas de deep linking !

Applications isomorphiques
Applications isomorphiques
Accs direct !
http://bit.ly/bdx-ionic
Deep linking !
3,9 Mo seulement !
Ionic View
Ionic Deploy
#ContinuousDelivery
#A/B testing
#Rollback
Ionic in a nutshell: Apps are small, they should be built quickly, cheaply, updated in realtime,
...
Max Lynch
Ionic 2
Performance
Simplicit
Pens pour le futur
Sapprocher de lUX native
Libert de cration
Ionic 2
Proprits la place des classes
V1 :
<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>
V2 :
<button block>Default</button>
<button secondary block>Secondary</button>
<button danger block>Danger</button>
<button light block>Light</button>
<button dark block>Dark</button>
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
V1 :
$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;
V2 :
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
) !default;
$colors: (
primary: #387ef5,
myBrand: #ead351
) !default;
Navigation Push/Pop
exit UI-router
Pas lie aux URLs
Inspir de la navigation sous iOS
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 dv web est maintenant aussi un dv mobile
Ionic permet de :
dvelopper de manire simple & agrable

faire de belles applications
avec les technologies daujourdhui et demain
Mangez en, cest bon !

@loicknuchel

Ionic Framework Introduction

Transféré par

Droits d'auteur :

Formats disponibles

Ionic Framework Introduction

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ionic Framework Introduction

Transféré par

Droits d'auteur :

Formats disponibles

Ionic Framework

Lavenir du mobile sera hybride !

Dveloppeur web full-stack

Juin 2007 Septembre 2008

Ide : Mars 2009

=> petits budgets

Ionic est le bootstrap des applications mobiles (et bien plus)

Ionic empowers web developers to build compelling mobile apps

Tlphone & APIs natives

Une forte attention aux performances

Mise en cache des vues

Multiples retours dexprience :

Une forte attention aux performances

Ionic et Angular nont pas t pens pour les performances

Contrairement leur version 2 !!!

Une forte attention aux performances

Une forte attention aux performances

Une forte attention aux performances

Header / Footer Tabs

Une forte attention aux performances

Dmarrer un projet ionic start myApp sidemenu --sass

Uploader lapp sur ionic.io ionic upload

11.7 Mo / Pas de deep linking !

Pens pour le futur

Sapprocher de lUX native

Inspir de la navigation sous iOS

import SecondPage from '../secondpage';

20/21 octobre 2015

Un dv web est maintenant aussi un dv mobile

dvelopper de manire simple & agrable

Mangez en, cest bon !

Vous aimerez peut-être aussi