L'approche MVC en javascript avec backbone.js

Si vous avez déjà travaillé sur une application utilisant massivement le javascript, vous savez que cela peut devenir rapidement cauchemardesque pour garder un semblant de synchronisation entre les interfaces HTML, la logique javascript et la base de données.

Dans ces cas-là, jQuery (ou mootools, ou tout autre framework javascript "classique") n'est pas suffisant, une approche plus structurée est nécessaire.

C'est là que backbone.js entre en jeu.

Avec backbone.js, vous représentez vos données en models (approche MVC), qui peuvent être créés, validés, détruits et sauvegardés vers le serveur. A partir du moment ou une action modifie un model, celui-ci active un évènement "change". Toutes les vues qui affichent ce model sont notifiées par cet événement, les forçant à se ré-afficher.

C'est aussi simple que ça (pour les lecteurs familiers du MVC), plus besoin de chercher dans le DOM pour trouver le bon élément avec le bon id pour modifier manuellement le code HTML : Quand le model change, les vues se rechargent d'elles-même.

Exemple TODO List

L'exemple donné dans la documentation officielle est très complet.

Model

 window.Todo = Backbone.Model.extend({

Représente une tâche dans la todo list.

Le model contient 3 attributs : content (le contenu de la tâche), order (sa place dans la collection/liste) et done (si la tâche est terminée).

Collection

window.TodoList = Backbone.Collection.extend({

Représente la todo list.

La collection contient entre autres, la méthode de stockage

View

 window.TodoView = Backbone.View.extend({

Représente la vue d'un élément todo.

Contient le tag html lié à l'élément, les events et l'appel des méthodes du model en fonction.

Application

 window.AppView = Backbone.View.extend({

Représente l'application complète (la TODO list).

Conclusion

Backbone.js, comme son nom l'indique est comme une colonne vertébrale pour vos applications javascript.

De plus, utilisez-le en couple avec jQuery et vos applications n'auront jamais été aussi évoluées.

Site officiel