Utilisation de Backbone.JS

Présentation globale

Backbone.js est un framework Javascript basé sur Underscore.js (librairie Javascript fournissant des fonctions utilitaires pour toutes tâches de programmation).

Cette librairie est libre et open-source. Les avantages de ce framework sont sa facilité d’installation et de compréhension et sa légèreté, ce qui le rend particulièrement intéressant pour des applications avec un faible jeu de données ou une application web monopage. Le framework Backbone.JS implémente une liste d’objets :

• Model : représentation des données de l’application
• View : élément de l’interface utilisateur
• Collection : liste de « Models »
• Events : évènements associés à n’importe quel objet

Installation du framework

Afin d’installer Backbone.js il vous suffit de télécharger la version la plus récente du framework (https://backbonejs.org/backbone-min.js), la librairie Underscore.js (https://underscorejs.org/) et la librairie jQuery (https://jquery.com/download/). Nous utiliserons Visual Studio Code pour écrire le code source.

Procédure de création du projet

• Dans Visual Studio Code, créez l’architecture de votre projet comme ci-dessous (les fichiers .js présent dans le dossier lib étant les librairies que vous avez téléchargées précédemment) :

Dans le fichier index.html, copiez-collez le texte ci-dessous

Création d’un Model

Afin de vous présenter brièvement le fonctionnement de Backbone.js, nous allons commencer par la création d’un Model. Dans le fichier main.js, écrivez le code ci-dessous :

Ici, nous créons un Model « Student ». Ce « Student » contient un « idAttribute », permettant de l’identifier par rapport aux autres « Student », un champ « urlRoot » renseignant la base à utiliser pour la génération d’une URL afin d’effectuer des opérations de sauvegarde / suppression / création.

La méthode « validate » permet de valider le « Model » avant de le sauvegarder dans votre base de données. Ici, un « Student » doit avoir des notes pour pouvoir être sauvegardé dans la base. Nous avons aussi ajouté une méthode « addGrade » pour ajouter une note au « Student » et afficher la liste des notes dans la console.

Afin de tester la création de notre « Model », ajoutez à la suite dans le fichier main.js les lignes.

Nous créons un nouveau « Student » avec une liste de notes prédéfinies et nous ajoutons une note à cette liste. Lancez ensuite l’application Web en ouvrant le fichier index.html dans un navigateur Web. En ouvrant les outils de développement, vous aurez une ligne renseignée dans la console.

Vous venez de créer un « Student », puis vous avez ajouté la note 5 à la liste de notes. Il est donc aisé de créer un « Model » et d’interagir avec pour modifier ses attributs. Nous allons maintenant voir comment créer un objet « View » pour afficher le « Model ».

Création d’une View

Afin d’afficher les notes de notre étudiant, nous allons créer un objet « View ». Pour cela, ajoutez à la suite dans le fichier main.js :

Ici, nous créons une « View » nommée « StudentView ». Le champ « tagName » permet la création d’une liste. Le champ « className » spécifie la classe de l’objet HTML créé. La fonction « render » est capitale dans un objet « View ». Elle spécifie le rendu de l’objet « View » et met à jour le HTML afin d’afficher les informations souhaitées. Ici, nous ajoutons au template les informations de notre « Student ». Pour cela, il va nous falloir ajouter ce template dans notre fichier index.html. Ajoutez les lignes de texte suivantes juste avant le nœud

Il nous faut maintenant instancier notre objet « View » et ajouter le HTLM généré au DOM. Pour cela, ajoutez à la fin du fichier index.html les lignes suivantes :

Vous n’avez ensuite qu’à relancer l’application Web et vous verrez affichée la liste des notes de l’étudiant.

Félicitations, vous avez créé et affiché votre première « View » via Backbone ! Ce tutoriel n’est qu’un bref aperçu des possibilités offertes par Backbone.js, si vous souhaitez creuser le sujet, voici quelques sites web / tutos qui vous seront utiles :

• https://backbonejs.org/
• https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/
• https://backbonejs.org/examples/todos/index.html

Conclusion

Nous avons vu la création d’un « Model » et l’affichage de ses informations via une « View ». Backbone.js permet aussi la création d’événements pour ajouter des interactions entre la vue et le modèle (ajout / suppression d’objets, modification d’un objet, etc…). Il est aussi possible d’y associer une base de données via une application SpringBoot pour gérer les données plus efficacement.