Framework, Front-end

Preact est souvent considérée comme une version miniature de React
Si l’on peut lire régulièrement ce raccourci c’est tout simplement parce que ces deux bibliothèques javascripts partagent beaucoup de similitudes.
Cependant Preact se distingue de son paronyme de plusieurs façons, notamment en se focalisant sur la manipulation du DOM.
Si vous ne connaissez pas encore Preact, on vous propose une définition en trois points juste en dessous. Tout d’abord nous aborderons l’ADN de Preact, ensuite il sera question d’étudier sa différence avec React, et enfin nous verrons comment intégrer Preact à un projet 😉.

Date de sortie, licence et communauté : la carte d’identité de Preact

Preact a été publiée dans sa version 1.3 en septembre 2015 sur Github par Jason Miller, également connu sous le pseudo @developit.
Derrière ce pseudo se cache un développeur travaillant actuellement pour Google Chrome Labs, et qui est également à l’origine de plusieurs autres petites bibliothèques.
En terme de licence, Preact dispose d’une licence MIT.
Seulement on peut douter de la pérennité de cette licence, au vu du fait que Preact utilise beaucoup d’éléments provenant de React, et que React, malgré sa bascule vers une licence MIT en 2017 ne s’est réellement jamais prononcé au niveau des conditions de son utilisation …
Côté notoriété, Preact a su en un petit peu moins de 4 ans, se faire séduire par une large communauté active. Sa page Github, arbore à l’heure actuelle plus de 22 800 stars, est soutenue par plus de 185 contributeurs et affiche plus de 1180 forks ! On peut également noter que la bibliothèque est mise à jour à peu près tous les mois et dispose de plus de 130 releases.

Est-ce qu’elle a pour but de remplacer React ?

Pas du tout ! La magie n’existe pas, on ne peut pas faire tenir React en 3ko ! Preact se base sur l’ADN de React et a fait beaucoup de compromis et beaucoup de choix pour optimiser son poids ! Voilà ce qui est à retenir !
L’idée c’est d’avoir un outil adapté aux besoins d’une application ! Pourquoi utiliser React alors que l’on va utiliser à peine 10 % de l’application ?
Ah, parce que React fait partie de votre zone de confort et que vous ne souhaitez pas en sortir pour apprendre un nouveau paradigme ? Ça tombe bien, Preact s’adresse donc clairement à vous !
Il vous permettra donc d’optimiser les performances de vos applications, en se focalisant uniquement sur le code dont vous avez besoin !
Ainsi la plupart du code présent dans votre appli sera le vôtre 😉

Quelle est la différence entre React et Preact ?

Preact, l’éclair pourfendeur du DOM !

On peut se l’avouer, React c’est un peu comme une machine de guerre, et on peut dire qu’elle se bat sur tous les front (sans mauvais jeux de mots).
Que ce soit pour le mobile avec react-native , les rendus graphiques ( VR, 3D etc ) ou même de façon plus générale pour manipuler le DOM ; React permet ÉNORMÉMENT de possibilités, peut-être même trop !
Là où Preact se démarque, c’est surtout dans sa philosophie !
Contrairement à React, Preact se restreint uniquement à la manipulation du DOM !
Dans ce sens elle permet entre autre, elle aussi, de créer un DOM virtuel et d’utiliser tout une flotte de composants UX !
D’ailleurs, si vous êtes un habitué de React ou bien que vous souhaitez une fonctionnalité spécifique qui n’est pas disponible dans le catalogue de composants de Preact, sachez que les deux bibliothèques sont compatibles et que vous pouvez faire appel à un composant React dans Preact en installant un module spécifique via npm.
Preact se démarque donc en adoptant une architecture épurée, ce qui permet d’optimiser les performances d’un site, d’une application ou même d’une User Interface en rendant le code plus simple et moins fouilli !
Ainsi, moins de code est chargé, ce qui permet de booster le chargement des appels de bundles javascript lors de la navigation.

Un CodeBase légèrement différent

Même si Preact dispose de la même API ES6 que React, son codebase diffère tout de même un peu … Rassurez-vous, on ne parle que de petits changements, le coeur de Preact est sensiblement le même que celui de React et il ne nécessite donc que de peu d’efforts pour switcher 😉

Pas d’événements synthétiques

Une des premières choses à savoir, c’est que Preact n’utilise pas de Synthetic Events, le gestionnaire d’événements de React. Il préfère au contraire simplement utiliser addEventListener qui est le système d’événements utilisé nativement par les navigateurs. Il Il est important de le noter car ce fait implique quelques changements au niveau du comportements des navigateurs, notamment pour onChange.

PropTypes

Également, Preact a fait le choix de ne pas utiliser PropTypes. Cette fonctionnalité permet d’attribuer un type à vos variables ( string, boolean, number, etc …), c’est certes utile mais tout le monde ne l’utilise pas, donc du ménage a été également fait de ce côté.

Props.children est toujours un array

Avec Preact, props.children est toujours un array. Vous pouvez donc utiliser toutes les méthodes de array.prototype sans avoir à utiliser d’équivalent.

Préférez class à ClassName

À savoir, vous pouvez écrire directement class en JSX. Bien que les deux soient possible, a l’instar du JSX de React, imposant sa nomination « className » pour représenter l’attribut HTML « class », Preact propose de revenir au source avec « class ».
Il est tout simplement plus simple de se référer à ce que l’on connait déjà.

Une nouvelle fonction render ( )

this.props et this.state sont automatiquement traités dans la fonction render( ). Cette méthode propre à Preact permettra de destructurer plus facilement les paramètres qui y sont passés.
Aussi, render( ) accepte un troisième argument qui est le noeud racine à préciser.

Une bibliothèque javascript portable et super rapide

Même si Preact ne permet pas le développement d’application mobile native, elle représente néanmoins une solution efficace pour développer une Progressive Web App (PWA) avec son outil preact-cli qui dispose d’un système de build optimisé à cet effet ! De base, une PWA développée à l’aide de cet outil obtient le score de 100 dans Lighthouse, l’outil d’audit de pages web de Google.
Avec son poids minimaliste (3ko), Preact peut être embarquée dans un Widget !
D’ailleurs, il est possible d’utiliser Preact dans la balise de javascript personnalisée <amp script> des Accelerated Mobile Pages (pages AMP). Rappelons tout de même que AMP est une technologie développée par Google, oui oui, là où le développeur de Preact travaille.
Petit Gossip de plus, vous pouvez aussi voir sur la page Github de Preact
que le projet AMP est sponsor de Preact.

Comment passer de React à Preact ?

Si vous utilisez dores et déjà React, deux choix s’offrent à vous pour switcher vers Preact :

      1. La première possibilité est la plus simple, elle repose sur l’utilisation de l’alias preact-compat pour remplacer toutes les dénominations commençant par React par preact-compat dans votre code. De cette façon vous pouvez continuer à coder sans changer vos habitudes et sans bouleverser votre codebase 😉
        Pour ce faire, il vous suffit tout d’abord d’installer preact et preact-compat à l’aide du gestionnaire de module npm : npm i -S preact preact-compat.
        Une fois ces deux dépendances installées, il vous reste à paramétrer le système de build de telle façon à ce que les imports react (le coeur de react) et react-dom pointent désormais vers preact-compat.
        Il est possible de créer ces alias avec Webpack, Browserify ou même Node.

Avantages :

      • vous bénéficiez de tous les modules de React disponibles sur npm.
      • vous n’avez pas besoin de modifier votre code !
      • permet de faire fonctionner correctement React et React-Dom dans un seul module !

Inconvénient :

      • avec Preact-compat vous ajoutez 2kb à la taille de votre bundle final
    1. La deuxième manière est celle dite : à la mano. Elle vise à rediriger vos imports vers preact et supprimer le code non compatible. Pour cela, il faut dans un premier temps installer la bibliothèque : npm i -S preact..
      Deuxièmement il convient de remplacer le pragma JSX de React, à savoir React.createElement(), par celui de Preact qui est h().
      Si vous ne le savez pas : le pragma JSX est le nom que l’on donne à la fonction qui permet de transpiler du JSX. Preact, utilise la bibliothèque Hyperscript, ce qui implique pragma h( ) en question. Ainsi, <h1/> transpile vers h(‘h1’). A titre de comparaison, React utilise React.createElement(). Il est possible de faire cette manipulation directement avec le transpiler Babel.Vous trouverez plus d’informations à ce sujet sur la documentation fournie par Preact à cet endroit.

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Kendo, une bibliothèque javascript de composants UI

Kendo UI : une bibliothèque javascript de composants UI

Aujourd’hui on va vous parler de Kendo Ui, une bibliothèque Javascript distribuée par la société Télérik.
Si vous ne le savez pas, le kendo est un art martial japonais moderne s’apparentant à de l’escrime, et c’est justement sur cette représentation que s’appuie l’outil dont nous allons vous parler. Non, nous n’allons pas vous parler de sport de compétition, mais bien d’un outil pour vous faire gagner du temps lorsque vous développez une application Web.

Nest.JS : le framework Node.JS nouvelle génération

Nous avons remarqué que les frameworks sont vos sujets préférés ! C’est pourquoi nous vous proposons de parler cette semaine de Nest.js : un framework Node.js. Nous verrons ses caractéristiques techniques et ses avantages.x xxxxx

Symfony : Un framework PHP populaire et efficace !

Si le back-end est votre coeur de métier et que vous n’avez jamais utilisé Symfony, arrêtez-tout et lisez cet article ! Ce framework contient diverses fonctionnalités qui vont accélérer le développement de votre site web.

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR