Meta publie React Compiler, un compilateur open source pour React
Meta publie React Compiler, un compilateur open source pour React, afin d'optimiser le code pour la performance, Meta a d�j� utilis� le compilateur depuis plus d'un an
Meta a publi� React Compiler, un compilateur open source pour React lors de la React Conference, qui s'est tenue � Las Vegas et a �t� retransmise en direct. Joe Savona, membre de l'�quipe React de Meta et ing�nieur en interface utilisateur, a d�clar� que l'�quipe avait d�velopp� le compilateur au cours des derni�res ann�es.
React est une biblioth�que JavaScript frontale gratuite et open-source pour la construction d'interfaces utilisateur bas�es sur des composants. Elle est maintenue par Meta (anciennement Facebook) et une communaut� de d�veloppeurs individuels et d'entreprises.
� React Compiler optimise automatiquement vos composants et hooks, de sorte que seules les parties minimales de votre interface utilisateur se mettent � jour en fonction des changements d'�tat �, a expliqu� M. Savona au public pr�sent lors de la React Conference 2024. � Cela semble donc assez magique �.
Objectifs de React Compiler
L'id�e de React Compiler est de permettre aux d�veloppeurs d'utiliser le mod�le de programmation d�claratif familier de React, bas� sur les composants, tout en garantissant que les apps sont rapides par d�faut. Concr�tement, les objectifs � atteindre sont les suivants :
- Limiter la quantit� de re-rendu lors des mises � jour afin de garantir des performances rapides et pr�visibles par d�faut pour les applications.
- Maintenir un temps de d�marrage neutre par rapport aux performances ant�rieures � l'utilisation du compilateur React. Cela signifie notamment que l'augmentation de la taille du code et les frais g�n�raux de m�morisation doivent �tre suffisamment bas pour ne pas avoir d'impact sur le d�marrage.
- Conserver le mod�le de programmation d�claratif et orient� composant de React. En d'autres termes, la solution ne devrait pas changer fondamentalement la fa�on dont les d�veloppeurs pensent � �crire React, et devrait g�n�ralement supprimer des concepts (le besoin d'utiliser React.memo(), useMemo(), et useCallback()) plut�t que d'en introduire de nouveaux.
- Travailler sur du code React idiomatique qui suit les r�gles de React (fonctions de rendu pures, r�gles de hooks, etc.).
- Prendre en charge les outils et flux de travail typiques de d�bogage et de profilage.
- �tre suffisamment pr�visible et compr�hensible par les d�veloppeurs React - c'est-�-dire que les d�veloppeurs devraient �tre en mesure de d�velopper rapidement une intuition approximative de la fa�on dont React Compiler fonctionne.
- Ne pas n�cessiter d'annotations explicites (types ou autres) pour le code produit typique. Des fonctionnalit�s permettant aux d�veloppeurs d'utiliser les informations de type pour permettre des optimisations suppl�mentaires peuvent �tre propos�es, mais le compilateur doit fonctionner correctement sans informations de type ou autres annotations.
Non-objectifs
Les �l�ments suivants ne sont explicitement pas des objectifs pour React Compiler :
- Fournir un re-rendu parfaitement optimal sans aucun recalcul inutile. Il s'agit d'un non-objectif pour plusieurs raisons :
- Le surco�t d'ex�cution li� au suivi suppl�mentaire peut l'emporter sur le co�t du recalcul dans de nombreux cas.
- Dans les cas de d�pendances conditionnelles, il peut �tre impossible d'�viter de recalculer certaines ou toutes les instructions.
- La quantit� de code peut faire r�gresser les temps de d�marrage, ce qui irait � l'encontre de l'objectif de neutralit� des performances de d�marrage.
- Soutenir le code qui viole les r�gles de React. Les r�gles de React existent pour aider les d�veloppeurs � construire des applications robustes et �volutives et forment un contrat qui permet de continuer � am�liorer React sans casser les applications. React Compiler d�pend de ces r�gles pour transformer le code en toute s�curit�, et les violations des r�gles briseront donc les optimisations de React Compiler.
- Prendre en charge les anciennes fonctionnalit�s de React. Notamment, les composants de classe ne seront pas pris en charge en raison de leur �tat mutable inh�rent partag� entre plusieurs m�thodes avec des dur�es de vie et des flux de donn�es complexes.
- Prendre en charge 100 % du langage JavaScript. En particulier, les fonctionnalit�s rarement utilis�es et/ou celles qui sont connues pour �tre dangereuses ou qui ne peuvent pas �tre mod�lis�es correctement ne seront pas prises en charge. Par exemple, les classes imbriqu�es qui capturent des valeurs � partir de leur fermeture sont difficiles � mod�liser avec pr�cision en raison de la mutabilit�, et eval() n'est pas s�r. La prise en charge de la grande majorit� du code JavaScript (et des dialectes TypeScript et Flow) est l'objectif poursuivi.
Principes de conception de React Compiler
De nombreux aspects de la conception d�coulent naturellement des objectifs susmentionn�s :
- La sortie du compilateur doit �tre un code de haut niveau qui conserve non seulement la s�mantique de l'entr�e, mais qui est �galement exprim� � l'aide de constructions similaires � celles de l'entr�e. Par exemple, plut�t que de convertir les expressions logiques (a ? ? b) en une instruction if, la forme de haut niveau de l'expression logique est conserv�e. Plut�t que de convertir toutes les constructions de boucles en une seule forme, la forme originale de la boucle est conserv�e. Cela d�coule des objectifs :
- Le code de haut niveau est plus compact et permet de r�duire l'impact de la compilation sur la taille de l'application.
- Les constructions de haut niveau qui correspondent � ce que le d�veloppeur a �crit sont plus faciles � d�boguer.
- Il s'ensuit que la repr�sentation interne du compilateur doit �galement �tre de haut niveau pour pouvoir restituer les constructions originales de haut niveau. La repr�sentation interne est ce qui a �t� appel� une repr�sentation interm�diaire de haut niveau (HIR) - un nom emprunt� au compilateur Rust. Cependant, la HIR de React Compiler est peut-�tre encore plus adapt�e � ce nom, car elle conserve des informations de haut niveau (distinguant if vs logical vs ternary, ou for vs while vs for..of) mais repr�sente �galement le code comme un graphe de flux de contr�le sans imbrication.
Architecture de React Compiler
React Compiler a deux interfaces publiques principales : un plugin Babel pour transformer le code, et un plugin ESLint pour signaler les violations des r�gles de React. En interne, les deux utilisent la m�me logique de base du compilateur.
Le c�ur du compilateur est largement d�coupl� de Babel, utilisant ses propres repr�sentations interm�diaires. Le flux de haut niveau est le suivant :
- Plugin Babel : D�termine quelles fonctions d'un fichier doivent �tre compil�es, sur la base des options du plugin et de toute directive locale opt-in/opt-out. Pour chaque composant ou hook � compiler, le plugin appelle le compilateur, en passant la fonction originale et en obtenant en retour un nouveau n�ud AST qui remplacera l'original.
- R�duction (BuildHIR) : La premi�re �tape du compilateur consiste � convertir l'AST de Babel en la principale repr�sentation interm�diaire de React Compiler, HIR (High-level Intermediate Representation). Cette phase est principalement bas�e sur l'AST lui-m�me, mais s'appuie actuellement sur Babel pour r�soudre les identifiants. La HIR pr�serve la s�mantique pr�cise de l'ordre d'�valuation de JavaScript, r�sout les ruptures/continuit�s � leurs points de saut, etc. La HIR qui en r�sulte forme un graphe de flux de contr�le de blocs de base, dont chacun contient z�ro ou plusieurs instructions cons�cutives suivies d'un terminal. Les blocs de base sont stock�s dans l'ordre inverse, de sorte que l'it�ration vers l'avant des blocs permet aux pr�d�cesseurs d'�tre visit�s avant les successeurs, � moins qu'il n'y ait un � back edge � (c'est-�-dire une boucle).
- Conversion SSA (EnterSSA) : La HIR est converti en forme HIR, de sorte que tous les identifiants de la HIR sont mis � jour avec un identifiant bas� sur le SSA.
- Validation : Plusieurs passes de validation sont ex�cut�es pour v�rifier que l'entr�e est valide pour React, c'est-�-dire qu'elle n'enfreint pas les r�gles. Cela inclut la recherche d'appels de hook conditionnels, d'appels setState inconditionnels, etc.
- Optimisation : Diverses passes telles que l'�limination du code mort et la propagation des constantes peuvent g�n�ralement am�liorer les performances et r�duire la quantit� d'instructions � optimiser ult�rieurement.
- Inf�rence de type (InferTypes) : Une passe d'inf�rence de type conservatrice est ex�cut�e pour identifier certains types de donn�es cl�s susceptibles d'appara�tre dans le programme et qui sont pertinents pour une analyse plus approfondie, comme les valeurs qui sont des hooks, les primitives, etc.
- Inf�rence des port�es r�actives (reactive scopes) : Plusieurs passages sont n�cessaires pour d�terminer les groupes de valeurs qui sont cr��s/mut�s ensemble et l'ensemble des instructions impliqu�es dans la cr�ation/mutation de ces valeurs. Ces groupes sont appel�s � port�es r�actives � et chacun d'entre eux peut comporter une ou plusieurs d�clarations (ou parfois une r�affectation).
- Construction/optimisation des port�es r�actives : Une fois que le compilateur a d�termin� l'ensemble des port�es r�actives, il transforme le programme pour rendre ces port�es explicites dans la HIR. Le code est ensuite converti en une ReactiveFunction, qui est un hybride du HIR et d'un AST. Les champs d'application sont encore �lagu�s et transform�s. Par exemple, le compilateur ne peut pas rendre les appels de hook conditionnels, donc toutes les port�es r�actives qui contiennent un appel de hook doivent �tre �lagu�es. Si deux scopes cons�cutifs seront toujours invalid�s ensemble, ils seront fusionn�s pour r�duire la charge de travail, etc.
- Codegen : Enfin, la ReactiveFunction hybride HIR/AST est reconvertie en un n�ud AST Babel brut, et renvoy�e au plugin Babel.
- Plugin Babel : Le plugin Babel remplace le n�ud original par la nouvelle version.
Le plugin ESLint fonctionne de la m�me mani�re. Pour l'instant, il invoque effectivement le plugin Babel sur le code et renvoie un sous-ensemble d'erreurs. Le compilateur peut rapporter une vari�t� d'erreurs, y compris que le code est simplement du JavaScript invalide, mais le plugin ESLint filtre pour ne montrer que les erreurs sp�cifiques � React.
Source : React Compiler (Meta)
Et vous ?
:fleche: Que pensez-vous de React Compiler et de ses capacit�s ?
Voir aussi :
:fleche: �tat de JavaScript 2022 : React reste le framework front-end dominant mais est en perte de vitesse c�t� satisfaction, jQuery est la troisi�me biblioth�que la plus utilis�e
:fleche: React 18 est disponible avec le traitement par lots activ� par d�faut, de nouvelles API comme startTransition, et la prise en charge de Suspense
