BackboneJS - Aplicaciones

BackboneJS proporciona una estructura a las aplicaciones web que permite separar la lógica empresarial y la lógica de la interfaz de usuario. En este capítulo, analizaremos el estilo arquitectónico de la aplicación BackboneJS para implementar interfaces de usuario. El siguiente diagrama muestra la arquitectura de BackboneJS:

La arquitectura de BackboneJS contiene los siguientes módulos:

  • Solicitud HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Fuente de datos

Analicemos ahora todos los módulos en detalle.

Solicitud HTTP

El cliente HTTP envía una solicitud HTTP a un servidor en forma de mensaje de solicitud donde los navegadores web, motores de búsqueda, etc., actúan como clientes HTTP. El usuario solicita un archivo como documentos, imágenes, etc., utilizando el protocolo de solicitud HTTP. En el diagrama anterior, puede ver que el cliente HTTP usa el enrutador para enviar la solicitud del cliente.

Enrutador

Se utiliza para enrutar las aplicaciones del lado del cliente y las conecta a acciones y eventos mediante URL. Es una representación URL de los objetos de la aplicación. Esta URL la cambia manualmente el usuario. La red troncal utiliza la URL para que pueda comprender qué estado de la aplicación se enviará o presentará al usuario.

El enrutador es un mecanismo que puede copiar las URL para llegar a la vista. El enrutador es necesario cuando las aplicaciones web proporcionan URL enlazables, marcables y compartibles para ubicaciones importantes en la aplicación.

En la arquitectura anterior, el enrutador envía una solicitud HTTP a la vista. Es una característica útil cuando una aplicación necesita capacidad de enrutamiento.

Ver

Las vistas de BackboneJS son responsables de cómo y qué mostrar desde nuestra aplicación y no contienen marcado HTML para la aplicación. Especifica una idea detrás de la presentación de los datos del modelo al usuario. Las vistas se utilizan para reflejar "cómo se ve su modelo de datos".

Las clases de vista no saben nada sobre HTML y CSS y cada vista se puede actualizar de forma independiente cuando cambia el modelo sin recargar toda la página. Representa la parte lógica de la interfaz de usuario en el DOM.

Como se muestra en la arquitectura anterior, la Vista representa la interfaz de usuario que es responsable de mostrar la respuesta a la solicitud del usuario realizada mediante el enrutador.

Eventos

Los eventos son la parte principal de cualquier aplicación. Vincula los eventos personalizados del usuario a una aplicación. Se pueden mezclar en cualquier objeto y son capaces de vincular y activar eventos personalizados. Puede vincular los eventos personalizados utilizando el nombre deseado de su elección.

Normalmente, los eventos se manejan sincrónicamente con el flujo de su programa. En la arquitectura anterior, puede ver cuándo ocurre un evento, representa los datos del modelo mediante el uso de View.

Modelo

Es el corazón de la aplicación JavaScript que recupera y llena los datos. Los modelos contienen datos de una aplicación, la lógica de los datos y representan el objeto de datos básicos en el marco.

Los modelos representan entidades comerciales con cierta lógica comercial y validaciones comerciales. Se utilizan principalmente para almacenamiento de datos y lógica empresarial. Los modelos se pueden recuperar y guardar en el almacenamiento de datos. Un modelo toma la solicitud HTTP de los eventos pasados ​​por la vista utilizando el enrutador, sincroniza los datos de la base de datos y envía la respuesta al cliente.

Colección

Una colección es un conjunto de modelos que vincula eventos, cuando el modelo se ha modificado en la colección. La colección contiene una lista de modelos que se pueden procesar en el ciclo y admite clasificación y filtrado. Al crear una colección, podemos definir qué tipo de modelo va a tener esa colección junto con la instancia de propiedades. Cualquier evento que se active en un modelo también se activará en la colección del modelo.

También toma la solicitud de la vista, vincula eventos y sincroniza los datos con los datos solicitados y envía la respuesta al cliente HTTP.

Fuente de datos

Es la conexión establecida a una base de datos desde un servidor y contiene la información que se solicita al cliente. El flujo de la arquitectura BackboneJS se puede describir como se muestra en los siguientes pasos:

  • Un usuario solicita los datos usando el enrutador, que enruta las aplicaciones a los eventos usando las URL.

  • La vista representa los datos del modelo para el usuario.

  • El modelo y la colección recuperan y rellenan los datos de la base de datos vinculando eventos personalizados.

En el próximo capítulo, comprenderemos la importancia de los eventos en BackboneJS.