Benchmark des différentes technologies de développement mobile cross-plateform.

1. Dev mobile cross-platform

2. Sommaire
1. Comment tout a commencé…
2. Pourquoi faire du cross-platform ?
3. Présentation des challengers
4. Retour d’xp React Native : Cbp
5. Retour d’xp Nativescript : Route du Rhum
2

3. Comment tout a
commencé…

4. Notre réponse
technique#2007

6. 2 OS
2 Stores
2 Plateformes

7. 2 Applications
2 Equipes
2 Budgets

8. Pourquoi du
cross-platform ?

9. Code-sharing !
Une seule base de code entre iOS et
Android !

10. Code-sharing !
Une seule base de code entre iOS et
Android !
Et pourquoi pas partagée avec un site web
?

11. Code-sharing !
Une seule base de code entre iOS et
Android !
Et pourquoi pas partagée avec un site web
?
Et pourquoi pas avec… un serveur d’API ?

12. Code-sharing !
Une seule base de code entre iOS et
Android !
Et pourquoi pas partagée avec un site web
?
Et pourquoi pas avec… un serveur d’API ?
Le Saint-Graal des développeurs :
WORA (Write Once Run Anywhere)
Sun Microsystem

13. Coder-sharingTM !
Codeur frontend réutilisable en mobile et en
back !
Le Saint-Graal des RH et managers :
HODA (Hire Once Dev Anywhere)
Moi

14. Challengers

15. WEBAPP HYBRIDE
« VRAI »
CROSS-PLATFORM
1515

16. Progressive Web App
« Juste » une web app + API + guidelines
• Possibilité d’être installée sur l’écran d’accueil
• Les PWA peuvent permettre à certaines parties des sites et certaines
fonctionnalités d’être disponibles en mode offline.
• Possibilité d’utiliser le push de notification pour augmenter l’engagement des
utilisateurs.
• Pas une app, donc hors sujet…
• Pas d’accès au système…
• Pas de publication dans les stores…
16

17. App hybride
Navigateur wrappé dans une application
native
• Accès aux APIs système via des « ponts ».
• Facilité de développement.
• Publication dans les stores possible.
• Impossibilité d’utiliser des composants UI natifs (pas d’AR,
de filtres…), limitée par les capacités du browser
• UI / UX identique entre les OS sauf à développer les
composants en double…
• Performances…
17

18. App hybride
18

19. App native cross-platform
Runtime JS (JavaScriptCore / V8) embarqué dans une
application native
• Accès full aux APIs système
• UI / UX reposant sur des composants natifs
• Performances proches du full natif
• Live reload en développement
• Remote debugging possible
• Courbe d’apprentissage pour le développement
des vues
19

20. Architecture

21. 21

22. UI / UX

23. 23

24. 24

25. 25

26. 26

27. Comment
choisir ?

29. FONCTIONNALITÉS NATIVES
Photos, contacts, géolocalisation…
LANCEMENT OFFLINE
Démarrage hors connexion
SÉCURITÉ
Code source, chiffrement
DONNÉES OFFLINE
Résistance aux pertes de connexion
en cours d’utilisation
Moins bonnes
performances
Stockage limité :
- LocalStorage : 5Mo
- IndexedDB :
pourcentage espace
restant
Oui, après un 1er
lancement connecté
OK sur Android,
pas sur iOS
+
+
Stockage limité :
- LocalStorage : 5Mo
- IndexedDB :
pourcentage espace
restant
Bonnes performances
générales
Non--
-
+
+
- -
- -
+ -
+ +
+ ++
Push web, support limitéNOTIFICATIONS PUSH
ACCESSIBILITÉ
Pour mal-voyants
COMPATIBILITÉ
OS, navigateurs…
Code source directement
lisible.
Données lisibles en local.
Code source directement
lisible.
Données lisibles en local.
De plus en plus de
fonctions supportées
(push, géolocalisation,
photos, synthèse
vocale…)
De plus en plus de
fonctions supportées
(géolocalisation, photos,
synthèse vocale…)
Accessibilité plus limitée.
Pas de zoom possible
Accessibilité plus limitée.
Pas de zoom possible
Web et Web MobileAndroid + Web (limité)
PWA WEB
Bonnes performances
générales
BDD locale. Pas de limites
de stockage.
Oui, par définition
OK
++
++ BDD locale. Pas de limites
de stockage.
Performances maximales
Oui, idem natif : tout est
embarqué dans
l’application
++
+
++
++
++ +
++ ++
++ +
++ +
- ++
Dépend du fournisseur de
push (si plugin disponible)
Code source mieux
protégé.
Possibilité stockage
sécurisé des données.
Code source moins
protégé.
Possibilité stockage
sécurisé des données.
Oui, par définition
Oui selon les plugins
(couvrent la plupart des
besoins)
Voiceover (iOS), TalkBack
(Android), zoom…
Accessibilité plus limitée.
Pas de zoom possible
iOS, Android, Windows +
Web
iOS et Android
uniquement
NATIF HYBRIDE
++ ++
BUDGET
Mutualisation de code,
maintenabilité…
Tout le code source web
est mutualisé entre
chaque plateforme
Tout le code source web
est mutualisé entre
chaque plateforme
++
Chaque plateforme
nécessite des
développements et
compétences
spécifiques…
Tout le code source web
est mutualisé entre
chaque plateforme
-
PERFORMANCES
Scrolling, transition

30. Réputation ? Partage de code ? Technologie ?
Maturité ?Communauté ?

33. Our feeling (web dev team)
• Simple concepts but hard reality for developers
• Continuous integration is as simple as native
• Immature Framework
• Clear 2018 roadmap missing
• Risk of breaking changes between versions
• Helpful community
• Sensitize the UX designer to avoid specific developments per device
• Faster developments than pure native
• Easier tests campaigns than hybride (no webviews)

35. 35
Pourquoi ?
• Code & Coder sharing !
• Compagnons !
Sidekick, Playground, Chrome DevTools
• Build dans le cloud !
• Le challenge !

36. Q/A