Preact : une bibliothèque javascript React-Like de seulement 3 ko !

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

La bibliothèque 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 cette bibliothèque utilise beaucoup d’éléments provenant de React, et que, 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 qu’elle 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 !
Cette bibliothèque 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 la bibliothèque 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, la bibliothèque 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 à la bibliothèque permettra de déstructurer 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. 1. 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 :

1. 1. • 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 :

1. 1. • avec Preact-compat vous ajoutez 2kb à la taille de votre bundle final
   2. 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.