BackboneJS - Applications

Le BackboneJS donne une structure aux applications Web qui permet de séparer la logique métier et la logique d'interface utilisateur. Dans ce chapitre, nous allons discuter du style architectural de l'application BackboneJS pour l'implémentation des interfaces utilisateur. Le schéma suivant montre l'architecture de BackboneJS -

L'architecture de BackboneJS contient les modules suivants -

• Requête HTTP
• Router
• View
• Events
• Model
• Collection
• La source de données

Parlons maintenant de tous les modules en détail.

Requête HTTP

Le client HTTP envoie une requête HTTP à un serveur sous la forme d'un message de requête où les navigateurs Web, les moteurs de recherche, etc., agissent comme des clients HTTP. L'utilisateur demande un fichier tel que des documents, des images, etc., en utilisant le protocole de requête HTTP. Dans le diagramme ci-dessus, vous pouvez voir que le client HTTP utilise le routeur pour envoyer la demande du client.

Routeur

Il est utilisé pour acheminer les applications côté client et les connecte aux actions et événements à l'aide d'URL. Il s'agit d'une représentation URL des objets de l'application. Cette URL est modifiée manuellement par l'utilisateur. L'URL est utilisée par le backbone afin qu'il puisse comprendre l'état de l'application à envoyer ou à présenter à l'utilisateur.

Le routeur est un mécanisme qui peut copier les URL pour atteindre la vue. Le routeur est requis lorsque les applications Web fournissent des URL pouvant être liées, mises en signet et partageables pour des emplacements importants dans l'application.

Dans l'architecture ci-dessus, le routeur envoie une requête HTTP à View. C'est une fonctionnalité utile lorsqu'une application a besoin d'une capacité de routage.

Vue

Les vues BackboneJS sont responsables de la manière et de ce qu'il faut afficher à partir de notre application et elles ne contiennent pas de balisage HTML pour l'application. Il spécifie une idée derrière la présentation des données du modèle à l'utilisateur. Les vues sont utilisées pour refléter «à quoi ressemble votre modèle de données».

Les classes de vues ne savent rien sur le HTML et le CSS et chaque vue peut être mise à jour indépendamment lorsque le modèle change sans recharger la page entière. Il représente le bloc logique de l'interface utilisateur dans le DOM.

Comme le montre l'architecture ci-dessus, la vue représente l'interface utilisateur qui est chargée d'afficher la réponse à la demande de l'utilisateur effectuée à l'aide du routeur.

Événements

Les événements sont les parties principales de toute application. Il lie les événements personnalisés de l'utilisateur à une application. Ils peuvent être mélangés dans n'importe quel objet et sont capables de lier et de déclencher des événements personnalisés. Vous pouvez lier les événements personnalisés en utilisant le nom souhaité de votre choix.

En règle générale, les événements sont gérés de manière synchrone avec leur flux de programme. Dans l'architecture ci-dessus, vous pouvez voir lorsqu'un événement se produit, il représente les données du modèle à l'aide de la vue.

Modèle

C'est le cœur de l'application JavaScript qui récupère et remplit les données. Les modèles contiennent les données d'une application, la logique des données et représentent l'objet de données de base dans le cadre.

Les modèles représentent des entités commerciales avec une logique métier et des validations métier. Ils sont principalement utilisés pour le stockage de données et la logique métier. Les modèles peuvent être récupérés et enregistrés dans le stockage de données. Un modèle prend la requête HTTP des événements passés par la vue à l'aide du routeur et synchronise les données de la base de données et renvoie la réponse au client.

Collection

Une collection est un ensemble de modèles qui lie des événements, lorsque le modèle a été modifié dans la collection. La collection contient une liste de modèles qui peuvent être traités dans la boucle et prend en charge le tri et le filtrage. Lors de la création d'une collection, nous pouvons définir le type de modèle que cette collection va avoir avec l'instance de propriétés. Tout événement déclenché sur un modèle se déclenchera également sur la collection dans le modèle.

Il prend également la demande de la vue, lie les événements et synchronise les données avec les données demandées et renvoie la réponse au client HTTP.

La source de données

Il s'agit de la connexion établie à une base de données depuis un serveur et contient les informations qui sont demandées au client. Le flux de l'architecture BackboneJS peut être décrit comme indiqué dans les étapes suivantes -

• Un utilisateur demande les données à l'aide du routeur, qui achemine les applications vers les événements en utilisant les URL.

• La vue représente les données du modèle pour l'utilisateur.

• Le modèle et la collection récupèrent et remplissent les données de la base de données en liant des événements personnalisés.

Dans le chapitre suivant, nous comprendrons la signification des événements dans BackboneJS.