Publié le : 02 mars 20207 mins de lecture
Passer de React à Preact présente bien des avantages pour les développeurs web. Qu’appelle-t-on React/Preact ? Quels sont leurs points forts ? Comment faire si vous souhaitez passer de React à Preact ? Vos réponses se trouvent dans cet article.
En savoir plus sur React
React, également appelé React.js désigne une bibliothèque JavaScript utilisée par le réseau social en interne afin de rendre moins compliquée la conception d’interfaces utilisateur interactives. React a pour objectif principal la gestion de l’interface d’un site. Depuis 2013, cette bibliothèque a été développée par Facebook. Elle n’est pas seulement utilisée sur ordinateur, React.js est aussi une référence incontournable sur mobiles en matière de développement d’expériences utilisateurs dans le navigateur web. Les performances de React et sa flexibilité font que cette bibliothèque soit l’une des plus faciles à utiliser. Cela est dû au travail sur un DOM virtuel. Le rendu dans le navigateur n’est mis à jour qu’en cas de besoin. Avec React, vous êtes libre de choisir la structure de l’interface. Les autres frameworks (cadre de travail utilisé par les développeurs informatiques pour simplifier leur travail) sont plus capricieux à ce sujet. Détaillons à présent les avantages de Preact Js.
Ce qu’il faut retenir sur Preact
Preact Js est une alternative à React. Cette bibliothèque est en mesure de fournir l’abstraction DOM virtuelle la plus fine sur le DOM (Document Object Model, une interface de programmation permettant à des scripts de modifier et d’examiner chaque contenu du navigateur web). Outre le fait qu’il puisse enregistrer les gestionnaires d’événements réels, Preact est compatible avec d’autres bibliothèques. La majorité des frameworks occupe une espace importante dans une application JavaScript. Preact est différent. Sa toute petite taille permet à d’autres éléments comme votre code d’occuper une plus grande espace sur votre application. Avec Preact, vous n’aurez pas à télécharger, exécuter et analyser plus de JavaScript. Vous aurez plus de temps à vous pencher sur votre code. Il vous est possible de créer une expérience que vous pouvez définir sans lutter pour garder le framework sous contrôle. Les performances de Preact ne sont pas en reste.
Avec Preact, vous pouvez prendre DOM à de nouveaux endroits qui lui sont inaccessibles autrement. Vous désirez créer une application complète ? Vous n’avez pas besoin de réaliser une intégration complexe pour créer des parties d’une application avec Preact. Il vous suffit d’intégrer Preact dans un widget puis d’appliquer les mêmes outils et techniques pour créer une application complète. Parlons productivité. Selon la communauté, Preact utilise les attributs HTML standards comme class et for. Il fonctionne très bien avec les outils développeurs de React et permet aux paramètres state, props et contexte de passer à la méthode render. En matière de licence, Preact est détenteur d’une licence MIT (licence de logiciel pour open source et logiciels libres issus de l’Institut de Technologie du Massachusetts).
Quels sont donc les points qui différencient Preact de React ?
Avant de connaitre les différences entre React et Preact, il est bon de savoir que la bibliothèque JavaScript Preact js n’envisage en aucun cas de remplacer React. Vous ne pouvez pas faire tenir React en 3 ko. L’ADN de React est l’élément sur lequel Preact se base. Ce dernier a tout fait pour optimiser le poids de React. Preact est nettement mieux, car il vous donne la possibilité d’utiliser un outil adapté capable de répondre avec efficacité aux besoins d’une application. Preact vous permet d’optimiser les performances de vos applications au moyen du code dont vous avez besoin. React propose plusieurs possibilités. À titre d’exemple, il vous permet de manipuler le DOM. Il offre également d’excellents rendus graphiques comme les modèles 3D ou VR. Preact quant à lui se démarque par sa performance à la manipuler uniquement le DOM. Vous pouvez vous lancer dans l’utilisation de divers composants UX ou encore créer un DOM virtuel. Preact a la capacité d’optimiser les performances d’une user interface, d’un site ou d’une application. Il rend le code plus facile à utiliser. Lors de la navigation, le nombre de codes chargé est minimisé. Il sera plus facile de booster le chargement des appels de bundles JavaScript. La bibliothèque js qu’est Preact est utilisée, entre autres, par Yahoo, Netflix, Sony, Airbnb, Instagram, Atlassian, par les équipes de Facebook et par Whatsapp.
Les techniques vous permettant de passer de React à Preact
Vous utilisez déjà React ? Vous pouvez remplacer les dénominations qui commencent par React par preact-compat dans votre code. L’utilisation de l’alias preact-compat vous permettra d’y parvenir facilement. Vous pouvez ainsi continuer à coder sans devoir changer vos habitudes. L’autre avantage de cette méthode est que votre codebase ne sera pas bouleversé. L’installation de preact et preact-compat se fera grâce au gestionnaire de module npm. Une fois ces installations terminées, vous pouvez paramétrer le système de build. L’idée est que les imports react ainsi que react-dom pointent vers preact-compat. Passer de React à Preact vous permet de jouir des avantages des différents modules de React disponibles sur npm. Inutile de modifier votre code. Il est également possible de faire fonctionner correctement React et React-Dom dans un seul module. Le seul hic avec cette technique est que vous êtes dans l’obligation d’ajouter 2 kb à la taille de votre bundle final. Passons à la seconde méthode vous permettant de passer de React à Preact. Cette deuxième technique est aussi appelée : « à la mano ». Il vous suffit de rediriger vos imports vers preact. Il s’ensuit la suppression du code non compatible. Pour y parvenir, installez la bibliothèque. Remplacez par la suite npm i — S preact, c’est-à-dire React.createElement par h, celui de Preact. Le pragma JSX désigne le nom donné à la fonction permettant de transpiler du JSX. Preact use de la bibliothèque Hyperscript. Cela va impliquer pragma h. De son côté, <h1/> transpile vers h (« h1’).
Vous avez l’habitude d’utiliser React, au point de ne pas vouloir sortir de votre zone de confort ? Cela tombe bien, React et Preact sont deux bibliothèques compatibles. Vous pouvez toujours compter sur React si Preact ne dispose pas de la fonctionnalité spécifique dans le catalogue de ses composants. Un composant React adapté à vos besoins restera toujours à votre disposition en cas de besoin. Il suffit d’installer un module spécifique grâce à npm.
