Web2Day 2019 - React Native dans les fintechs :​ bonne ou mauvaise idée ?​

Dans des temps pas si anciens, développer une application mobile nécessitait la maîtrise de deux plateformes de développement spécifiques pour Android et iOS. Mais ces dernières années de nouveaux outils ont vu le jour pour unifier le développement des applications mobiles. Parmi eux la solution promue par Facebook : React Native. La promesse de React Native : de vraies applications mobiles natives Android et iOS sur la base d’un code source unique React. Alors, promesse tenue ? Nous avons développé des applications mobiles pour des FinTechs, dans des secteurs concurrentiels et avec des délais serrés, en faisant le pari de React Native. À travers un retour d’expérience sur ces projets, nous vous présentons les grands principes de React Native, ses avantages et les difficultés que nous avons rencontrées.

Transcript

1. React Native dans les fintechs : bonne ou mauvaise idée ? Web2Day, 5 juin 2019
2. Qui sommes- nous ? Olivier THIERRY Lead tech front chez ASI Nicolas HELFER Scrum master chez ASI OThierryBzh nhelfer
3. 25 ans déjà 35 M€ de CA en 2018 450 collaborateurs 51% actionnariat salariés L’alliance du Conseil, du Marketing Digital et de l’Expertise Technologique Développer l’Expérience Clients & Collaborateurs
4. Le sujet
5. On va vous parler de … Nos expériences Méthodologie projet React Native Fintech
6. Ce n’est pas… Un cours Un mode d’emploi Un comparatif Une méthode miracle
7. Le projet
8. Le projet Une application mobile Android et iOS Innovant À l’écoute des utilisateurs Évolutif
9. Étapes de construction du produit DÉFINITION DES DIFFÉRENTS ÉCRANS RÉDACTION DES SPÉCIFICATIONS DÉVELOPPEMENT DES ÉCRANS TESTS ET RECETTES MISE EN PRODUCTION
10. DÉFINITION DES DIFFÉRENTS ÉCRANS RÉDACTION DES SPÉCIFICATIONS DÉVELOPPEMENT DES ÉCRANS TESTS ET RECETTES MISE EN PRODUCTION Étapes de construction du produit POUBELLE
11. Incrémental
13. Besoins Fonctionnalités Produit(s) Itérations Transférer de l’argent à un tiers -> Effectuer un virement SEPA -> Faire un paiement CB -> Faire un paiement Paylib -> Faire un virement instantané Sécuriser mes transactions -> Via login / mot de passe -> Limiter l’accès à certains périphériques -> Via empreinte digitale / reconnaissance faciale
14. Besoins Fonctionnalités Produit(s) Itérations Transférer de l’argent à un tiers -> Effectuer un virement SEPA -> Faire un paiement CB -> Faire un paiement Paylib -> Faire un virement instantané Sécuriser mes transactions -> Via login / mot de passe -> Limiter l’accès à certains périphériques -> Via empreinte digitale / reconnaissance faciale
15. Besoins Fonctionnalités Produit(s) Itérations Transférer de l’argent à un tiers -> Effectuer un virement SEPA -> Faire un paiement CB -> Faire un paiement Paylib -> Faire un virement instantané Sécuriser mes transactions -> Via login / mot de passe -> Limiter l’accès à certains périphériques -> Via empreinte digitale / reconnaissance faciale
16. Besoins Fonctionnalités Produit(s) Itérations Transférer de l’argent à un tiers -> Effectuer un virement SEPA -> Faire un paiement CB -> Faire un paiement Paylib -> Faire un virement instantané Sécuriser mes transactions -> Via login / mot de passe -> Limiter l’accès à certains périphériques -> Via empreinte digitale / reconnaissance faciale
17. Besoins Fonctionnalités Produit(s) Itérations Transférer de l’argent à un tiers -> Effectuer un virement SEPA -> Faire un paiement CB -> Faire un paiement Paylib -> Faire un virement instantané Sécuriser mes transactions -> Via login / mot de passe -> Limiter l’accès à certains périphériques -> Via empreinte digitale / reconnaissance faciale
18. Besoins Fonctionnalités Produit(s) Itérations
19. Besoins Fonctionnalités Produit(s) Itérations
20. La techno
21. Nos critères de choix Android et iOS Rationnaliser les coûts de développement Time to market réduit Fonctionnalités évolutives Solution pérenne Bonne expérience utilisateur
22. Pourquoi React Native ? "WRITE ONCE RUN EVERYWHERE" INTERFACE NATIVE IOS ET ANDROID UN ÉCOSYSTÈME RICHE DES COMPÉTENCES PROCHES DU WEB DE BELLES RÉFÉRENCES
23. Structure d'un projet React Native CODE JAVASCRIPT (REACT) PROJET iOS PROJET ANDROID PROJET REACT NATIVE APPLICATION ANDROID (APK) APPLICATION iOS (IPA) METRO BUNDLE JAVASCRIPT
24. Fonctionnement d'une application React Native BUNDLE JAVASCRIPT APPLICATION REACT NATIVE BRIDGE REACT NATIVE LIBRAIRIES NATIVES MOTEUR JAVASCRIPT (JAVASCRIPT CORE) COMPOSANTS NATIFS COMPOSANTS REACT NATIVE PLUGINS REACT NATIVE CODE NATIF
25. Les usages natifs BIOMÉTRIE COFFRE-FORT STOCKAGE PERSISTENT INFORMATIONS SUR LE DEVICE APPAREIL PHOTO NOTIFICATIONS PUSH
26. React Native, le côté lumineux de la force "Write Once Run Everywhere" : promesse tenue ! React, son approche composants et son écosystème La gestion des styles Une large communauté de développeurs Une plateforme en constante évolution
27. React Native, le côté obscur de la force Besoins ponctuels de compétences en natif Des performances parfois décevantes (Android) Des API décevantes (navigation) Des montées de version compliquées Un environnement de développement instable
28. Quelques conseils Démarrer à partir d'un boilerplate Utiliser Typescript Utiliser une librairie de composants Utiliser Storybook pour mettre au point les composants Tester sur des devices réels ! Automatiser vos tâches récurrentes
29. 6 mois plus tard… Une application mobile performante Une nouveauté chaque mois Une application stable Une progression des développeurs
30. Alors, bonne ou mauvaise idée ?