Comment créer une application mobile cross-platforme (android & iOS) en utilisant le framework client Vue.js ? Workshop présenté à GEN6 le 13/09/2018 par Jordan Matejicek CTO / Associé @Owlie et Joffrey Da Rocha Développeur JavaScript @Owlie.

1. Le développement mobile avec Vue.js
Cross-platform et Progressive Web Apps

2. Nous facilitons l’innovation et le développement agile de solutions web & mobile créatives, robustes et performantes.
A propos du studio
Owlie
Présentation
Point de vue sur l’avenir des applications
VueJS, tendance ou vrai bon framework ?
1
2
3
Un peu de code avec une application todolist
Un exemple
4

3. Jordan Matejicek
CTO & Co-Founder
Joffrey Da Rocha
Développeur JS
Cédric Oeblinger
CEO & Co-Founder
Studio d’innovation à taille
humaine implanté à Metz en
Lorraine, notre mission est de
ré-enchanter la relation entre un
prestataire et son client pour
développer de meilleurs produits
digitaux.
Mieux nous connaître
A propos
Eric Scholl
Développeur JS & Android
Matthieu Rapenne
Développeur JS

4. 1 2 3
4
5
Réduire les délais de
mise sur le marché
(Time to Market)
Réduire les coûts avec
des fonctionnalités à forte
valeur
Confronter rapidement
une idée aux utilisateurs
pour obtenir des feedbacks
Récupérer des
données utilisateurs
(web/app analytics)
Un projet qui prend
enfin vie et présentable
à vos investisseurs
Notre mission
Les raisons de nos choix technologiques

5. Comparatif
- TypeScript (typage fort)
- Lourd
- “Only the Angular Way”: en général une seule bonne
manière de faire
- Bonne communauté
- “Usine à gaz”

6. Comparatif
- Courbe d’apprentissage abrupte
- JSX obligatoire
- Léger
- React Native
- Documentation parfois incomplète (merci la communauté)

7. Comparatif
- Rapide à prendre en main
- Ultra léger (10% du poids d’Angular)
- Pur JavaScript
- Documentation complète et bien faite
- Communauté en plein essor
- Jeune et plein de promesses !

8. Vue VS react VS angular
Tendances des recherches sur les frameworks Javascript

9. Frameworks compatibles avec VueJS
- Quasar Framework
- Vuetify
- OnsenUI
- Framework 7
…
- Nativescript

10. Comparatifs des frameworks
DESKTOP (electron) MOBILE WEB
Quasar Framework
Vuetify
OnsenUI
Quasar Framework
Vuetify
OnsenUI
Nativescript
Framework 7
Quasar Framework
Vuetify
OnsenUI
Framework 7

11. Quelques applications développées par
Owlie sous VueJS

12. BonjourMetz
Structure : Startup
Activité : Dynamiser le commerce de proximité
Projet : Progressive Web App
PUSH NOTIFICATION
Mise en place d’un service de push
notification
WEB APP
Mise à jour instantanée sans contrainte
de téléchargement sur le store
SIMPLE & INTUITIVE
Amélioration de l’expérience utilisateur
et mise en place d’un nouveau stack
technique

13. MyBibou
Structure : Startup
Activité : Service d’aide aux jeunes parents
Projet : Site web + App iOS + App Android
ORGANISATION
Préparation d’une visite d’un lieu et
accès rapide aux résultats favoris
GEOLOCALISATION
Recherche d’un lieu adapté via la
géolocalisation
SUGGESTION
Recommandation et suggestion de lieux
par la communauté

14. Tuttis
Structure : Startup
Activité : Plateforme communautaire infirmiers
Projet : Site web + App iOS + App Android
GAMIFICATION
Un système de niveaux qui incite
l’utilisateur à contribuer à la plateforme
pour débloquer des avantages exclusifs
CROSS-PLATEFORME
Une communauté de pratiques qui peut
s’entraider sur mobile et web
SIMPLE & PUISSANTE
Rédaction & lecture de contenu
optimisées, moteur de recherche avancé

15. SOFOOT.COM
Structure : PME / Média
Activité : Site de l'actualité football décalée
Projet : App iOS + App Android
PUSH NOTIFICATION
Mise en place d’un service de push
notification
FLUX INTELLIGENT
Une toute nouvelle manière de naviguer
sur mobile à travers un flux intelligent
proposant des contenus personnalisés
TEMPS-RÉEL
Actualisation en temps-réel des contenus
permettant de ne rater aucune
information essentielle

16. MonPetitResto
Structure : Startup
Activité : Foodtech, service client & restaurateur
Projet : Site web + App iOS + App Android
COMMANDE & PAIEMENT
Sélection de produits et personnalisation
de plats, paiement in-app 100% sécurisé
RECHERCHE
Recherche rapide et géolocalisée d’un
restaurant proposant des plats sur place
ou à emporter
SUIVI
Suivi en temps réel de l’avancement de la
commande, récupération sur place avec
un numéro de commande

17. Point de vue sur l’avenir des applications
- Le natif a du sens quand les performances le demandent (applications lourdes /
complexes / rendu nécessitant une optimisation 3D)
- Chaque mois un utilisateur visite 100 sites mais ne télécharge aucune application
(points bloquants : consommation temps / mémoire)
- PWA, PWA et PWA !

18. PWA, Progressive Web App
- Rapide
Répond rapidement aux interactions, animations fluides
- Fiable
Aucun blocage, n’affiche jamais le dinosaure chrome même en cas de perte de
connexion
- Engageante
Propose une expérience plein écran similaire à une application native

19. Objectif des PWA
Capacité
Portée
Applications
mobiles
PWA
Web

20. <3

21. Un exemple, application Todo
sous Quasar Framework
utilisant
VueX (store)
Vue router
Firebase