Symposium Ionic Framework - Versusmind


Arthur Maroulier

Consultant IT

Benoit Zohar

Directeur Technique

"On va faire une app mobile"

Les SDK natifs

sont géniaux !

Composants UI, API, vues, navigation, historique, transitions, interactions, gestes, etc.

Inconvénients du natif

  • Compétences requises pour chaque plate-forme
  • Code différent
  • Développement long et coûteux
  • Peu rentable
"On va faire une app mobile hybride"

principe du

“write once and run anywhere”
2007 c'est fini !
Device Processeur RAM
2007 iPhone 620 MHz 128 Mo
2010 iPhone 4 1 GHz 512 Mo
2010 Galaxy S 1 GHz 394 Mo
2014 iPhone 6 1.4 GHz double-coeur 1 Go
2014 OnePlus One 2.5GHz quadri-coeur 3 Go

Surcouches aux API natives

  • Gratuites ou non
  • Apprentissage plus rapide
  • Offrant plus ou moins de fonctionnalités et services
  • Communautés plus ou moins actives et cibles différentes

https://mixpanel.com/trends/#report/ios_8/from_date:-141,report_unit:day,to_date:0

https://mixpanel.com/trends/#report/android_os_adoption

Les standards web

se sont améliorés !

caniuse.com affiche pas mal de vert

Les utilisateurs tiennent leurs devices à jour

Nous pouvons donc tirer meilleur partie des technologies Web

  • Applications Hybrides
  • HTML5 qui agit comme du natif
  • Web encapsulé dans une app native
  • Accès direct aux API natives
  • Environnement de développement web familier
  • Un code unique
  • Phonegap devient Cordova

Une floppée de solutions

gratuites ou non

Apprentissage plus rapide

Offrant plus ou moins de fonctionnalités et services

Communautés plus ou moins actives et cibles différentes

  • Fondée en 2012 par Ben Sperry (CEO) et Max Lynch (CTO)
  • Aider à concevoir des applications mobile et sites web responsive design
  • Participant TechStars Cloud 2013 incubator
  • Créateurs de Codiqa et Jetstrap
  • Revenus x10 grâce à ces deux produits
  • La même année un troisième produit est lancé
  • Levée de fonds d'un million de dollars en 2014
  • Levée de fonds de 2,6 million de dollars le 30/03/2015
Se concentrer sur le développement de l'app elle même
plutôt que de recréer comment une app fonctionne.

Technologies que l'on

Connait &

Repose sur

Angular

Éprouvé pour le développement de grosses applications

Composants UI utilisant des Directives & Services

Framework MVW

Directives, Services, Fabriques, Controlleurs, Filtres, Templates, Promises, ...

Injection de dépendances

Two way data binding

Testabilité

Centré sur le Natif

  • Modèle pris sur les SDK natifs
  • Construit pour fonctionner avec Cordova

Performances optimisées

  • Accélération matérielle
  • Manipulations du DOM minimales
  • Suppression du tap delay gain de 300ms

Bon vieux CSS

  • Cohérence visuelle par rapport à l'OS
  • Simple et épuré
  • Facile à personnaliser

Sass!

CSS générées à partir de fichiers Sass

Permet de donner à votre app son propre look and feel

CSS conçues pour être facilement surchargées

Basées sur des variables avec valeurs par défaut

80+ mixins

Pour résumer

  • Votre App
  • Ionic
  • Angular
  • WebView (Cordova)
  • App Native

Tests Ionic Angular

Il s'agit d'app AngularJS !

  • Karma
  • Protractor

Side Menu




  

    

  

  

    
      
Left Menu

    

    
      ...

Collection Repeat

  • Remplace ng-repeat d'Angular
  • Inspirée par UICollectionView (iOS)
  • Scroll à travers des milliers d'éléments
  • Rends seulement les éléments visibles
  • Scroll fluide !



  

    
{{ c.name }}

    
{{ c.email }}

Navigation

  • Utilisation d'AngularUI Router
  • Affiche un bouton retour
  • Transitions suivant la direction de la navigation
  • Met à jour l'URL de l'app
  • Plusieurs piles d'historique

Vues mises en cache

  • Vues gardées dans le DOM
  • $scope déconnecté lorsque la vue est cachée
  • État maintenu
  • Positions de scroll maintenues
  • Événements de cycle
  • Configurable

Swipe to go back

  • Swipe depuis le bord gauche pour revenir à la vue précédente
  • Transition interactive
  • Utilise le cache des vues
  • Met aussi à jour l'URL de l'app

Spinners

  • SVG animés
  • Pas de simples icônes animées
  • Plus beaux et plus nets
  • Par défaut, le spinner de plate-forme
  • Personnalisable avec des CSS

Autres Composants

  • Menus
  • Actionsheet
  • Modal
  • Pull To Refresh
  • Slidebox
  • Scroll infini
  • Élément de liste interactif
  • Popup
  • Popover
  • Overlay de chargement
  • Éléments de formulaire
  • etc.

Ionicons

Plus de 700 font-icons incluses sous licence MIT

ionicons.com

...il y a plus
l'écosystème Ionic ne se limite pas
au framework et à ngCordova

Ionic CLI

En 4 commandes vous êtes prêt à coder

  • $ npm install -g ionic cordova
  • $ ionic start myapp sidemenu
  • $ cd myapp
  • $ ionic serve

Ionic CLI

  • Génère une structure d'app fonctionnelle prête à être modifiée
  • Serveur local
  • Outils préconfigurés : Gulp, Sass, Bower, etc
  • Compile et lance les apps natives
  • LiveReload en local et sur les devices
  • Génération des icônes et des splashscreens

Templates Ionic

  • $ ionic start myapp blank
  • $ ionic start myapp tabs
  • $ ionic start myapp sidemenu
  • $ ionic start myapp maps
  • $ ionic start myapp salesforce
  • $ ionic start myapp complex-list
  • $ ionic start myapp tests

Platforme

En 3 commandes testez sur votre device

  • $ ionic platform add ios
  • $ ionic build ios
  • $ ionic run ios

Les chiffres

  • 17 000+ Github Stars
  • Top 40 des dépôts les plus aimés sur Github
  • Constamment dans le Top 10 des dépôts JS tendance sur Github
  • Ionic CLI 4400 téléchargements/jour
  • 600 000+ app Ionic crées depuis Ionic CLI
  • Alpha : Novembre 2013
  • Beta : Mars 2014
5 mars 2015
12 mai 2015

LICENCE MIT

Gratuit
(même pour usage commercial)

Demo||||

Prochainement

  • Modularité des composants
  • Animations personnalisables
  • Webworkers et Multi-threading
  • Plus de services Ionic.io
  • ...et bien plus à venir ;)

Merci à

@adamdbradley

@benjsperry

@maxlynch

@andrewtjoslin

Katie Ginder-Vogel

</html>

@arthurmaroulier

@benoitzohar

@Versusmind

http://ionic-symposium.maroulier.com/