Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015

Le développement mobile hybride sort du bois

@loicknuchel

Loïc Knuchel

Développeur web full-stack

Fondateur de SalooN

Fan de depuis l’alpha ;)

Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/

Ionic View

http://view.ionic.io/

Hybride vs Natif

Hybride vs Natif

Hybride vs Natif

Les promesses du natif

Une expérience utilisateur au top !

Des millions d’utilisateurs (et de $$$)

Réalité :

Le natif coûte cher $$$

Réalité :

Le natif coûte cher $$$

Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$

Réalité :

Le natif coûte cher $$$

Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$

Le multi-platforme coûte très très cher $$$$$$$$$$$$$$$$$$$$$$$$$$$$$

Réalité :

Le natif coûte cher $$$

Une bonne UX/UI coûte très cher $$$$$$$$$$$$$$$

Le multi-platforme coûte très très cher $$$$$$$$$$$$$$$$$$$$$$$$$$$$$

Les promesses de l’hybride

Du cross-platform easyyyyyy (iOS, Android, WindowsPhone, Blackberry, Symbian, Bada, WebOS, FirefoxOS…)

Les mêmes possibilités que le natif !

Vous connaissez et utilisez déjà les technos web (HTML, CSS, JavaScript)

Pas cher :)

Réalité :

Réalité :

Full-bullshit ?

Ce sont les développeurs qui font une bonne application ! Pas une techno !

Quel objectif ? Avec quels moyens ?

STOP au nombrilisme technique !

Une application est bien plus que du code !Service / UX / Valeur perçue / Design ...

“Hello”

Cordova

“Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript”

● 2009: Nitobi crée PhoneGap● 2011: Adobe rachète PhoneGap● 2012: PhoneGap est cédé à Apache sous le nom de Cordova

Framework UI spécialisé mobile et basé sur Angular

- Styles- Directives- Outils

Natif

Web

Téléphone & APIs natives

Cordova : webview +JavaScript bridges

AngularJS

Ionic

Votre applicationStack technologique

Ionic, c’est le bootstrap des applications mobiles

hybrides (et bien plus...)

Ionic vs concurrents

Ratchet

CommunautéStars Commits Contributeurs Issues Pull-requests

Ionic Framework 15 500 3783 167 2730 475

Famo.us 6800 924 74 364 228

Framework7 3966 1386 22 349 91

Reapp 2085 2015 9 26 9

Onsen UI 1823 2508 41 385 131

Le 14/04/2015

Popularité

Ionic is unique

Platform continuity

Funding : $1M + $2.6M

Ionic toolset

Ionic CLI

Cordova CLI wrapper+

A lot of nice features !

Workflow

$ ionic start myApp blank --sass$ cd myApp$ ionic serve --lab$ ionic platform add android$ ionic resources$ ionic run -l

$ ionic serve --lab

Icon & Splashscreen

$ ionic resources

Livereload

● Navigateur $ ionic serve [--lab]

● Téléphone $ ionic run -l [-c -s]

Crosswalk

$ ionic browser add crosswalk

Ionic View

ionicview

ngCordova

“Gadgets”

$ ionic docs collection-repeat

● Ionicons● Ionic creator● Ionic box

Soon...

Ionic deploy

“The Ionic deploy service makes it possible to

ship new updates to your app without going

through the app store resubmission process.”

Ionic Marketplace

Et beaucoup d’autres services...

● Analytics● A/B tests● ...

Ce que j’attends...

Mock des plugins dans le navigateur

Industrialisation (cf tarifa)

● environnements de build : app package, icon & variables

Material design (cf ionicmaterial.com)

Démo

Testez avec Ionic View ;)

Ressources officielles

http://ionicframework.com/docs/http://codepen.io/ionic/public-list/http://learn.ionicframework.com/http://ngcordova.com/http://forum.ionicframework.com/

Ressources communautaires

http://loic.knuchel.org/blog/ @loicknuchel

https://blog.nraboy.com/ @nraboy

http://mcgivery.com/ @andrewmcgivery

http://www.raymondcamden.com/ @raymondcamden

http://devgirl.org/ @devgirlFL

Ressources autres

https://github.com/loicknuchel/ionic-starterhttp://ionicmaterial.com/https://material.angularjs.org/

Inspiration

http://www.mobile-patterns.com/http://pttrns.com/http://mycolorscreen.com/

Questions ?@loicknuchel - http://loic.knuchel.org/