Introduction à PReact: Preact est une librairie javascript lightweight dont la taille ne dépasse pas les 3Ko et qui peut présenter une bonne alternative à React. La librairie crée par Jason Miller accompagné d’une communauté de développeurs, a gagné une importante réputation ces derniers temps à cause de plusieurs facteurs comme :

• La taille qui ne dépasse pas les 3ko, d’où la rapidité de son chargement.

• La performance due au mécanisme efficace de gestion de mémoire.

• La compatibilité car la librairie a été conçue pour être compatible avec la React API. D’autant plus elle est supportée par la totalité des navigateurs sauf certaines versions de IE tel que IE7 et IE8 (l’utilisation des polyfills est requise dans ce cas).

1 - Introduction à Preact : différences entre React et Preact

Plusieurs développeurs tombent dans la confusion en pensant que Preact est un React de taille 3ko, Or ce n’est pas le cas, il s’agit plutôt d’une réimplémentation ayant pour but de réduire la taille et d’améliorer la performance.  Les différences entre les deux librairies se manifestent sur les niveaux suivants 

Les différentes fonctionnalités partagées par les deux frameworks :

Les deux frameworks partage plusieurs fonctionnalités communces. On cite à titre d’exemple : ES6 Class Components, les composants d’ordre supérieur, les Stateless Pure Functionnal Components et les contextes.

Ce qui a été ajouté à Preact :

Parmi les fonctionnalités qui ont été ajoutées à Preact, on cite :

• Les

  propriétés state et props peuvent être passés en argument à la fonction

  render().

• L’utilisation de l’attribut class est possible maintenant au niveau du CSS.

• Recyclage des éléments dans la page.

Ce qui n’existe pas dans Preact :

Comme mentionné précédemment, Preact a pour objectif d’être le plus léger possible. Ainsi plusieurs fonctionnalités ont été supprimés tels que les PropType qui ne sont pas fréquemment utilisés par les développeurs. On a remarqué également que React.Children et les évènements synthétiques, n’existent pas dans Preact.

2 - Introduction à Preact : Preact CLI

La première étape de la création de notre application consiste à installer preact-cli qui nous permettre de générer une application contenant la structure de notre projet. La console dispose de plusieurs fonctionnalités : haute performance, division du code automatique, compatibilité avec (CSS, LESS, Sass, Stylus), polyfills chargés dynamiquement au moment où l’on a besoin etc…  

Pour l’installer il suffit d’exécuter :

npm install -g preact-cli

Pour

les utilisateurs de yarn cette installation est possible en utilisant la

commande

yarn global add preact-cli

On peut interagir avec la CLI en utilisant la commande preact. Ainsi nous allons créer notre application :

preact create <template-name> <project-name>

La section <template-name> nous permet de choisir un modèle parmi la liste suivante :

• Default : contient une démonstration de la plupart des fonctionnalités offertes par Preact.

• Material : un template en material desing qui se base sur preact-material-components.

• Simple : est un template minimal dont le setup est contenu dans un seul fichier.

• Widget  : est un template d’un composant graphique qui peut être facilement intégré dans un site web.

 Nous allons prendre le template material comme point de départ de notre application.

L’arborescence de la solution générée est la suivante :

En plus de la structure des dossiers qui nous permet d’organiser notre code et les composants graphiques, La CLI nous a généré un fichier manifest.json qui ressemble au package.json mais il est utilisé pour créer des Progressive Web Application.

3 - Introduction à Preact : migration d’une application React vers une application Preact

La migration d’une application en React vers Preact est possible en utilisant deux approches différentes :

La première façon est d’utiliser preact-compat qui présente une

couche de compatibilité permettant aux modules de React de fonctionner avec

Preact sans aucune modification car il fournit les mêmes exports que react et react-dom. Ainsivotre

outil de build (webpack par exemple)  sera capable de remplacer les appels de ces

derniers afin de résoudre les problèmes de compatibilités.

Afin de mieux comprendre le fonctionnement de preact-compat  et son intégration à votre projet vous pouvez consulter le repository du projet.

Malgré la simplicité de la première solution, il est conseillé de reprendre votre code et de le migrer vers Preact car l’API de ce dernier est presque identique à celle de React. Ainsi cette migration peut être facile à réaliser et sans avoir de grand impact sur votre code.

Le choix d’une approche ou l’autre dépend de la nature de votre projet et de la complexité de ces composants.

Pour conclure, Preact est une bonne alternative de React. La communauté du projet grandit de façon régulière et les entreprises qui l’adoptent sont de plus en plus nombreuses. Et si la solution a gagné une bonne réputation c’est parce qu’elle répond aux exigences de performance, et de la capacité de de fonctionner même avec des connexions internet à faible débit.

Continuez votre lecture et découvrez notre article sur React !