Pourquoi vous devriez utiliser React Native pour vos applications web
React Native for Web, un clone web du framework largement adopté React Native, est quelque chose que vous devriez sérieusement considérer lors de vos développements front-end, non seulement pour ses performances dans les applications multiplateformes, mais aussi comme une solution autonome pour le développement web.
Lors de sa création, React Native for Web n'était pas censé être un clone de React Native. Il devait simplement apporter un SDK web, inspiré de React Native certes, mais pas un clone. À l'époque, il était même appelé React Web SDK. La motivation réside probablement dans le fait que React lui-même était un framework axé sur le web mais dépendant fortement du DOM. D'où le nom React DOM que nous connaissons aujourd'hui. React est une bibliothèque de bas niveau, et React DOM est le lien entre React et le DOM, tout comme React Native est le lien entre React et les plateformes natives. React DOM n'est qu'une implémentation du réconciliateur React pour le DOM. Il existe d'autres implémentations comme React Native for Windows and macOS ou même @react-three/xr pour le contenu VR.
À l'époque, le créateur de React Native for Web, @necolas, visait probablement simplement à offrir un ensemble simple de primitives pour construire des applications web, non explicitement liées au DOM, à l'instar de ce que propose React Native pour iOS et Android. Des éléments simples tels que <View />, <Text />, <Image />, <ScrollView />, <Touchable /> et ainsi de suite. Cependant, à mesure que le projet évoluait, c'est devenu de plus en plus une réplique de React Native, avec les mêmes APIs, les mêmes composants, le même comportement... Finalement la même chose. Et c'est une bonne chose, car cela signifie que vous pouvez utiliser React Native for Web comme une solution autonome pour le développement web, et pas seulement comme un compagnon pour les applications multiplateformes.
Lors de la création de ce projet, Necolas travaillait chez Twitter X et se penchait sur une nouvelle implémentation web. Le résultat de son travail était extraordinaire. L'amélioration du CSS à elle seule aurait pu justifier l'existence de React Native for Web.
Les développeurs front-end savent tous que la cohérence en matière de style est un défi perpétuel dans le développement web. React Native for Web offre une solution de style fiable. En s'appuyant sur le sous-ensemble de CSS offert par React Native (principalement Flexbox), les développeurs peuvent maintenir des styles cohérents sur tous les navigateurs et toutes les plateformes. Cette cohérence simplifie non seulement le processus de développement, mais garantit également que l'identité visuelle de l'application reste cohérente, même si une application mobile n'est pas immédiatement prévue.
Mais React Native for Web n'était pas seulement axé sur le CSS, car il existait déjà de nombreuses solutions CSS-in-JS disponibles. Il s'agissait d'avoir un impacte sur la plateforme web dans son ensemble. Et le résultat est un framework qui peut être utilisé pour construire des applications web accessibles.
Un aspect remarquable de React Native for Web est son engagement envers l'accessibilité. Si HTML lui-même offre de nombreuses fonctionnalités d'accessibilité, il n'est pas toujours facile de les utiliser. React Native for Web, en revanche, facilite la construction d'applications web accessibles. En exposant ces fonctionnalités d'accessibilité avec des props React simples, comme le fait React Native (même s'il existe des différences qui pourraient finir par être intégrées dans React Native un jour), les développeurs peuvent garantir que les applications web construites avec React Native for Web sont inclusives et respectent les normes d'accessibilité web. Cela est particulièrement crucial pour les projets qui accordent la priorité à l'accessibilité ou doivent se conformer à des réglementations tel que le RGAA en France. Mais quand on parle de la plateforme web, on ne parle pas seulement des ordinateurs de bureau. Le mobile est maintenant une partie importante du web.
React Native for Web apporte la marque de fabrique de React Native - des interactions utilisateur de haute qualité et semblables à celles des applications natives - sur le web. La capacité du framework à gérer facilement les gestes, les animations et les transitions, perfectionnée dans le domaine mobile, se traduit parfaitement dans les applications web. Cela se traduit par une expérience web qui reflète des interactions presque aussi fluides et réactives auxquelles les utilisateurs sont habitués avec les applications mobiles natives. En utilisant React Native for Web, de nouvelles possibilités s'ouvrent. Vous pouvez maintenant utiliser des bibliothèques comme React Native Gesture Handler et React Native Reanimated, qui ouvre la porte à un tout nouveau monde de possibilités. Vous pouvez désormais construire des applications web avec le même niveau d'interactions que les applications natives en utilisant simplement des choses comme React Native Bottom Sheet. C'est juste un exemple, mais vous pouvez facilement faire beaucoup plus avec ces types de bibliothèques.
L'une des principales forces de React Native for Web est sa compatibilité avec React DOM, permettant une adoption progressive. Les développeurs peuvent introduire progressivement des composants React Native for Web dans une application React existante, remplaçant petit à petit certaines parties de l'interface utilisateur. Cette approche progressive facilite une transition en douceur, permettant aux équipes d'intégrer React Native for Web dans leurs projets sans avoir besoin d'une refonte à grande échelle. D'autre part, si vous commencez directement un projet avec React Native for Web, vous n'êtes pas obligé d'utiliser l'API React Native. À tout moment, vous pouvez décider dans certains composants d'utiliser l'API React DOM et d'utiliser toute la plateforme web sans aucune limitation. Vous pouvez utiliser <div>, <canvas> ou tout ce que vous voulez. Aucune restriction ! Et c'est très facile à faire. Vous pouvez vous appuyer sur l'API Platform ou créer directement un fichier web spécifique, en utilisant une extension .web.js.
Attendez, quoi ? J'ai dit quoi ? Une implémentation web pour un composant donné ?
Même si votre plan immédiat ne comprend pas le développement d'une application iOS ou Android, l'utilisation de React Native for Web peut vous ouvrir la porte à ces plateformes, alors que l'inverse n'est pas vrai. Si vous commencez une application web en utilisant directement React DOM, vous ne pourrez pas facilement partager votre code avec d'autres plateformes car vous serez limité au DOM. La codebase et les composants partagés entre React Native for Web et React Native pour mobile facilitent l'ouverture de l'application aux plateformes mobiles à l'avenir. Ce choix stratégique permet une flexibilité dans les plans de développement futurs sans avoir besoin d'une refonte complète de l'application web existante, ou pire et encore plus couteux: plusieurs implémentations. Vous pourriez même utiliser votre codebase pour des applications Windows ou macOS en utilisant React Native for Windows and macOS, un projet maintenu par Microsoft, utilisé sur des produits importants comme Office ou l'application Xbox Windows. Oui, Microsoft Office et l'app Xbox utilisent l'API React Native ! C'est pas rien non ?
Mais gardez à l'esprit que React Native for Web n'est pas seulement là en tant que compagnon capable pour le développement multiplateforme, mais surtout en tant que solution autonome puissante pour les applications web. Avec son engagement envers l'accessibilité, les interactions semblables à celles des applications natives, la cohérence en matière de style et la possibilité d'adoption progressive, React Native for Web offre une solution polyvalente et robuste. Et en maintenant la porte ouverte aux futures plateformes mobiles, les développeurs peuvent faire des choix stratégiques qui permettent la flexibilité et la scalabilité, faisant de React Native for Web un framework a considérer dans le monde du développement web.
Et cela pourrait devenir quelque chose de encore plus sérieux à l'avenir. Necolas travaille chez Meta depuis un certain temps et a apporté de nombreuses contributions à React lui-même pour assurer un avenir prometteur pour les codebases multiplateformes. Si vous êtes curieux, vous pouvez jeter un œil à sa RFC: React DOM for Native ou même au projet StyleX qui finira par être intégré à React Native et React Native for Web.
Tout ça pour dire que la prochaine fois que vous devez démarrez une application web, envisagez d'utiliser React Native for Web au lieu de React DOM directement. Vous ne le regretterez pas. Je ne l'ai jamais regretté au cours des dernières années où je l'ai utilisé.
