ReactXP : Un langage universel pour les écrans : Vues, Animations, Styles. Mise à jour temps réel des écrans à la modification de code = agilité dans le développement. On reste concentré sur l'expérience utilisateur, les besoins du client, et la performance.

1. ReactXP
Développement multi plateformes
1

2. Qui suis-je ?
 26 années dans le développement
Full Stack sous Windows
 1,5 années en tant que freelance
 Spécialisé migration
d’applications vers le cloud et le
mobile
 CTO associé chez Hygeex :
https://www.hygeex.com
 @omatrot
 https://matrot.tech/
2

3. Préambule - Contexte
Ceci est mon
expérience
01
Ceci n’est pas
nécessairement
la solution dans
votre contexte
02
Je ne suis pas
un expert
03
3

4. Enjeux de ReactXP
Rester
concentré sur
l’UX
•Besoins
•Performance
Un langage
universel pour
les écrans :
•Vues
•Animations
•Styles
Un langage
populaire pour
la logique
métier
•TypeScript
•Sur ensemble de
JavaScript
•Typage statique
optionnel
•Classes et
interfaces
Agilité dans le
développement
et en bonus
•Voir les
modifications d’UI
instantanément
•Import de
modules externes
•Choix de la
cible JavaScript
Our mission is to empower every person and every organization on the planet to achieve more
4

5. Composants d’interface
HTML/React JS React Native ReactXP
Section/Container <div></div> <View/> <RX.View/>
Texte <span></span> ou
<p></p>
<Text></Text> <RX.Text></RX.Text>
Saisie <input
type=‘text »>
<TextInput/> <RX.TextInput/>
Image <img> <Image/> <RX.Image/>
List <ul></ul> ou
<ol></ol>
<ListView> <RX.ListView>
5

6. ReactXP chez Hygeex
 Plateforme pour l’éducation thérapeutique du patient (ETP)
 Processus continu d’aide au patient vis-à-vis de sa maladie chronique.
 Réseau de soignant autour du patient.
 Existant Proto/V1 (2018/2019)
 Xamarin.Android pour le mobile (patients)
 PHP/HTML/Bootstrap pour le web (soignants et patients)
 Future V2 (courant 2019)
 ReactXP
 Appli mobile iOS et Android pour les patients (Mobile First)
 Site web pour les soignants et patients.
6

7. ReactXP chez
B2bot
 Mise en œuvre dans le cadre du
POC de la société B2bot
 Backend natif de vision
artificielle en C++ 11 multi-
plateformes
 A exposer sur une application
Android et iOS
 ReactXP ouvre les possibilités
futures.
7

8. ReactXP à travers la métaphore du pont
8

9. Zoom sur « Native » de React Native
iOS Android
Objective C Java
C++ 11
Javascript
Moyens de liaisons pour le C++ (djinni-react-native)
Moyens de liaison JavaScript/ObjC-Java
fournis en standard par React Native
9

10. djinni-react-native
 Description des objets métiers et des interfaces en IDL
 Djinni est Initié par Dropbox
 Génération des liaisons Javascript vers Java/ObjC
 Ce fork permet la génération du code Java/Objective C de liaison
Javascript/C++.
 On reste concentré sur le cœur de métier.
10

11. Démarrage
 Installer Visual Studio Code
 create-rx-app
 Permet de créer une application de démarrage
 sinon partir d'un exemple de Microsoft
 Récupèrer les dépendances (yarn/npm)
 Exécution
 npm run-android
 npm run-ios
 npm run web-watch
 Ouvrir index.html dans le navigateur de votre choix
11

12. Problèmes rencontrés
 Styles (CSS/Flexbox) versus composants de layout
 L’Open Source au sens large peut être problématique
 Manque parfois de réactivité
 Pb sur tél Android peu cher (32 bits/anciens périphériques)
 Divergence de fonctionnalités entre les plateformes cibles.
 Changements dans React Native qui cassent une fonctionnalité
 Composant <Image>
 Lourdeur/incompatibilité des modules NodeJS entre eux.
12

13. Merci pour votre attention
 A retenir
 Couche métier écrite en C++ portable exposée en Javascript
 Plateformes cible de l’application potentiellement infinies.
 Uniquement du code lié à l’UX
13