React Native

React Native permet de développer une application mobile avec JavaScript et React, en utilsant de vrais composants natifs iOS et Android. Quand on écrit un composant React Native comme une View, un Text ou une FlatList, ce n'est pas du HTML comme sur le web. React Native transforme ces composants en vrais composants natifs : sur iOS, par exemple des UIView ou UILabel, sur Android, des View ou TextView. Donc l'application finale reste une vraie application native mobile.

Fonctionnement

Le fonctionnement interne repose sur plusieurs parties.

• D'abord, il y a le JavaScript Thread. C'est là que tourne React : les composants, les hooks, le state, les callbacks, la logique métier, les appels API.

• Ensuite, il y a le UI Thread, qui gère l'affichage réel des composants natifs et les interactions utilisateur.

Communication Donc React Native doit communiquer le JavaScript avec le natif mobile en passant par le Bridge pour l'ancienne architecture.

Problème de bridge Le problème de l'ancienne architecture était que cette communication pouvait devenir coûteuse sur des applications complexes, notamment avec : beaucoup d'animations, des grosses listes, énormément d'événements scroll, ou beaucoup d'échanges JS ↔ natif.

Nouvelle architecture

C'est pour ça que React Native a introduit la nouvelle architecture avec :

• JSI,
• Fabric,
• TurboModules.

L'avantage de cette nouvelle architecture, la communication entre JavaScript et le natif est beaucoup plus directe et performante. Moteur

React Native utilise Hermes comme le moteur JavaScript, Hermes, pour exécuter le code JavaScript. Hermes est optimisé pour améliorer :

• le temps de démarrage,
• la mémoire,
• et les performances mobiles.

Enfin, React Native utilise Yoga pour calculer les layouts Flexbox. Yoga calcule les tailles et positions des composants avant que le rendu natif soit affiché.

React et React Native partagent la même base de bibliothèque et des concepts similaires, ils sont destinés à des plateformes différentes avec des composants et des méthodes de rendu distincts. React est idéal pour le développement web, tandis que React Native est conçu pour le développement d'applications mobiles natives.

Quand on écrit un composant React Native, par exemple une View ou un Text, React ne crée pas directement le composant natif à l'écran. Il y a plusieurs étapes entre le monde React JavaScript et le rendu natif mobile. D'abord, le composant React est exécuté sur le JavaScript Thread. React calcule alors l'arbre des composants et construit ce qu'on appelle un arbre virtuel UI. Ensuite, React Native analyse cet arbre et détermine quels composants natifs doivent être créés ou mis à jour. La communication entre natif et javascript se passait par le Bridge pour l'ancienne Architecture et pour la nouvelle, react native a introduit Fabric et JSI(Javascript Interface).

Le JavaScript envoyait des instructions vers le monde natif sous forme de messages sérialisés.

Le natif recevait ensuite ces informations et créait réellement les composants à l'écran.

React : Utilisé pour créer des applications web.React Native : Utilisé pour créer des applications mobiles natives pour iOS et Android.

React : Utilise le DOM (Document Object Model) pour le rendu des composants.React Native : Utilise des composants natifs de la plateforme (UIView pour iOS, View pour Android).

React : Utilise des balises HTML via JSX (ex. \<div>, \<h1>). React Native : Utilise des composants spécifiques à React Native (ex. \<View>, \<Text>).

React : Utilise des feuilles de style CSS pour le style et la mise en page. React Native : Utilise des objets JavaScript pour le style et le layout, en utilisant Flexbox pour la mise en page.

React : Principalement limité aux API disponibles dans le navigateur.React Native : Peut accéder aux API natives des dispositifs mobiles via des modules natifs.

DOM et React Native partagent la même philosophie React : composants, hooks, state management, logique déclarative.

La différence principale est le moteur de rendu. React DOM cible le navigateur et génère du HTML/CSS via le DOM.

React Native, ne génère pas de HTML. Il transforme les composants React en composants natifs iOS et Android.

Le Bridge est une couche qui permet de communiquer entre JavaScript et le natif mobile. Donc il fallait un mécanisme capable de faire dialoguer ces deux mondes. Et c'est là que le bridge intervient.

C'est-à- dire, quand React Native exécute un composant, tout commence côté JavaScript. Ensuite React Native transforme ces composants en instructions compréhensibles par le natif.

Ces informations passent alors par le Bridge. Le Bridge transmet les données vers : iOS, ou Android. Puis le moteur natif va créer les composants à l'écran.

Dans l'ancienne architecture, le Bridge faisait communiquer JavaScript et le natif via des messages JSON sérialisés et asynchrones.

Ce qui se passait : le JavaScript préparait des données et les transformait en messages JSON, puis les envoyait au Bridge.

Ensuite : le natif désérialisait ces messages pour comprendre quelles actions exécuter. Le problème est que cette sérialisation/désérialisation coûtait du temps et du CPU, surtout quand il y avait énormément d'échanges

Nouvelle architecture Avec la nouvelle architecture, React Native essaie de réduire ce coût. Aujourd'hui, avec JSI: JavaScript Interface, la communication devient beaucoup plus directe.

Au lieu de passer par des messages JSON asynchrones, JavaScript peut interagir beaucoup plus directement avec le monde natif et le C++.

Fabric est une réécriture de certaines parties de React Native pour rendre l'interaction entre le code JavaScript et le code natif plus rapide. Les principaux éléments de cette architecture incluent : JSI (JavaScript Interface) : Un remplacement du pont JavaScript existant. JSI permet un accès direct et synchrone au code natif depuis le JavaScript. TurboModules : c'est un système pour interagir avec les modules natifs. Les TurboModules améliorent la vitesse et réduisent la latence entre JavaScript et les modules natifs. Codegen : c'est un outil de génération de code qui crée des interfaces entre le JavaScript et le code natif. ce qui permet de garantir la sécurité des types et de réduire les erreurs. Synchronisation de l'UI (Fabric Renderer) : c'est un nouveau moteur de rendu pour les composants React qui améliore la performance et permet des interactions plus fluides. Avantages de la Fabric Architecture

• Performances améliorées Rendu plus rapide : Grâce à la Fabric Renderer, le rendu des composants UI est plus rapide, ce qui améliore les performances globales de l'application.

Réduction de la latence : Avec JSI et TurboModules, la communication entre JavaScript et le code natif est plus rapide, réduisant ainsi la latence.

• Flexibilité accrue Interopérabilité : JSI permet une meilleure interopérabilité entre JavaScript et le code natif. Les développeurs peuvent appeler des fonctions JavaScript directement depuis le code natif et vice versa. Modules dynamiques : TurboModules permet de charger des modules natifs de manière dynamique, ce qui réduit le temps de démarrage de l'application et optimise l'utilisation de la mémoire.

• Sécurité renforcée Sécurité des types : Grâce à Codegen, les interfaces entre JavaScript et le code natif sont générées automatiquement avec des vérifications de types, réduisant les risques d'erreurs de typage.

• Amélioration de la gestion de la mémoire Collecte de déchets améliorée : La nouvelle architecture améliore la gestion de la mémoire en permettant une collecte de déchets plus efficace, ce qui réduit les fuites de mémoire et améliore la stabilité de l'application.

JavaScript Interface. qui permet la communication beaucoup plus directe entre : le moteur JavaScript(Hermes), le code natif, sans passer par l'ancien Bridge JSON de React Native.

Pour comprendre pourquoi JSI existe, il faut d'abord comprendre le problème de l'ancienne architecture.

• # il fallait sérialiser les données en JSON,

• # puis envoyer le message au Bridge,

• # et le natif désérialisait les données.

Cela fonctionnait, mais sur des applications complexes : animations, gestures, grosses listes, le coût devenait important.

JSI a été créé pour supprimer ce coût de communication. Au lieu de passer par des messages JSON, JSI donne au natif un accès beaucoup plus direct au runtime JavaScript.

• # des bindings C++,

• # des Host Functions,

• # des Host Objects,et le runtime JavaScript

Les Host Functions sont des fonctions natives exposées directement au JavaScript. Pour React Native, cela ressemble presque à une fonction JavaScript normale. Mais derrière, cette fonction exécute du code natif/C++.

Les Host Objects permettent d'exposer des objets natifs directement au runtime JavaScript. Cela évite

• # copies inutiles,

• # sérialisation,

• # transfert JSON permanent.

Oui, exactement — TurboModules fait aussi partie de la nouvelle manière de communiquer entre JavaScript et le natif.

• # JSI est la base technique de communication,

• # TurboModules utilise JSI pour exposer les modules natifs au JavaScript,

• # Fabric utilise aussi JSI pour le rendering UI.

TurboModules est le nouveau système de modules natifs de React Native dans la nouvelle architecture. Son rôle est de permettre au JavaScript d'utiliser des fonctionnalités natives iOS et Android que dans l'ancienne architecture.

Pour comprendre TurboModules, il faut d'abord comprendre comment fonctionnaient les anciens Native Modules.

Avant, quand React Native voulait utiliser une fonctionnalité native comme : caméra, GPS, cela passait par les Native Modules classiques. Et ces modules communiquaient avec JavaScript via le Bridge.

Donc à chaque appel : sérialisation JSON, passage par le Bridge, désérialisation côté natif. Sur des applications complexes ou avec beaucoup d'appels natifs, cela pouvait coûter cher en performances.

Après TurboModules a été créé pour moderniser complètement ce système.Aujourd'hui, TurboModules utilise JSI pour communiquer beaucoup plus directement avec le runtime JavaScript. Donc on ne dépend plus principalement du vieux Bridge JSON. TurboModules apporte aussi un autre gros changement : le lazy loading. Avant, beaucoup de Native Modules étaient chargés immédiatement au démarrage de l'application. n'étaient jamais utilisées sur cet écran

React Native possède plusieurs threads qui travaillent ensemble pour faire tourner l'application.

• # JavaScript Thread

• # UI/Main Thread

• # Shadow Thread

Le premier thread principal est le JavaScript Thread.

C'est là que tourne tout le code React : les composants, les hooks,

Quand un utilisateur clique sur un bouton et qu'un state change, React rerender le composant sur le JavaScript Thread.

Le problème est que le JavaScript Thread est single-threaded.

Donc il ne peut exécuter qu'une tâche à la fois. Si on lance un traitement lourd, comme

• # une grosse boucle,

• # un parsing JSON important,

• # trop de rerenders,

Ensuite, il y a le UI Thread, aussi appelé Main Thread.

Lui, il gère le rendu visuel réel de l'application.

C'est ce thread qui : affiche les composants natifs, gère les interactions, exécute certaines animations natives, et dessine réellement l'interface à l'écran.

Ensuite, il existe aussi le Shadow Thread.

Son rôle est de calculer le layout des composants grâce à Yoga, le moteur Flexbox de React Native. Donc avant que l'interface soit affichée, le Shadow Thread calcule :les tailles, les positions, les alignements, Une fois les calculs terminés, le résultat est envoyé au UI Thread pour affichage. Pourquoi React Native utilise plusieurs threads pour éviter qu'une seule tâche bloque toute l'application et pour garder une interface fluide.

StyleSheet est une API intégrée dans React Native qui permet de créer des styles dans les composants. Elle aide à définir des styles en tant qu'objets JavaScript et à les appliquer. StyleSheet.create compile les styles en une seule fois, ce qui améliore les performances car React Native peut optimiser l'utilisation de ces styles. Si on utilise StyleSheet.create, vous bénéficierez de vérifications de type en mode développement, ce qui peut vous aider à attraper les erreurs de style.

Le cycle de vie des composants React Native comprend plusieurs phases : montage, mise à jour et démontage.

Montage (Mounting) : Pendant cette phase, le composant est créé et inséré dans le DOM. Mise à jour (Updating) : Pendant cette phase, le composant reçoit de nouvelles propriétés (props) ou de nouveaux états (states) et se met à jour en conséquence.Démontage (Unmounting) : Pendant cette phase, le composant est retiré du DOM.

1. Montage (Mounting) Lors du montage, les méthodes suivantes sont appelées : constructor : Initialisation de l'état (state) et liaison des méthodes (si nécessaire). static getDerivedStateFromProps : Mise à jour de l'état en fonction des propriétés reçues. Appelée avant render et lors des mises à jour. render : Retourne le JSX qui définit la structure du composant. componentDidMount : Appelée après que le composant a été rendu pour la première fois. Utilisée pour les appels réseau, les abonnements ou la manipulation du DOM.

2. Mise à jour (Updating) Lors de la mise à jour, les méthodes suivantes peuvent être appelées en fonction de l'origine de la mise à jour (changement d'état ou de propriétés) : static getDerivedStateFromProps : (Comme mentionné précédemment) shouldComponentUpdate : Détermine si le composant doit se mettre à jour. Retourne un booléen. render : (Comme mentionné précédemment) getSnapshotBeforeUpdate : Capture certaines informations du DOM (ou autre) avant que les changements soient appliqués. componentDidUpdate : Appelée après que le composant a été mis à jour. Utilisée pour mettre à jour le DOM en réponse aux changements de props ou d'état.

3. Démontage (Unmounting) Lors du démontage, la méthode suivante est appelée : componentWillUnmount : Appelée juste avant que le composant soit retiré du DOM. Utilisée pour nettoyer les abonnements, les minuteurs ou toute autre ressource non gérée.

React Native utilise une architecture basée sur des composants, c'est-à-dire que l'interface utilisateur de l'application est décomposée en composants réutilisables. Chaque composant gère son propre état et son propre cycle de vie.

Il utilise le Bridge. ça permet la communication entre le code JavaScript et le code natif.

React Native utilise des modules natifs pour accéder aux fonctionnalités de la plateforme. Ils permettent d'accéder aux API spécifiques de la plateforme, telles que les capteurs, le stockage, la caméra, etc.

Il utilise aussi le Hot Reloading et Fast Refresh, qui permettent aux développeurs de voir les modifications de leur code en temps réel sans avoir à recompiler l'application. Cela améliore considérablement la productivité du développement.

• # la partie JavaScript React,

• # le moteur JavaScript (Hermes par exemple),

• # la couche de communication Bridge/Fabric,

• # et les composants natifs iOS/Android.

Le code React tourne côté JavaScript,puis React Native traduit le rendu en composants natifs réels.

NativeBase a été créé pour résoudre le problème de la création de composants UI réutilisables dans les applications React Native. En utilisant NativeBase, les développeurs peuvent se concentrer sur la logique métier de l'application plutôt que de passer du temps à créer et à styliser des composants de base. Comme les Boutons (Button) Cartes (Card) Formulaires (Form) Listes (List) Modales (Modal) Onglets (Tabs) Grilles (Grid)

Reanimated permet d'exécuter les animations directement côté UI Thread plutôt que sur le JavaScript Thread.

Cela améliore la fluidité, les performances, surtout sur les animations complexes. Avec l'API Animated classique, certaines animations peuvent lagger si le JS Thread est chargé. Comment il est performant? Parce qu'il évite les allers-retours constants entre : JavaScript Thread, et UI Thread. Les animations sont exécutées directement côté natif/UI, ce qui réduit : la latence, les freezes,

Comment debuggez une animation lente ?

• # FPS,

• # JS Thread,

• # rerenders,

• # profiling,

• # calculs inutiles,

• # callbacks recréés,

• # composants lourds.

• # optimisation rendering,

• # Shared Values,

• # découpage composants.

Reanimated déplace une partie de la logique animation côté UI Thread via les Worklets. Cela réduit les échanges constants avec le JS Thread. Donc les animations restent fluides même si React rerender ailleurs.

Animated classique: souvent dépendant du JS Thread, plus limité, peut provoquer des drops FPS.

Reanimated: exécution côté UI Thread, animations beaucoup plus fluides, meilleure performance mobile, support gestures avancées.

Un Shared Value est une valeur réactive utilisée par Reanimated. Quand sa valeur change : l'animation peut être recalculée directement côté UI Thread sans repasser par React render.

useState: déclenche un rerender React.

Shared Value: met à jour directement l'animation, sans rerender React. Donc beaucoup plus performant pour l'animation.

useAnimatedStyle permet de générer des styles animés liés aux Shared Values.

Un worklet est une fonction JavaScript exécutée directement sur le thread UI (grâce à React Native Reanimated).

Le but principal est d'éviter de passer par le thread JavaScript classique pour les animations.

Avant, avec le bridge React Native classique : le thread JS calculait l'animation, envoyait les updates au natif via le Bridge, puis le natif mettait à jour l'écran.

• # le code est exécuté directement côté UI thread,

• # sans repasser constamment par le Bridge,

Fonctionnement

• # Reanimated détecte une fonction marquée "worklet".

• # Cette fonction est transformée automatiquement par le Babel plugin.

• # Le code est sérialisé puis exécuté dans le runtime UI via JSI.

• # Le worklet peut lire/modifier des sharedValue directement sur le thread UI.

SafeAreaView est un composant intégré de React Native qui permet de s'assurer que le contenu de l'application ne se superpose pas avec les éléments d'interface système tels que l'encoche (notch), les barres d'état, les barres de navigation. il garantit que le contenu de l'application est affiché dans une zone sécurisée et visible pour l'utilisateur

Touchable est un composant pour gérer les interactions tactiles de l'utilisateur avec l' application mobile. Il existe plusieurs types de composants Touchable qu'on peut utiliser en fonction du comportement qu'on souhaite implémenter

TouchableOpacity : Ce composant diminue l'opacité de son contenu lorsqu'il est pressé. Il est souvent utilisé pour fournir un feedback visuel simple lorsqu'un utilisateur appuie sur un élément, comme un bouton.

TouchableHighlight : Ce composant change de couleur ou d'opacité lorsque l'utilisateur appuie dessus. Il est utile pour des interactions plus visuelles, comme des boutons ou des liens.

TouchableWithoutFeedback : Ce composant ne fournit aucun feedback visuel par défaut lorsqu'il est pressé. Il est utilisé lorsque vous devez gérer complètement le comportement visuel de l'élément touché.

TouchableNativeFeedback (Android uniquement) : Ce composant utilise les effets de feedback natifs d'Android, comme les animations de vagues lorsqu'un élément est touché

View est un composant de base utilisé pour structurer et styliser l'interface utilisateur de l' application. Il agit comme un conteneur qui peut contenir d'autres composants ou éléments HTML, leur permettant d'être groupés ensemble et organisés selon la mise en page qu'on définit.

FlatList FlatList est utilisé pour afficher une liste de données déroulante, où tous les éléments ont la même structure. Il est particulièrement efficace pour les listes longues, car il rend uniquement les éléments visibles à l'écran à un moment donné, ce qui économise des ressources et améliore les performances.

SectionList SectionList est similaire à FlatList mais pour afficher des listes organisées par sections. Chaque section peut avoir un en-tête, et les éléments de chaque section sont généralement homogènes en termes de contenu ou de structure.

ScrollView: rend toute la liste en mémoire, adapté petites listes. FlatList: virtualisation, rend seulement les éléments visibles, beaucoup plus performant pour grandes listes.

La différence principale vient de la gestion mémoire et du rendu. Quand on utilise un ScrollView avec beaucoup d'éléments, l'application va rendre tous les composants immédiatement en mémoire. Sur mobile, ca provoque rapidement :

• consommation mémoire élevée,
• ralentissements,
• baisse FPS,
• freeze application.

FlatList fonctionne différemment. Elle utilise la virtualisation. CAD qu'elle rend uniquement les éléments visibles à l'écran pour anticiper le scroll.

Quand l'utilisateur scrolle, les éléments invisibles sont recyclés ou démontés.

Cela réduit énormément :

• la mémoire utilisée,
• le coût rendering,
• et les performances deviennent beaucoup plus stables.

C'est pour ça qu'en React Native, FlatList est quasiment obligatoire pour les grosses listes.

Je fais attention à :

• keyExtractor,
• getItemLayout,
• windowSize,
• maxToRenderPerBatch,
• removeClippedSubviews,
• React.memo,

Le module AppState permet aux développeurs de surveiller l'état de l'application, c'est-à-dire savoir si l'application est active, en arrière-plan ou inactive. On l'utilise pour gérer des tâches spécifiques lorsque l'application change d'état, comme sauvegarder des données, arrêter des animations, ou arrêter des connexions réseau.

Bridge communication qui permet à JavaScript de communiquer avec le code natif(Objective-C pour iOS ou Java pour Android).

Dans une application React Native, la logique de l'application est écrite en JavaScript. Comme les composants UI, la logique métier, les états, etc. Lorsque on crée des composants comme View, Text, TouchableOpacity, etc., en JavaScript, ceux-ci sont rendus à l'écran via le moteur JavaScript de React Native.

Chaque plateforme mobile (iOS ou Android) dispose de son propre code natif pour gérer des fonctionnalités spécifiques telles que l'accès aux capteurs, la gestion des fichiers, l'accès aux services réseau, etc. Ce code est écrit dans des langages tels qu'Objective-C/Swift pour iOS et Java/Kotlin pour Android.

Pour que JavaScript puisse accéder à ces fonctionnalités natives, React Native utilise un "bridge" (pont).

Le bridge est un canal de communication bidirectionnel entre le code JavaScript et le code natif. Il permet de transmettre des messages et des données entre ces deux environnements.

Native Modules sont des modules JavaScript qui permettent à notre application d'accéder à des fonctionnalités natives spécifiques des plateformes iOS et Android. React Native communique avec ces modules via Bridge/JSI.

Background Tasks font référence à l'exécution de code en arrière-plan même lorsque l'application n'est pas activement utilisée par l'utilisateur. Cela est particulièrement utile pour des tâches telles que la mise à jour de données en arrière-plan, la synchronisation avec des serveurs, la gestion des notifications push, etc

Pour simplifier la gestion des Background Tasks dans React Native, plusieurs librairies et modules sont disponibles : react-native-background-task : Une librairie qui permet de définir des tâches en arrière-plan périodiques ou uniques avec un minimum d'efforts. Elle utilise les API natives respectives pour assurer une exécution fiable. react-native-background-fetch : Spécifiquement pour iOS, cette librairie permet de programmer des tâches de récupération en arrière-plan à des intervalles prédéfinis. react-native-queue : Utilisé pour gérer des files d'attente de tâches en arrière-plan avec des priorités personnalisées et une gestion efficace des ressources système.

ErrorUtils est un module fourni par React Native qui était utilisé pour gérer les erreurs dans les versions antérieures de React Native, principalement avant la version 0.60. Cependant, il a été déprécié et n'est plus recommandé pour la gestion des erreurs dans les applications React Native modernes.

Depuis la version 0.60 de React Native, ErrorUtils a été déprécié en faveur de méthodes plus modernes et standardisées de gestion des erreurs : Global Error Handler : Utilisation de global.ErrorUtils ou Error.captureStackTrace pour capturer les erreurs globales. try-catch : Encapsuler le code sensible dans des blocs try-catch pour capturer et gérer les exceptions localement. ErrorBoundary : Utilisation des ErrorBoundary pour les composants React, introduits dans React 16, pour capturer les erreurs lors du rendu.

L'effet parallaxe est une technique de conception visuelle où différents éléments de l'interface utilisateur se déplacent à des vitesses différentes lors du défilement ou de l'interaction de l'utilisateur. Cette technique est souvent utilisée pour rendre l'expérience utilisateur plus immersive et engageante.

react-native-webview est un composant React Native qui permet d'intégrer facilement des vues Web dans une application mobile développée avec React Native. Il utilise un composant natif pour afficher des pages web à l'intérieur dans l'application

ActivityIndicator est un composant de base très utile dans React Native, principalement utilisé pour indiquer visuellement à l'utilisateur qu'une opération est en cours de traitement ou de chargement. Il s'agit d'un élément visuel standardisé dans les interfaces utilisateur mobiles pour signaler une attente,

Maintenir un système de contrôle de version (par exemple, Git) pour suivre les changements. Documenter les bases de code et les dépendances, et maintenir à jour les dépendances du projet. Utilisez des outils comme 'react-native-git-upgrade' pour mettre à jour la version de React Native tout en gérant les problèmes de compatibilité. Suivre également les directives spécifiques à chaque plateforme pour gérer les mises à jour de version, en particulier pour les modules natifs. Des tests approfondis et l'intégration continue aident à assurer une transition fluide lors des mises à jour.

Le concept d'architecture "bridgeless" (sans pont) dans React Native fait référence à des méthodes et des techniques visant à réduire la dépendance au bridge JavaScript qui connecte le code JavaScript avec le code natif de l' applications React Native

Dans React Native, le code JavaScript s'exécute sur un thread séparé du code natif. La communication entre ces deux threads se fait via un pont (bridge). Ce bridge gère le transfert de données, les événements et les appels de méthode entre les environnements JavaScript et natif. Mais il introduit quelques surcharges potentielles et des goulets d'étranglement de performance, surtout lorsqu'il s'agit de mises à jour fréquentes, de transferts de données volumineux. L'architecture bridgeless vise à atténuer ces défis en réduisant la dépendance au pont ou en minimisant son impact sur les performances de l'application.

Avantages d'une Approche Bridgeless Amélioration des performances : En réduisant les appels au pont et en optimisant le transfert de données, les applications peuvent bénéficier d'une meilleure performance et d'une meilleure réactivité. Réduction de la latence : L'accès direct aux APIs natives ou les chemins de communication optimisés peuvent réduire la latence dans les interactions de l'application. Fiabilité accrue : En minimisant les complexités liées à la gestion des threads et du pont, on peut obtenir des applications plus fiables.

Hermes est d'améliorer les performances d'exécution du code JavaScript dans les applications mobiles, en particulier sur les appareils Android. Il vise à réduire la taille de l'application, à améliorer le temps de démarrage et à optimiser l'utilisation de la mémoire.

Pour intégrer Hermes dans le projet React Native sur Android, on devez effectuer les étapes suivantes : Configurer le fichier android/app/build.gradle :Ajoutez la configuration de Hermes dans le bloc project.ext.react de votre fichier build.gradle :

Mise à jour des dépendances : Assurez que le projet utilise une version de React Native compatible avec Hermes..

Build et déploiement : Après avoir configuré Hermes, reconstruisez l' application en avec la commandes (./gradlew clean puis react-native run-android). Hermes sera automatiquement utilisé pour l'exécution JavaScript dans l'application.

PanResponder est un module de React Native qui permet de gérer les gestes de balayage (panning), les gestes tactiles et les interactions multi-touch sur les composants. C'est une API puissante et flexible qui vous permet de capturer et de répondre aux gestes de l'utilisateur de manière personnalisée

InteractionManager est un module intégré à React Native qui permet de gérer les interactions utilisateur ainsi que les tâches intensives en arrière-plan de manière efficace. Son objectif principal est d'améliorer les performances de l'interface utilisateur en coordonnant l'exécution de tâches potentiellement coûteuses en temps de calcul ou en ressources, telles que les animations complexes, les requêtes réseau ou les opérations de rendu intensives.

Flexbox est un modèle de mise en page qui permet de disposer facilement les éléments dans une interface utilisateur.

En React Native, Flexbox est utilisé pour définir la disposition des composants de manière réactive et adaptable aux différentes tailles d'écran et orientations.

Comment fonctionne Flexbox dans React Native ? React Native utilise Yoga Layout Engine. Yoga calcule les layouts Flexbox dans le Shadow Thread. Ensuite les positions calculées sont envoyées au rendu natif.

Flexbox organise les éléments en deux axes : Axe principal (main axis) : L'axe le long duquel les éléments sont disposés. Par défaut, c'est l'axe horizontal (ligne). Axe croisé (cross axis) : L'axe perpendiculaire à l'axe principal. Par défaut, c'est l'axe vertical (colonne).

Propriétés de Base de Flexbox

flexDirection : Définit la direction de l'axe principal. Valeurs possibles : row (horizontal), column (vertical), row-reverse, column-reverse.

justifyContent :Définit l'alignement des enfants le long de l'axe principal. Valeurs possibles : flex-start, flex-end, center, space-between, space-around, space-evenly.

alignItems :Définit l'alignement des enfants le long de l'axe croisé. Valeurs possibles : flex-start, flex-end, center, stretch, baseline.

flexWrap :Définit si les enfants doivent être enveloppés sur plusieurs lignes. Valeurs possibles : nowrap, wrap, wrap-reverse

Pourquoi utilisez par défaut?

Flexbox est très adapté aux interfaces mobiles :responsive,adaptable,cross-platform. React Native utilise Flexbox via Yoga Layout Engine. flexDirection: 'column' par défaut,

Yoga est le moteur de layout Flexbox utilisé par React Native. Il calcule : positions, tailles, alignements. Ensuite le rendu natif applique le layout calculé.

React Native utilise : Yoga Layout Engine, Flexbox.

Yoga calcule : positions, tailles, alignements,puis transmet le layout au rendu natif.

AsyncStorage est un module utilisé en React Native pour stocker des données de manière persistante sur le dispositif de l'utilisateur. Il est souvent utilisé pour enregistrer de petites quantités de données, telles que les préférences utilisateur, les jetons d'authentification ou les paramètres de configuration, qui doivent être disponibles même après la fermeture et la réouverture de l'application.

• Optimiser les Listes avec FlatList et SectionList
• Utiliser les Hooks de Performance(useMemo, useCallback)
• Réduire la Taille du Bundle

Utilisez le bundling et la réduction de taille (minification) pour réduire la taille du bundle JavaScript.

• React.memo,
• useCallback,
• useMemo,
• découpage composants,
• state localisé,
• clés stables,
• selectors optimisés.
• réduction des rerenders,
• optimisation FlatList,
• React.memo,
• useCallback quand utile,
• lazy loading,
• optimisation images.

Dans le développement d'applications mobiles avec React Native, il est souvent nécessaire d'adapter votre application pour qu'elle fonctionne correctement sur différentes plateformes (iOS et Android). React Native fournit le module Platform pour détecter la plateforme sur laquelle l'application s'exécute et appliquer des styles ou des fonctionnalités spécifiques à cette plateforme.

Expo est un ensemble d'outils et de services destinés à simplifier le développement d'applications mobiles avec React Native. Il est conçu pour rendre le processus de création, de test et de déploiement d'applications plus facile et plus rapide, en particulier pour les développeurs qui souhaitent éviter les configurations complexes de l'environnement de développement natif.

Avantages

Simplicité : Démarrage rapide et développement facile. Multiplateforme : Fonctionne à la fois sur iOS et Android. Richesse des API : Accès facile à de nombreuses fonctionnalités de l'appareil. Communauté et Support : Documentation complète et support actif de la communauté.

Inconvénients

Limitations du Managed Workflow : Certaines fonctionnalités natives avancées peuvent ne pas être accessibles. Dépendance à Expo : on est lié à l'écosystème Expo et aux mises à jour de leurs outils.

Expo propose deux principaux types de flux de travail pour le développement d'applications React Native : Managed Workflow et Bare Workflow.

Managed Workflow

Le Managed Workflow permet de simplifier le processus de développement d'applications mobiles. Il est idéal pour les développeurs qui préfèrent se concentrer sur l'écriture de code JavaScript/TypeScript sans avoir à gérer les configurations natives.

Caractéristiques Configuration Simplifiée : Tout est préconfiguré. Vous n'avez pas besoin de configurer Xcode ou Android Studio pour commencer. Accès aux API d'Expo : Vous pouvez utiliser toutes les API fournies par Expo, comme les caméras, la géolocalisation, les notifications push, etc. Mises à Jour Faciles : Expo gère les mises à jour des dépendances et des configurations natives, ce qui simplifie le processus de mise à jour de votre application. Déploiement Simplifié : Utilisez Expo's build services pour générer facilement des APK/IPA pour Android/iOS.

Bare Workflow

Le Bare Workflow offre plus de flexibilité et de contrôle en permettant aux développeurs d'écrire du code natif en Java, Kotlin, Objective-C ou Swift. Ce flux de travail est similaire au développement traditionnel React Native, mais avec l'ajout des API d'Expo si nécessaire.

Caractéristiques Contrôle Total : Vous avez un contrôle total sur le code natif et les configurations du projet. Modules Natifs Personnalisés : Vous pouvez ajouter et utiliser des modules natifs personnalisés ou des bibliothèques qui nécessitent des configurations natives spécifiques. Interopérabilité : Utilisez les API d'Expo tout en ayant la liberté de personnaliser ou d'étendre les fonctionnalités natives.

La gestion de release, pour moi, ce n'est pas uniquement "faire un build et publier". C'est surtout sécuriser la mise en production pour éviter les régressions sur les utilisateurs. Sur mes missions comme OUIGO ou Nexity, la gestion de release se faisait en plusieurs étapes.

Je gère une release comme un processus de sécurisation de la production. Je participe :

• à la préparation des versions,
• aux validations techniques,
• aux tests de non-régression,
• à la coordination avec QA/PO,
• et au suivi post-release.

Sur mobile, je fais attention aux différences iOS/Android, aux validations store, aux performances et aux crashs après mise en production.

L'objectif est d'avoir des releases stables, progressives

Préparation de la release

Avant la release :

• validation des User Stories,
• vérification des dépendances,
• stabilisation du code,
• fermeture des sujets critiques.

On évite d'ajouter des features risquées juste avant release.

Validation technique

Je vérifie :

• pipelines CI/CD,
• tests automatisés,
• build Android/iOS,
• lint,
• qualité TypeScript,
• compatibilité environnements.

Sur mobile :

• validation devices,
• différences iOS/Android,
• performance,
• comportements natifs.

Travail avec :

• QA,
• PO,
• métier.

Validation :

• parcours critiques,
• non-régression,
• cas d'erreur,
• responsive,
• comportements spécifiques mobile.

Selon le contexte :

• déploiement progressif,
• validation staging,
• feature flags si nécessaire,
• monitoring post-release.

Sur mobile :

• publication App Store / Play Store,
• suivi validation Apple/Google,
• gestion des versions.

J'essaie de mutualiser un maximum, mais je garde des adaptations quand nécessaire :

• comportements natifs,
• UI,
• permissions,
• performances,
• gestures.

React Native simplifie beaucoup, mais il faut toujours penser plateforme.

Les FPS représentent le nombre d'images affichées par seconde.

En mobile, on cherche généralement à maintenir 60 FPS pour garantir une animation fluide et une bonne expérience utilisateur.

Si les FPS chutent :

• scroll lag,
• animations saccadées,
• sensation de lenteur.

En React Native, les problèmes de FPS viennent souvent :

• des rerenders inutiles,
• du JS Thread bloqué,
• ou des animations mal optimisées.

Les Core Components sont les composants de base fournis nativement par React Native.Ils permettent de construire l'interface mobile cross-platform. Exemple View, Text. Ces composants sont abstraits par React Native mais rendus avec de vrais composants natifs iOS/Android.

En React Native, le texte brut ne peut pas être rendu directement dans une View. Il doit être encapsulé dans un composant \<Text>. Parce que React Native doit mapper explicitement le rendu vers les composants texte natifs.

Si tu mets du texte brut directement dans une \<View>, React Native affiche une erreur

Pressable permet de gérer les interactions tactiles : press, long press, hover, feedback tactile. Il remplace progressivement TouchableOpacity et autres anciens composants.

Pourquoi?

Avec Pressable, on peut gérer facilement plusieurs états comme : pressed, hover, focused, disabled

Il permet aussi de centraliser tous les comportements tactiles dans un seul composant, au lieu d'avoir plusieurs variantes comme TouchableOpacity, TouchableHighlight ou TouchableWithoutFeedback

Comme React web, React Native construit un arbre virtuel des composants.

React compare : ancien arbre, nouvel arbre, puis applique uniquement les changements nécessaires au rendu natif. Cela évite de rerender toute l'interface à chaque mise à jour.

Un rerender React signifie : React recalcule le composant JavaScript, pas forcément dire que tout le rendu natif est recréé.

React Native applique seulement les différences nécessaires.

Comment fonctionne le rendering React Native ? Comment gérez-vous les tests React Native, Native Modules.