Pourquoi vous devriez utiliser React Native pour vos applications web

2023-12-11

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.

L'accessibilité qu'offre React Native for Web

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.

React Native for Web ne vous bride pas

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é ?

React Native for Web garde la porte ouverte aux plateformes mobile et desktop

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√©.