Les frameworks Full-stack

Dans les parties précédentes, nous avons vu d'une part les frameworks Back-end, qui gèrent le côté serveur du site, et d'autre part les frameworks Front-end, qui s'occupent à l'inverse de la partie visible par l'utilisateur final. L'objectif des frameworks Full-stack est de gérer les deux à la fois.
 

Le terme de Full-stack est apparu il y a quelques années ; il désigne les développeurs qui maîtrisent l'ensemble des technologies nécessaires au de développement d'un site (Back-end et Front-end).
C'est entre autres pour ce genre de métiers qu'ont été créés les frameworks Full-stack. L'avantage est qu'il suffit de connaître un seul framework pour développer un site en entier.
 

Dans cette partie, nous allons aborder un exemple de framework Full-stack : le framework Meteor.

Quel développeur Full-stack êtes-vous ?
Source : CommitStrip

Meteor est un framework Javascript basé lui aussi sur Node.js. Comme dit en introduction, c'est un framework Full-stack, et il propose à la fois fonctionnalités pour le Front-end et pour le Back-end :

• Côté serveur : Meteor est couplé à MongoDB, un système de gestion de base de données que nous allons présenter plus loin. Il est donc pensé pour utiliser ce SGBD, et dispose des fonctions permettant d'intéragir facilement avec. Par ailleurs, comme d'autres frameworks Back-end, Meteor propose également des modules simplifiant certaines problématiques récurrentes, tels que la gestion d'utilisateurs.
• Côté client : Meteor utilise un moteur de template, Blaze, assez proche de Twig. De plus, il est basé sur jQuery (une "super-librairie" JS assez complète) et hérite donc des fonctionnalités de celui-ci. Il permettra notamment d'intéragir avec les éléments HTML de la page via des sélecteurs CSS.

Back-end : MongoDB

MongoDB est un système de base de données NoSQL, c'est-à-dire qu'il ne repose pas sur le langage relationnel "classique" SQL. Son intérêt par rapport à SQL est qu'il est conçu pour être déployé sur des architectures distribuées, c'est-à-dire sur plusieurs serveurs. Avec les avantages que cela apporte : une réplication des données qui permet de continuer de fonctionner en cas de panne d'un serveur, et un traitement en parallèle, qui est plus rapide à mesure que l'on augmente le nombre de machines. Ce SGBD sera donc bien plus adapté lorsqu'on se retrouve à travailler sur des grands volumes de données (on dit qu'il est scalable). Une situation qui devient fréquente dans un contexte où le Big Data est de plus en plus présent.

MongoDB stocke ses données sous la forme de collections. Une collection est une liste d'objets Javascript, que l'on récupère au format JSON. Contrairement à une base de données classique, les données ne sont pas structurées : on peut stocker dans une même collection des données hétérogènes.

Concrètement, MongoDB propose les fonctions classiques que l'on peut attendre d'une base de données : recherche, insertion, suppression, modification.

db.acteurs.insert({nom:"Johansson", prenom:"Scarlett"});

db.acteurs.find({"birth":1984});

db.acteurs.findOne({"nom":"Johansson"});

db.acteurs.update({"birth":1984},{"nom":"Johansson"});

db.acteurs.remove({"nom":"Johansson"});

Front-end : Le moteur de template Blaze

Pour la partie Front-end, Meteor propose son propre moteur de template appelé Blaze. Notez qu'il n'est pas obligatoire de l'utiliser : Meteor peut également se coupler avec d'autres outils pour le Front-end. On peut notamment s'en servir avec les frameworks Angular et React que nous avons vus dans la partie précédente. Il est cependant recommandé d'utiliser Blaze, dans la mesure où qui a été conçu pour fonctionner avec Meteor.

Autrement, Blaze est un moteur de template qui se veut simple. Il permet les fonctionnalités minimales : affichage, conditions, boucles. Il repose sur la notion de templates, un concept assez proche des composants de React. De la même manière, ils permettent de créer des morceaux de code que l'on peut alors inclure plus tard dans la page.
Exemple de code que l'on pourrait retrouver en Blaze (code tiré directement de la documentation officielle) :

<template name="player">
	<li class="player {{selected}}">
		<span class="name">{{name}}</span>
		<span class="score">{{score}}</span>
	</li>
</template>
<template name="leaderboard">
	<ol class="leaderboard">
		{{#each players}}
			{{> player}}
		{{/each}}
	</ol>
</template>

Ce qui, avec un peu de CSS, donnerait quelque chose comme ceci :

Synchronisation entre le Back-end et le Fron-end

Tout l'intérêt de Meteor repose dans les fonctionnalités permettant de faire le lien entre le Back-end et le Front-end.

Communication serveur → client

Meteor permet au serveur d'envoyer des données au client avec la notion de helpers. Un helper est une fonction ou une variable JS définie côté serveur. Elle est associée à un template Blaze et peut être utilisée par celui-ci.

Exemple : supposons que l'on dispose d'un template comments qui contient la liste des commentaires d'un article. On pourrait alors le relier à Meteor de cette façon :

Côté serveur : article.js

Template.comments.helpers({
	listComments: function(idArticle) {
		return Articles.findOne({_id:idArticle}).comments;
	}
}

Côté client : article.html

<template name="comment">
	<div class="author">
		{{ comment.author }}
	</div>
	<div class="message">
		{{ comment.message }}
	</div>
</template>
<template name="comments">
	{{#each comment in listComments}}
		{{> comment }}
	{{/each}}
</template>

Résultat :

Tout comme Angular et React, Meteor dispose d'une forme de data-binding, au sens où lorsque la base de données est modifiée, on met à jour automatiquement les éléments affichés à l'utilisateur.

Communication client → serveur

À l'inverse, pour ce qui est de la communication du client vers le serveur, Meteor dispose également de fonctionnalités facilitant la tâche. Ainsi, on va de la même façon pouvoir définir des méthodes côté serveur qui seront appelables côté client. Concrètement, la directive Meteor.methods permet de définir ces fameuses méthodes appelables côté client.
On peut alors associer des événements à des éléménts HTML pour appeler ces méthodes quand on le désire. Blaze étant basé sur jQuery, on peut utiliser des sélecteurs CSS pour associer un événement à une élément.

Comme toujours, un exemple est plus parlant : supposons que l'on veuille continuer notre page affichant les commentaires et ajouter un bouton "J'aime" pour liker un commentaire.
Un tel code pourrait être implémenté comme ceci :

Côté serveur : article.js

Meteor.methods({
	likeComment: function(idComment) {
		Comments.update({_id: idComment}, {$inc: {likes:1}});
	}
});
Template.comment.events({
	"click button.like" : function() {
		Meteor.call("likeComment", this._id);
	}
});

Côté client : article.html

<template name="comment">
	<div class="author">
		{{ comment.author }}
	</div>
	<div class="message">
		{{ comment.message }}
	</div>
	<button class="like">J'aime</button>
</template>

Résultat :

Maintenabilité

Organisation

Meteor n'impose pas vraiment d'organisation du code. Il se veut simple d'utilisation et laisse le développeur hiérachiser son code comme il le souhaite. Notamment, on ne retrouvera pas d'architecture standard telle que MVC. Ce manque de contraintes d'organisation peut poser des problèmes sur les projets à long terme.
Malgré tout, Meteor propose un module, FlowRouter, qui permet de réaliser un système de routes relativement propre et de s'approcher d'une structuré de code ordonnée.

Réutilisabilité

La notion de templates permet à Meteor de créer très facilement des blocs de code que l'on peut inclure n'importe où dans le projet. De plus, les helpers permettent aux templates d'être relativement indépendants les uns des autres dans la mesure où un helper n'est associé qu'à un template. La réutilisabilité des templates semble donc plutôt assurée, pourvu que le développeur pense bien son code.

Simplicité de développement

C'est un point fort de Meteor : il suffit d'apprendre un unique framework pour maîtriser à la fois le Back-end et le Front-end. Par ailleurs, le framework est conçu pour être relativement simple à maîtriser. On peut arriver à un prototype fonctionnel sans trop d'effort. S'ajoute à cela que Meteor est basé sur JS, un langage de toute façon incontournable en développement Web. Un bémol cependant : Meteor rajoute une couche d'abstraction avec ses outils de communication du serveur vers le client, ce qui crée un effet de "boîte noire" : il peut être difficile de suivre ce qu'il se passe en cas de problème, notamment tout ce qui tourne autour des requêtes AJAX.

Rapidité

En ce qui concerne la rapidité, comment Meteor s'en sort ? Comme précédemment, nous allons le comparer sur un test concret. Meteor étant un framework back-end et Front-end, on peut le tester sur les 2 cas d'utilisation vus précédemment.

Vitesse du Back-end

Pour rappel, voici les résultats que l'on avait obtenus avec les autres frameworks sur un cas d'utilisation typique (lecture et traitement d'un gros fichier) :

Et Meteor dans tout ça ? Voyons le score qu'il obtient !

On voit que ce framework s'en sort relativement bien ! Et ceci est logique puisqu'il est lui-aussi basé sur Node et affiche donc des performances simillaires à Express.js. On peut noter qu'il est légèrement plus lent, ce qui est a priori normal étant donné qu'il emporte bien plus de surcouches. La différence est cependant très faible.

Vitesse du Front-end

On reprend l'exemple que l'on avait utilisé pour mesurer la vitesse de rendu du Front-end : actualisation d'un grand nombre d'éléments. Voici les résultats de Express par rapport aux deux autres frameworks Front-end :

Meteor affiche donc un résultat intermédiaire, ce qui est plutôt satisfaisant si on tient compte du fait que c'est un framework polyvalent et qu'on pourrait donc s'attendre à des performances moindres par rapport à des frameworks purement Front-end.

Popularité

Comparons maintenant la popularité de Meteor par rapport aux 5 autres frameworks que l'on a vus :

On voit que Meteor se trouve à peu près au milieu. C'est donc un framework qui se défend bien et qui a des raisons d'être prometteur.

Tableau récapitulatif

Pour résumer : Meteor présente l'avantage d'être un framework Full-stack : il suffit de connaître ce framework pour développer un site en entier. Il est par ailleurs relativement simple à maîtriser, on peut très rapidement avoir un site fonctionnel, ce qui est assez agréable si on compare à d'autres frameworks. Il hérite des avantages de Node et de MongoDB en terme de performances, ce qui en fait un framework de choix pour les applications temps réel. Néanmoins, le manque d'organisation intrinsèque à ce framework peut poser des risques de maintenabilité sur des projets à long terme.

Les frameworks Front-end Conclusion