Retour d'experience sur la plannification et les raisons de leur migration vers React native.

1. MIGRATION VERS REACT NATIVE
MICKAEL JURRET – CTO – BEEPEERS
MEETUP – DCMA #20

2. BEEPEERS EN QUELQUES MOTS
Applications mobiles – Sites web - Plateforme de networking

3. Votre événement, notre solution
Applications mobiles Plateforme de networkingSites web
Organisez et engagez Préparez et valorisez Accélérez votre business

4. • Quelques références…
Quelques références

5. ANALYSE DE L’EXISTANT

6. ANALYSE DE L’EXISTANT
Serveur
(JSON / Rest)
Framework iOS
(Natif)
Framework Android
(Natif)
Framework Web

7. ANALYSE DE L’EXISTANT
• Coûts de développements importants
• Gestion d’équipe complexe (compétences en silo)
• Existant de + en + difficile à maintenir

8. ANALYSE DE L’EXISTANT

9. REACT JS ET LE VIRTUAL DOM

10. REACT JS ET LE VIRTUAL DOM
Librairie Javascript
publiée par Facebook en
2013

11. REACT JS ET LE VIRTUAL DOM
Vue du modèle MVC

12. REACT ET LE VIRTUAL DOM

13. REACT JS ET LE VIRTUAL DOM

14. REACT JS ET LE VIRTUAL DOM
Performant grâce au
Virtual DOM

15. REACT NATIVE

16. REACT NATIVE
Publiée par facebook à la ReactJS Conf 2015

17. REACT NATIVE

18. REACT NATIVE

19. REACT NATIVE
Flexbox layout (Facebook Yoga)

20. AVANTAGES
“Learn once, write everywhere”

21. AVANTAGES
Performances du
natif

22. AVANTAGES
80% de code en commun entre iOS et Android
Code métier mobile / web

23. AVANTAGES
Temps de
développement
acceléré

24. BEEPEERS V2

25. BEEPEERS V2
Serveur
(JSON / Rest)
Framework React JS
Framework React Native
Framework
Web
Framework
iOS
Framework
Android

26. BEEPEERS V2
• 1er semestre 2016 : étude de la technologie
• Septembre 2016 : prise de décision de la migration vers
React web / React native
• Développement des nouveaux sites web en React (1ère
livraison : FIJ 2017)
• Création d’un POC React Native en partenariat avec l’INRIA
• Mise en place d’une équipe dédiée en Janvier 2018

27. DIFFICULTES / INCONVENIENTS

28. DIFFICULTES / INCONVENIENTS
Développement à partir d’une
feuille blanche

29. DIFFICULTES / INCONVENIENTS
Courbe d’apprentissage
abrupte
Webpack
ES6
Babel
Programmation
fonctionnelle
Redux Flexbox
Reducer
Middleware
Flux
Flow
npm
Node.JS
ESLint
Destructuring

30. DIFFICULTES / INCONVENIENTS
Expertise mobile toujours
nécessaire

31. DIFFICULTES / INCONVENIENTS
Technologie encore jeune
• Rythme élevé des évolutions (release tous les mois)
• Documentation difficile à trouver
• Bibliothèque de composants incomplète

32. MERCI POUR VOTRE ECOUTE
MICKAEL JURRET – CTO – BEEPEERS
MEETUP – DCMA #20