Discussion :

[Community Management]

Chers membres du club,

J'ai le plaisir de vous pr�senter ce tutoriel de Olivier Boisse pour vous apprendre l'isomorphisme avec React et Node.js.

L'utilisation de frameworks JavaScript est une pratique de plus en plus r�pandue � l'heure actuelle. Ces derniers nous permettent de mieux organiser nos projets et d'augmenter notre productivit�. On peut toutefois se retrouver coinc� lorsque l'on se penche sur la question du r�f�rencement. La plupart des moteurs de recherche ne liront pas le JavaScript et, par cons�quent, ne pourront pas indexer correctement les pages de votre site.

On entend parler aujourd'hui d'application isomorphe (ou universelle) dont la particularit� est de pouvoir g�n�rer le rendu HTML � la fois c�t� client et c�t� serveur. Cette technique est accessible avec l'utilisation de Node.js qui nous permet de tirer profit du JavaScript c�t� serveur.

Dans ce tutoriel, j'illustrerai mes propos � travers un exemple en utilisant React et Node.js. React est une biblioth�que JavaScript, d�velopp�e par Facebook, permettant de cr�er des composants qui constitueront l'interface du site. Sa particularit� est de manipuler le DOM de fa�on intelligente en ne modifiant que le strict minimum lors du rafra�chissement des donn�es.

Bonne lecture.

Retrouvez tous les tutoriels et cours de la soci�te Soat
Retrouvez les meilleurs cours et tutoriels pour apprendre le JavaScript.

[Marco46]

Pourquoi avoir recours � l'isomorphisme ?

Je trouve l'argument de la performance fallacieux.

Ce qui compte c'est d'afficher quelque chose � l'utilisateur le plus vite possible. Peu importe que les premi�res donn�es soient pr�sentes ou pas, il faut montrer � l'utilisateur que la webapp est charg�e, c'est pas grave si les premi�res donn�es ne sont pas pr�sentes. En corr�lant la r�cup�ration de la webapp � la r�solution de la premi�re requ�te on ne fait qu'allonger cette dur�e, donc on d�grade les performances au lieu de les augmenter ! Le seul cas o� �a pourrait avoir du sens c'est si ces donn�es sont les m�mes pour tout le monde et peuvent b�n�ficier d'un m�canisme de cache. Dans ce cas seulement, peut-�tre que de construire la vue d'abord c�t� serveur (et voire m�me de cacher directement la vue) aurait du sens.

Il faut �galement noter que tout ceci n'a de sens qu'au bootstrap de la webapp, une fois que l'utilisateur a mis en cache la SPA, le templating c�t� serveur n'a aucune chance de battre le cache client en terme de perfs.

Ceci n'enl�ve rien � la qualit� de l'article, m�me si je n'aime pas React (� cause de sa gestion du html) et aurait pr�f�r� avoir le m�me article avec Angular

[phildepantin]

Bonjour,

Je trouve l'argument de la performance fallacieux.

Heu� O� est-il question de performance*? L'isomorphisme concerne le r�f�rencement, rien � voir avec la performance (en tout cas comme le terme est entendu ici).

[Marco46]

Ben dans le tutoriel ...

L'auteur avance 2 arguments, le r�f�rencement (ok) et les performances (l� je suis pas ok du tout) :

I. Pourquoi avoir recours � l'isomorphisme ?

Comme je l'ai dit pr�c�demment, un des motifs majeurs concerne le r�f�rencement. On peut �galement trouver un autre avantage concernant la rapidit� d'affichage des pages.

[...]

La partie sur le r�f�rencement est �vacu�e en une demi-phrase et ensuite tout le reste concerne la justification des performances.

Je te cite �galement la r�ponse de l'auteur de l'article � un commentaire sur l'article origine du site de SO@T :

@Fred : Comme pr�cis� dans l�article, l�avantage ne concerne pas uniquement le r�f�rencement. L�isomorphisme permet �galement d�am�liorer le temps de chargement du site (ici le rendu est g�n�r� c�t� serveur, si on g�n�re le contenu uniquement c�t� client il faut attendre que la librairie javascript �React� soit charg�e dans le navigateur). Pour un petit projet comme celui-ci la diff�rence n�est pas flagrante mais sur un projet de plus grande envergure cet aspect sera plus visible. Concernant le r�f�rencement, Google est d�j� capable d�ex�cuter du javascript, cependant le r�f�rencement risque d��tre moins performant qu�un site traditionnel dont le rendu html est g�n�r� par le serveur.

Pour avoir boss� sur une appli AngularJS o� le temps de bootstrap de la webapp �tait d�terminant je peux t'assurer que l'approche isomorphique pour r�soudre ce probl�me est idiote. L'important �tant de donner � manger � l'utilisateur le plus vite possible pour qu'il ne zappe pas (t'as en gros 2 secondes). Le plus efficace est donc le lazy downloading de ressource et afficher au plus t�t des informations � l'utilisateur. On avait fait �a avec requireJs � l'�poque.

Si tu attends que le serveur r�cup�re les infos de la DB puis g�n�re la page puis l'envoie � la webapp t'es pas sorti du sable. T'envoie direct le html et les css dont t'as besoin pour afficher un bout d'appli et c'est tout, t'attend rien tu r�ponds imm�diatement.