Dans un de mes précédents articles, intitulé Backbone book : Google Books API + Backbone.js, je vous montrais à quoi pouvez ressembler une application faîtes avec Backbone.js en quelques lignes de codes.

Je vous avais dit que j’allais faire un tutoriel dessus, mais entre temps, un des mes lecteurs, David Sulc s’est proposé d’en faire un en utilisant Backbone.Marionnette, une extension Backbone.js permettant de structurer facilement une application.

N’ayant malheureusement peu de temps pour sortir beaucoup d’articles en ce moment, je préfère vous montrer ses 2 articles étant très bien écrit, mais désolé pour certains de mes lecteurs fan de la langue française, ses 2 articles sont en anglais.

Voic les ressources utiles pour accéder aux articles et à l’application Backbone Books remastérisée avec Backbone.Marionnette :

• La démonstration
• Partie 1 du tutoriel
• Partie 2 du tutoriel

Me concernant, je travaille actuellement (dès que j’ai un peu de temps libre) sur le prochain tutoriel Backbone.js, j’en suis à un tiers et celui-ci s’intitule : Les collections avec Backbone.js.

Bonne lecture et à bientôt

Après réflexion, j’ai décidé de vous expliquer pas à pas le fonctionnement de Backbone.js afin que l’application Backbone Books soit un jeu d’enfants pour vous par la suite.

Ce tutoriel est donc orienté sur les modèles (Model) dans Backbone.js, en effet il y a beaucoup de choses à dire dessus et je trouve que c’est vraiment la base pour commencer à travailler avec Backbone.js.

Voici le sommaire :

• Instancier un modèle avec Backbone
• Différences entre un objet JavaScript et un modèle Backbone
• Écouter des évènements
• Liaison au serveur
• Étendre Backbone.Model
• Hors-sujet

Instancier un modèle avec Backbone

Tout d’abord, il faut savoir que Backbone.Model est une classe, vous pouvez donc l’instancier comme ceci :

var model = new Backbone.Model();

Cependant, si on lit la documentation sur le constructeur de Backbone.Model, on peut voir qu’il prend optionnellement un objet JavaScript afin de prédéfinir ses attributs de base.

Imaginons que nous avons ceci comme attributs :

1.
2.
3.
4.
5.

{
  prenom: 'Seb',
  pseudo: 'Atinux',
  age: 19
}

Lire la suite →

Construire une application web (une seule page) avec une interface utilisateur complexe devient extrêmement difficile en utilisant uniquement jQuery ou MooTools.
Vous pouvez bien entendu créer une application web avec ces librairies, cependant vous n’aurez pas une structure solide et vous vous retrouverez rapidement avec une pile de callbacks jQuery et un code difficilement maintenable.

Je n’ai pas vraiment besoin d’expliquer pourquoi construire quelque chose sans structure est une mauvaise idée. Bien sûr vous pouvez toujours construire votre propre architecture mais cela risque de vous prendre du temps et de plus vous ne pourrez pas forcément bénéficier de la communauté open source.

Comment Backbone.js peut m’aider ?

Backbone est une minuscule librairie par rapport à tous ce qu’elle apporte comme fonctionnalités. Je ne peux pas vous résumer facilement tous les bénéfices que cette librairie vous apportera, mais en voici quelques uns :

• Délimiter facilement plusieurs états dans votre application grâce au routeur.
• Manipuler des modèles et les lier au serveur sans devoir écrire un seul appel AJAX.
• Créer des vues qui écoutent sur ces modèles et qui se mettent à jour automatiquement si les modèles changent.
• Découper les parties de vos application en vues qui géreront toute la logique de ces parties, la maintenance est beaucoup plus rapide par la suite.
• Etc.

Le mieux est d’apprendre à l’utiliser, cela tombe bien il y a quelques tutoriels sur ce blog pour apprendre à utiliser Backbone :

• Backbone JS : tutoriels et démo
• Organiser son code Backbone JS en modules
• Backbone.js : le fonctionnement des modèles

Vous découvrirez rapidement les bénéfices qu’apporte Backbone et ils vous sembleront évidents par la suite.

Traduit et inspiré de http://backbonetutorials.com/why-would-you-use-backbone/