Artigos .NET Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 2 - Revista .Net Magazine 101
Demais posts desta série:
Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 1
Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 3

Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 2
Nesta segunda parte do artigo será abordada em profundidade a utilização da biblioteca JavaScript chamada Knockout Js que é usada extensivamente na aplicação do exemplo e que permite a criação de interfaces web dinâmicas baseadas em modelos de dados. Ao longo do artigo veremos as principais características e recursos do com exemplos pontuais dos mesmos, além de comentar em que parte do projeto de exemplo do primeiro artigo estes recursos foram utilizados.


Em que situação o tema é útil
A biblioteca Knockout Js é útil na criação de interfaces HTML dinâmicas baseadas em objetos JavaScript que dispensam a manipulação direta de elementos da página para exibir ou coletar informações da interface do usuário.

No artigo da edição passada abordamos a criação de um mural de rede social utilizando a tecnologia de comunicação em tempo real chamada SignalR.Net. Nele mostramos como os clientes da aplicação se conectam ao servidor e assim passam a enviar e receber notificações em tempo real, tais como novos status e comentários que são postados na rede social.

Neste artigo vamos nos concentrar no estudo da biblioteca de renderização de interfaces web chamada Knockout Js, que foi brevemente descrita na última edição e que merece uma apresentação mais detalhada.

O que é Knockout Js?

O Knockout Js é uma biblioteca open-source criada em 2010 por Steve Sanderson, funcionário da Microsoft, como um projeto pessoal. Basicamente, o Knockout Js é uma implementação JavaScript do padrão de projeto MVVM (Model – View – ViewModel) que permite a criação de interfaces web ricas com base em um modelo de dados. Podemos utilizá-lo em qualquer parte da página que necessite de atualizações dinâmicas de seus elementos.

Podemos relacionar como características principais do Knockout Js:

· Rastreamento de dependências – Através da marcação dos elementos HTML o Knockout cria uma ligação entre estes elementos com propriedades do seu modelo, possibilitando que a view seja atualizada automaticamente quando os dados deste modelo forem alterados.

· Bindings declarativos – Através dos bindings, o Knockout Js fornece um modo simples de conectar elementos da view com o modelo. Com isso, podemos construir views complexas usando contextos de binding estruturados.

· Extensividade – Você pode implementar seus próprios behaviors (comportamentos) customizados com novos bindings.

O Knockout Js também possui os seguintes benefícios adicionais:

· É uma biblioteca de JavaScript – Por fazer uso apenas de instruções nativas do JavaScript, o Knockout Js funciona com qualquer servidor ou tecnologia client-side.

· Pode complementar sua aplicação web preexistente – Não importa se você já tem um projeto rodando, você pode passar a usar o Knockout Js sem a realização de grandes mudanças na sua arquitetura.

· Leve – Tem apenas 13kb após a compactação pelo GZip.

· Funciona com os principais navegadores – IE 6 ou superior, Firefox, Chrome, Safari, etc.

· Suíte de especificações abrangente – Criados no estilo BDD (Behavior Driven Design), os testes de unidade do Knockout Js podem ser facilmente verificados em novos navegadores e plataformas.

Quando se trata de adotar uma nova biblioteca de JavaScript em um sistema já estabelecido, uma das preocupações mais comuns de arquitetos de software é o possível conflito entre bibliotecas quando as mesmas são colocadas para trabalhar ao mesmo tempo. Felizmente é possível adicionar e utilizar Knockout Js em um projeto que já trabalha com jQuery, Mootools, Prototype ou qualquer outra biblioteca JavaScript de uso geral, sem qualquer conflito entre elas.

Outra preocupação de arquitetos e desenvolvedores de software é se o uso do Knockout Js não se torna redundante quando já estamos usando em nosso projeto uma biblioteca tão poderosa como o jQuery. A resposta é que não se torna redundante, pois cada um foi criado para resolver um problema específico. Quando se trata de manipulação de interface web e tratamento de eventos, a biblioteca jQuery é muito competente e substitui de forma magnífica o velho e inconsistente desenvolvimento baseado em API DOM (Nota do DevMan 1) que era necessário no passado. Para manipulação direta de elementos do DOM o jQuery é provavelmente a melhor biblioteca disponível na atualidade.

Nota do DevMan 1

Programar diretamente para a API do DOM (Document Object Model) costuma ser uma grande dor de cabeça para desenvolvedores web. O maior problema é a inconsistência, já que alguns navegadores implementam a mesma funcionalidade através de métodos diferentes, forçando os desenvolvedores a detectar primeiro o navegador e só então executar o método apropriado.

Apesar destes benefícios, o desenvolvimento e manutenção de uma interface web rica pode se tornar uma tarefa árdua quando você só utiliza jQuery, pois você terá que implementar todas as funções para realização do bind dos dados do seu modelo para a view, considerando as diferentes características dos elementos HTML e de seus modelos de dados. Com o Knockout Js as coisas ficam mais simples, pois você precisa apenas marcar os elementos com a sua devida regra de bind e passar o modelo para o Knockout Js para que se encarregue de renderizar os dados na view.

Para ilustrar melhor vamos supor a seguinte especificação: ”Uma tela de pedidos com uma lista de itens e com um botão adicionar. Cada pedido tem um limite de cinco itens, então o botão adicionar deverá ser habilitado apenas quando o pedido possuir menos de cinco itens. Esta tela deverá ainda exibir o total de itens para o usuário.”.

Para implementar este requisito com jQuery teríamos que fazer um for no array de itens do pedido para então renderizarmos uma table HTML com os itens em questão. Teríamos ainda uma função para adicionar um novo item nesta lista que iria verificar se o número de itens é igual a 5 e então desabilitaria o botão Adicionar. Esta função teria ainda que contar o total de itens e atualizar esta informação em um elemento span para exibição ao usuário.

...
Quer ler esse conteúdo completo? Tenha acesso completo