BackboneJS - Aplicativos

O BackboneJS fornece uma estrutura para as aplicações web que permite separar a lógica de negócios e a lógica da interface do usuário. Neste capítulo, vamos discutir o estilo de arquitetura do aplicativo BackboneJS para implementar interfaces de usuário. O diagrama a seguir mostra a arquitetura do BackboneJS -

A arquitetura do BackboneJS contém os seguintes módulos -

  • Pedido HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Fonte de dados

Vamos agora discutir todos os módulos em detalhes.

Pedido HTTP

O cliente HTTP envia uma solicitação HTTP a um servidor na forma de uma mensagem de solicitação em que navegadores da web, mecanismos de pesquisa etc. atuam como clientes HTTP. O usuário solicita um arquivo, como documentos, imagens, etc., usando o protocolo de solicitação HTTP. No diagrama acima, você pode ver que o cliente HTTP usa o roteador para enviar a solicitação do cliente.

Roteador

Ele é usado para rotear os aplicativos do lado do cliente e os conecta a ações e eventos usando URLs. É uma representação de URL dos objetos do aplicativo. Este URL é alterado manualmente pelo usuário. O URL é usado pelo backbone para que ele possa entender qual estado do aplicativo deve ser enviado ou apresentado ao usuário.

O roteador é um mecanismo que pode copiar a URL para chegar à visualização. O Roteador é necessário quando os aplicativos da web fornecem URLs vinculáveis, marcáveis ​​e compartilháveis ​​para locais importantes no aplicativo.

Na arquitetura acima, o roteador está enviando uma solicitação HTTP para o View. É um recurso útil quando um aplicativo precisa de capacidade de roteamento.

Visão

As visualizações do BackboneJS são responsáveis ​​por como e o que exibir de nosso aplicativo e não contêm marcação HTML para o aplicativo. Ele especifica uma ideia por trás da apresentação dos dados do modelo ao usuário. As visualizações são usadas para refletir "a aparência do seu modelo de dados".

As classes de visão não sabem nada sobre HTML e CSS e cada visão pode ser atualizada independentemente quando o modelo muda sem recarregar a página inteira. Ele representa a parte lógica da IU no DOM.

Conforme mostrado na arquitetura acima, o View representa a interface do usuário que é responsável por exibir a resposta para a solicitação do usuário feita usando o Roteador.

Eventos

Os eventos são as partes principais de qualquer aplicativo. Ele liga os eventos personalizados do usuário a um aplicativo. Eles podem ser misturados em qualquer objeto e são capazes de vincular e disparar eventos personalizados. Você pode ligar os eventos personalizados usando o nome desejado de sua escolha.

Normalmente, os eventos são tratados em sincronia com o fluxo do programa. Na arquitetura acima, você pode ver quando um evento ocorre, ele representa os dados do modelo usando a Visualização.

Modelo

É o coração do aplicativo JavaScript que recupera e preenche os dados. Os modelos contêm dados de uma aplicação, lógica dos dados e representam o objeto de dados básico no framework.

Modelos representa entidades de negócios com alguma lógica de negócios e validações de negócios. Eles são usados ​​principalmente para armazenamento de dados e lógica de negócios. Os modelos podem ser recuperados e salvos no armazenamento de dados. Um modelo pega a solicitação HTTP dos eventos passados ​​pela visualização usando o roteador e sincroniza os dados do banco de dados e envia a resposta de volta ao cliente.

Coleção

Uma coleção é um conjunto de modelos que associa eventos, quando o modelo foi modificado na coleção. A coleção contém uma lista de modelos que podem ser processados ​​no loop e oferece suporte para classificação e filtragem. Ao criar uma coleção, podemos definir que tipo de modelo essa coleção terá junto com a instância de propriedades. Qualquer evento disparado em um modelo também será disparado na coleção do modelo.

Ele também recebe a solicitação da visualização, vincula eventos e sincroniza os dados com os dados solicitados e envia a resposta de volta ao cliente HTTP.

Fonte de dados

É a conexão configurada a um banco de dados de um servidor e contém as informações solicitadas ao cliente. O fluxo da arquitetura BackboneJS pode ser descrito conforme mostrado nas seguintes etapas -

  • Um usuário solicita os dados usando o roteador, que roteia os aplicativos para os eventos usando os URLs.

  • A visualização representa os dados do modelo para o usuário.

  • O modelo e a coleção recuperam e preenchem os dados do banco de dados ligando eventos customizados.

No próximo capítulo, entenderemos a importância dos eventos no BackboneJS.