Avec quel Framework JavaScript découpler Drupal ? AngularJS, ReactJS, EmberJS, PolymerJS ?

Ils s’inscrivent dans un mouvement d’innovation côté front-end : les Frameworks JavaScript. Du fait de leur popularité croissante, nous avons étudié les plus prometteurs : AngularJS, ReactJS, EmberJS et enfin PolymerJS. L’intérêt de cette étude est de montrer les spécificités de chacun et leur potentiel dans le modèle du Headless CMS.  

AngularJS

Le choix du Framework pour un projet peut avoir un impact conséquent sur la capacité à respecter les délais de livraison ainsi que la maintenance du code. AngularJS est un framework Javascript libre, open source et développé par Google. Celui-ci impose une certaine architecture permettant de structurer le code suite à la constatation d’un manque d’extensibilité, de réutilisabilité et de testabilité de celui-ci. AngularJS est la référence pour l’infrastructure côté client, il propose en outre :

• Une architecture Modele-View-Controller (MVC): très connue, l’architecture MVC est basée sur la séparation entre les données c'est-à-dire le modèle, la présentation des données soit la vue, et les actions réalisés sur les données par les contrôleurs.
• Le Data Binding : AngularJS est binding-bidirectionnel entre la vue et le modèle, si une donnée est modifiée la vue est mise à jour. Le binding bi-directionnel permet d’éviter les manipulations de DOM et les nombreux appels Ajax. De plus, l’avantage certain est la séparation entre la vue et le contrôleur pour une facilité de maintenance et de testabilité.
• Les directives : la manipulation du DOM entraine souvent la création d’un code difficilement maintenable et testable. Les directives permettent de développer des attributs et des éléments HTML spécifiques pour manipuler facilement le DOM. 
• L’injection de dépendances : comme Synfony 2, AngularJS utilise les injections de dépendance pour permettre à des modules de ne pas se soucier de l’instanciation des modules dont ils dépendent. AngularJS se charge de les instancier et de les injecter.

Les avantages d’AngularJS :

• Meilleure qualité de code et meilleure maintenance : les bonnes pratiques pour coder proprement sont accessibles aisément ;
• Meilleure testabilité : notamment grâce aux injections de dépendances qui permettent de séparer les tâches, de simplifier la maintenance du code et de favoriser les tests unitaires ;
• Un Framework complet : à la différence d’une librairie, AngularJS fournit de nombreuses fonctionnalités natives pour élaborer une application complète.

ReactJS

A la différence d’AngularsJS, ReactJS n’est pas un Framework mais une bibliothèque open source JavaScript conçue pour créer des interfaces utilisateurs. Cette bibliothèque repose sur une approche plutôt différente en se concentrant sur la gestion du rendu de la vue. ReactJS propose : 

• Les DOM virtuels : React utilise un DOM virtuel, une représentation interne du DOM extrêmement rapide. Il est donc possible d’agir sur le DOM virtuel et non le DOM du navigateur, pour modifier uniquement la partie du DOM virtuel qui nécessite de l’être. Plus performant, seuls les éléments qui font l’objet d’un changement sont mis à jour.
• Les composants isolés : ReactJS est orienté composants et propose de fabriquer des composants web permettant de générer du code HTML à chaque changement d’état. De plus, la bibliothèque JavaScript permet l’isolation des composants et mais également l’isolation des éléments de l’interface, du comportement et de leur forme. L’isolation permet d’intégrer les composants dans une application avec facilité.

Les avantages de ReactJS :

• L’utilisation du JSX : le JSX est une syntaxe HTML compilé par JavaScript.  Le balisage et le code sont composés dans le même fichier permettant ainsi d’avoir une auto-complétion performante durant le développement. ReactJS propose une bonne colorisation syntaxique réduisant ainsi le risque d’erreurs d’écriture en stade de conception. Le compilateur JSX indique immédiatement les erreurs.
• Réutilisabilité et testabilité : les composants isolés du layout favorisent la réutilisabilité du code et les tests unitaires. Il suffit de tester le comportement du composant isolé de son contexte.
• Une maintenance plus facile : en cas de bug, la correction du composant est effective à chaque endroit où le composant est utilisé.

EmberJS

Tout comme AngularJS, EmberJS est un Framework JavaScript MVC (Model-View-Controller). Ce Framework s’utilise côté client, il permet de gérer les actions utilisateurs sur une page sans rechargement et de créer des one-page-applications. Les one-page-applications permettent de télécharger l’intégralité de l’application à la première requête de l’utilisateur puis de communiquer uniquement avec le serveur par requête Ajax. La manipulation des données s’opère via une API REST. Les spécificités d’EmberJS sont : 

• Structuration des URL : EmberJS organise ses fichiers en fonction de la structure des URL de son application, selon le principe que toute interaction ou état doit être reflété dans l’URL et vice-versa. EmberJS se base sur les  noms des classes des contrôleurs pour les lier aux URL. La structuration d’URL est au cœur d’EmberJS et est un atout manifeste par rapport aux autres Frameworks. 
• Data binding : EmberJS propose une intégration data-binding à travers tout le Framework. Que ce soit les templates et les vues, chaque variable affichée dans le template est data-bindée.
• Conventions de nommage : EmberJS dispense de conventions fortes pour structurer les objets. Ces conventions sont utilisées pour les routes, les contrôleurs et les templates. 
• Modèle objet : EmberJS permet de définir un modèle d’objets pour mutualiser du code via l’héritage de classes et de typer les objets. Le modèle objet favorise considérablement la robustesse du code.

Les avantages d’Ember JS :

• Expérience utilisateur : EmberJS évite les rechargements de pages au maximum dans le but de rendre la navigation plus fluide pour l’utilisateur grâce aux one-page-applications.
• Orienté objet : A la différence d’AngularJS qui adopte un style procédural, EmberJS opte pour une approche orientée objet, améliorant ainsi la maintenance et la réutilisabilité du code.
• Structure homogène : grâce aux nombreuses conventions de nommage, l’homogénéité de la structure des applications est assurée.

Polymer JS

PolymerJS est une bibliothèque légère développée par Google et des contributeurs Github, qui vous permet de profiter pleinement des composants Web. La bibliothèque répond au problème de la complexité des applications Web, en offrant la possibilité de créer des éléments personnalisés et réutilisables. Le code est ainsi plus propre et demande moins d’effort en maintenance.

• Création de composants Web : dans le même principe que les directives proposées par AngularJS, PolymerJS permet de découper une application en plusieurs morceaux indépendants, qui contiennent le code HTML, le style CSS et le code JavaScript. La création de composants web indépendants et réutilisables repose sur les templates, les imports HTML, le DOM shadow et les éléments personnalisés.
• Composants paramétrables : PolymerJS offre la possibilité de déclarer des propriétés sur les composants pour les rendre paramétrables.  
• Le data-binding : comme EmberJS et AngularJS, cette bibliothèque propose un data-binding pour séparer les couches de contrôle Modèle et vue.

Les avantages de PolymerJS :

• Réutilisabilité du code: les composants sont indépendants et réutilisables tout au long du développement d’une application. La réutilisabilité des composants permet d’éviter les répétitions et de gagner du temps. 
• Animation : PolymerJS facilite la mise en œuvre du material design en mettant à disposition de nombreuses transitions et animations pré-configurées.
• Personnalisation : est plus forte grâce à la création des composants Web.

Le CMS sans tête

Avec les CMS traditionnels, il est difficile d’offrir une navigation de qualité pour les applications Web. Une approche a été pensée pour proposer des expériences utilisateur révolutionnaires : le Headless CMS ou le CMS sans tête.
Ce modèle propose de séparer le Front-end du Back-end et d’utiliser un Framework différent du CMS.  Le CMS sans tête repose sur :

• Un Back-end basé sur une base de données et géré grâce à une interface graphique ;
• Un contenu accessible via un web service et une API REST délivrant des données dans un format JSON ;
• Un Front-end séparé du Back-end, celui-ci peut être un site léger réalisé grâce à un Framework ou des bibliothèques JavaScript comme ceux que l’on a étudiés ci-dessus.

Les avantages :

• Dans le cas où le CMS standard montre quelques limites côté Front-end, il s’agit de bénéficier des fonctionnalités riches proposées par d’autres Frameworks.
• Le CMS sans tête fournit habituellement le contenu via une API, ce qui signifie qu’il peut fournir du contenu partout. 
• Le travail des équipes Front-end et Back-end est séparé, chacun est libre d’optimiser l’application selon ses outils, sans être limité par les conventions et la structure du Back-end.
• Le modèle du CMS sans tête peut être adopté avec un large choix de Frameworks ou de bibliothèques dont les JavaScript, pour créer des expériences utilisateurs toujours plus innovantes ! Pourquoi ne pas tester ce modèle avec Drupal ?