Modelo Breeze/Knockout

por Mads Kristensen

The Breeze/Knockout MVC Template foi escrito por Ward Bell

Baixar o modelo Breeze/Knockout MVC

Você já ouviu falar de "aplicativo de página única" (SPA) e se perguntou o que é. Embora você possa ler sobre isso, você prefere experimentá-lo por si mesmo. Mas quem tem tempo para baixar uma amostra? Se você tiver o Visual Studio, terá um exemplo de SPA em funcionamento em menos de 60 segundos com o modelo ASP.NET MVC 4 "Aplicativo de Página Única Breeze/Knockout".

O que é o modelo de SPA Breeze/Knockout?

A maioria dos modelos de projeto gera um esqueleto de aplicativo. Você coloca carne nesses ossos adicionando seu código e, eventualmente, entrega um aplicativo funcional. O modelo de SPA Breeze/Knockout é diferente. Ele gera um aplicativo de exemplo para você estudar. Ele demonstra um design de aplicativo SPA e muitas das técnicas para criar um SPA.

O modelo Breeze/Knockout é uma variação do modelo de SPA do KnockoutJS incluído na atualização do ASP.NET and Web Tools 2012.2. O modelo Breeze SPA gera um aplicativo com a mesma experiência de usuário, mas tem uma implementação diferente, usando o Breeze para gerenciamento de dados.

O modelo de SPA do KnockoutJS faz solicitações de serviço com jQuery AJAX bruto, o que é adequado para um aplicativo simples. Mas aplicativos mais sofisticados têm requisitos de gerenciamento de dados mais exigentes. Por exemplo, a maioria dos aplicativos:

• Consultar e consultar novamente o servidor durante uma sessão de usuário estendida.
• Adicione filtros de consulta, classificação e paginação.
• Compartilhe os mesmos dados em várias telas.
• Acumule alterações em muitos objetos e salve-as como uma única transação.
• Valide as alterações no cliente para que o usuário possa corrigir erros antes de confirmar alterações no banco de dados.

A biblioteca BreezeJS manipula essas tarefas para você, liberando você para desenvolver a lógica do aplicativo e a experiência do usuário que mais importam.

O Breeze é uma biblioteca código aberto para a criação de aplicativos de dados avançados em JavaScript e HTML, os tipos de aplicativos que historicamente foram entregues como aplicativos de área de trabalho autônomos.

O modelo Breeze/Knockout ajuda você a dar esse primeiro passo crucial em direção a uma infraestrutura de gerenciamento de dados mais robusta. Ele produz um aplicativo Todo de exemplo que é externamente idêntico ao modelo de SPA do KnockoutJS. Por dentro, ele substitui a camada de dados AJAX pelo Breeze, para que você possa comparar as duas abordagens lado a lado. Claro, ele mal toca o potencial de um aplicativo Breeze. Mas você verá como Breeze funciona e quão pouco é necessário para fazer essa transição.

Vamos começar.

Criar um projeto de modelo Breeze/Knockout

Baixe e instale o modelo clicando no botão Baixar acima. O modelo é empacotado como um arquivo VSIX (Extensão do Visual Studio). Talvez seja necessário reiniciar o Visual Studio.

No painel Modelos , selecione Modelos Instalados e expanda o nó Visual C #. Em Visual C#, selecione Web. Na lista de modelos de projeto, selecione ASP.NET Aplicativo Web MVC 4. Nomeie o projeto e clique em OK.

No assistente Novo Projeto , selecione Breeze Knockout SPA.

Pressione Ctrl-F5 para compilar e executar o aplicativo sem depuração ou pressione F5 para executar com depuração.

Quando o aplicativo é executado pela primeira vez, ele exibe uma tela de logon. Clique no link "Inscrever-se" e uma nova página desliza para exibição, na qual você pode inserir um nome de usuário e uma senha. (As páginas de logon e registro são criadas usando ASP.NET MVC.) Quando você envia o formulário de registro, o servidor gera um TodoList com dois itens para sua conta. Em seguida, ele apresenta-os para você em uma nota amarela.

Agora você está na terra do SPA. Tudo o que você vê e experimenta ao manipular Todos é renderizado e gerenciado no cliente com a ajuda de Knockout e Breeze. Explore o aplicativo como um usuário... mas com os olhos de um desenvolvedor. Use as ferramentas de desenvolvedor em seu navegador para capturar o tráfego de rede. (Na Internet Explorer: pressione F12, selecione a guia Rede e clique em Iniciar captura.) Agora tente o seguinte:

• Adicione um novo item Todo.
• Clique no rótulo e edite o título do item Todo
• Marque uma caixa de seleção para marcar o item concluído. Observe que a caixa de texto está desabilitada, portanto, o título não é mais editável.
• Clique em 'x' à direita do rótulo. O item desaparece e é excluído do banco de dados.
• Escolha outro item e desmarque seu título. Você receberá um erro de validação de que o título é necessário. Após uma breve pausa, o título anterior é restaurado.
• Digite um título ridiculamente longo. Você receberá um erro de validação diferente de que o título é muito longo.
• Clique no botão "Adicionar Lista De Tarefas Pendentes". Uma nova lista aparece à esquerda da lista anterior.
• Reproduza com o título TodoList, disparando suas validações necessárias e de comprimento.
• Clique na caixa de texto título para limpar a mensagem de erro.
• Clique no "x" no círculo no canto superior direito para excluir TodoList e todos.

A lógica de validação é executada no lado do cliente pelo Breeze. Os atributos de validação nas classes de modelo de servidor são propagados para o cliente e executados automaticamente antes que o cliente entre em contato com o servidor.

Examine o tráfego de rede. Observe que não houve chamadas para o servidor quando Breeze detectou um erro. Cada alteração válida resultou em uma solicitação POST para "/api/Todo/SaveChanges". O Breeze agrupa as alterações e as envia como uma única solicitação para o método do controlador de SaveChanges API Web. Isso é diferente do modelo de SPA do KnockoutJS, que faz solicitações PUT, POST e DELETE para cada item individualmente.

Espiar dentro

Esse aplicativo tem um lado do cliente e um lado do servidor. A pilha do lado do cliente consiste em um pequeno HTML e uma combinação de módulos JavaScript de aplicativo (na pasta "app") além de bibliotecas JavaScript de terceiros (na pasta "Scripts").

Se você investigou o modelo de SPA do KnockoutJS, isso deve parecer muito familiar. Concentre-se nas caixas azuis. A arquitetura da interface do usuário é Model-View-ViewModel (MVVM), na qual os widgets HTML da exibição são separados de forma limpa do código de apresentação de suporte no modelo de exibição. Um sistema de associação de dados (Knockout, nesse caso) coordena a exibição e o modelo de exibição para que cada um possa fazer seu trabalho sem conhecimento íntimo do outro.

O modelo encapsula os dados todo. As entidades no modelo são construídas pelo Breeze com propriedades observáveis knockout, para que possam ser associadas diretamente a widgets na exibição. O modelo de exibição solicita que o contexto de dados adquira e salve as entidades do modelo. O contexto de dados delega a maior parte do trabalho ao Breeze.

A pilha do lado do servidor consiste em alguns códigos de desenvolvedor e três bibliotecas principais do .NET: API Web, Entity Framework e Breeze.NET.

A arquitetura básica é a mesma que o modelo de SPA do KnockoutJS. No entanto, a implementação é muito mais simples: os DTOs foram excluídos e a maioria dos detalhes do Entity Framework foram delegados para Breeze.NET.

Próximas etapas

Sugerimos que você explore o código, guiado pela ampla discussão das pilhas do cliente e do servidor no site do Breeze.

Você pode tentar jogar com a consulta do lado do cliente breeze; adicione alguns filtros e classificações. Você pode adicionar mais propriedades de modelo e mais entidades para ter uma melhor sensação para o desenvolvimento de SPA de ponta a ponta. Quando você estiver confiante no design, poderá extrair os recursos todo e substituí-los por seus próprios.

Em breve, você estará pronto para a próxima grande etapa: adicionar telas do lado do cliente e navegar entre elas. Você deixará esse modelo de SPA para trás e se transformará em uma pilha de SPA mais completa, como John Papa's Hot Towel, que adiciona Durandal à mistura Breeze e Knockout.