Surge então a ideia
de mudanças de paradigmas, mudanças na forma de trabalharmos. É o que ocorre
hoje em dia com relação a utilização de eventos, onde estamos passando aos
poucos de processamentos
realizados no lado do servidor para as aplicações web no lado do cliente, no entanto,
essa mudança consiste fortemente em UI’s (interfaces de
usuário) que são baseadas em eventos. Neste artigo, estaremos trabalhando com um framework que tem o objetivo
de superar esses obstáculos da programação JavaScript e HTML, além
de reduzir o tempo gasto com a escrita de códigos
repetitivos, além disso, estaremos fazendo com que o design se torne
ainda mais fácil de testar, reduzindo ao máximo as repetições e
também obtendo a independência do browser. O framework ao
qual estamos nos referindo é o Knockout, que apresentaremos
em detalhes com relação a sua utilização, além de utilizarmos o SignalR da
Microsoft, dentre outros itens que nos auxiliarão bastante em nossos projetos.
Quando estamos com dificuldades no desenvolvimento de aplicações, onde precisamos inovar para que tenhamos uma melhor resposta tanto por parte do cliente quanto por parte de nós desenvolvedores, surge então a ideia de mudança de paradigmas. É o que vemos hoje em dia com relação aos eventos, onde estamos passando aos poucos de processamentos realizados no lado do servidor (forma tradicional) para as aplicações web no lado do cliente, no entanto, essa mudança consiste fortemente em UI’s (Interfaces de usuário) que são baseadas em eventos.
Esta mudança consiste necessariamente na combinação do poder de processamento com base em uma grande quantidade de dados por parte do servidor, com a agilidade e reatividade de um aplicativo baseado no lado cliente.
Quando tratamos da iteratividade de UI baseada no lado cliente, isso significa que temos aqui uma grande manipulação de arquivos JavaScript, HTML e CSS. Para valores que são transferidos entre os elementos do DOM e do código JavaScript, devemos realizar uma grande quantidade de chamadas pelo document.getElementById e ligações de eventos diretamente no HTML, como os atributos do onClick. Além disso, o código JavaScript que é desenvolvido desta forma é de difícil depuração, manutenção e além de tudo, possui uma grande quantidade de duplicações.
Neste artigo, estaremos trabalhando com o Knockout, framework que tem o objetivo de superar esses obstáculos da programação JavaScript e HTML, além de reduzir o tempo gasto com a escrita de códigos repetitivos, além disso, estaremos fazendo com que o design se torne ainda mais fácil de testar e nos livrando de repetições e obtendo a independência do browser.
Apresentaremos aqui detalhes com relação a utilização deste framework tão bem visto dentre os desenvolvedores front-end. Vejamos primeiramente com relação a alguns itens importantes do Knockout, como a utilização dos Observables.
O que são os observables?
O Knockout possui em seu núcleo o conceito de observables, que não é um novo ou exclusivo deste framework, o que facilitará sua compreensão. Este conceito é bastante semelhante à interface System.ComponentModel.INotifyPropertyChanged, presente no .NET Framework a partir da versão 2.0 da Microsoft.
Esta, por sua vez, é um produto do padrão Observer estendido dos padrões de projetos idealizados no famoso livro "Design Patterns: Elementos de Software Orientados a Objetos reutilizáveis", que foi escrito pelos quatro estudiosos, conhecidos como "Gang of Four", que são Erich Gamma, John Vlissides, Ralph Johnson e Richard Helm.
O conceito de Observer tem por objetivo descrever um objeto que faz a manutenção de uma lista de dependentes e os notifica quando ocorrem mudanças no estado interno dos objetos como se houvesse uma reação em cadeia com base na mudança de estado. Utilizando o Knockout, podemos fazer com que qualquer propriedade de um objeto JavaScript se torne observável (observable) de forma fácil, e até mesmo criar observables encadeados para formar sistemas complexos de publicações e assinaturas.
O Knockout nos permite realizar esta injeção no comportamento do código sem muita complexidade. Vejamos, por exemplo, que quando temos nossa estrutura adicionada a uma página HTML, tudo o que será preciso fazer no JavaScript será atribuirmos o valor de suas propriedades para que sejam observable. Vejamos um simples exemplo com relação a observables, de acordo com a Listagem 1.
Listagem 1. Exemplo de utilização de um obsevable.
01 var pessoa = {
02 nome: ko.observable(“Edson”),
03 sobrenome: ko.observable(“Dionisio”)
04 };Além do que apresentamos nesse código, que é uma forma simples de uso, podemos obter atualizações de status a partir de uma coleção de itens, nesse caso, o Knockout.js nos fornece um ObservableArray.
Ele é útil em situações nas quais estamos exibindo ou editando vários valores e precisamos de seções repetidas de UI para aparecer e desaparecer à medida que os itens forem adicionados e removidos. A sintaxe de um observableArray é apresentada na Listagem 2.
Listagem 2. Syntaxe básica do observableArray.
01 var testeObservableArray = ko.observableArray(); // um array inicialmente vazio
02 testeObservableArray.push(‘Teste 1’); // Adicionando valores e notificaçõesUma observação importante a ser levantada aqui é que o armazenamento de objetos em um ObservableArray não realizará mudanças nos objetos armazenados para que tenham propriedades observáveis automaticamente, isso deve ser feito de forma explícita para suas propriedades observáveis também.
Uma vez que tivermos essas propriedades como observables, precisaremos trabalhar de maneira diferente no JavaScript, isso é decorrente da questão do suporte de cada navegador com relação aos getters e setters do JavaScript. Então, para que haja compatibilidade entre eles, o Knockout transforma suas propriedades em funções quando elas são observables.
Isto significa que, para definirmos o valor da variável nome para "Edson José", poderíamos chamar o observable com uma função, como está sendo apresentado abaixo:
aluno.nome( "Edson José" );
Ainda possuímos a ideia de computed observables (observáveis computados) no Knockout, onde podemos utilizar funções que são dependentes umas das outras, realizando a atualização das informações automaticamente sempre que houver uma mudança nas suas dependências. Como seria o caso de apresentarmos o nome completo (Listagem 3).
Listagem 3. Utilizando computed observables pra uma função de NomeCompleto.
01 function NomeCompleto() {
02 this.nome = ko.observable(‘Edson’);
03 this.sobrenome = ko.observable(‘Dionisio’);
04 this.nomeCompleto = ko.computed(function() {
05 return this.nome() + " " + this.sobrenome();
06 }, this);
07 } Data Bindings
A utilização dos data bindings (que são os dados de vinculação) nos oferece uma maneira concisa e poderosa para conectarmos os dados com a UI. Em geral, é fácil e óbvio vincularmos as propriedades dos dados simples ou mesmo para usarmos uma única ligação, no entanto, para realizarmos “ligações” mais complexas, devemos entender como se dá a sintaxe do binding.
No todo, a sua sintaxe consiste em dois itens, que são o “name” e o “value”, separados por “:” (dois pontos), como apresentado abaixo, onde vemos o retorno de nossa função criada no exemplo anterior sendo exibido em um elemento HTML:
Meu nome é: <span data-bind="text: nomeCompleto"></span>
Em caso de termos uma interface ágil e também responsiva, os valores de ligação (binding values) a elementos HTML não serão suficientes. Neste caso, também precisaremos obter uma forma de vincular os comportamentos aos elementos da interface do cliente.
Com base nisso, o Knockout também possui os bindings que respondem a eventos de interface do usuário. A diferença entre essas ligações e as ligações de exibição é devido ao fato dos eventos de ligações estarem vinculados a funções do JavaScript, ao invés de serem vinculados nas propriedades observáveis.
A l ...
