K.O. – Javascriptality

Boas práticas, HTML, Javascript 1 Reply

Olá, tudo bom?

Sabe, eu mexo há muito tempo com site, sistema Web e essas parafernálias todas, porém sempre há coisas desagradáveis para fazer. Graças ao advento de frameworks bizonhos que vem acontecendo nos últimos tempos, a vida vai ficando mais fácil.

Apesar de eu ter outras paixões, vou falar um pouco de Knockout.js.

Bom, quem já criou um projeto em Microsoft MVC 4 com aqueles templates disponíveis, é possível reparar a biblioteca do KO “largada” lá na pasta scripts. Sabe como é né, eu estava lá, o arquivo também, não tínhamos muito o que fazer e eu estava meio carente de uns CRUDs e pensei: “por que não?”

O Knockout é um framework javascript MVVM (Model View View Model) que se baseia principalmente no conceito de atualização da view e no bind de valores. Fornece uma estrutura para template e ajuda na hora de trabalhar com formulários e transformações. Pense que o seu foco é ajudar na criação de aplicações web, mas, ao contrário de outras ferramentas mais monstruosas e complexas, o KO é de fácil utilização e encaixa bem na hora de brincar com coisas mais simples, sites ou até mesmo no apoio ao desenvolvimento com .NET (como foi meu caso).

Dentre as diversas funcionalidades, o KO trabalha com 3 que acho especialmente bacanas e é delas que vou escrever um pouco. E, não esquecendo, o que mais me atraiu foi a documentação, que é simples, direta e sem firulas, então, aproveite e dê uma olhada para conhecer também.

Two-way data binding

Essa facilidade é voltada para você fazer uma conexão entre propriedades do DOM e variáveis ou objetos. Através da função “ko.observable()”, ao alterar um valor, por exemplo em um input, automaticamente é atualizado na variável ou objeto. O acesso às variáveis, após o observable ser configurado, será feito através de função homônima, esse foi um detalhe que meio que me deixou estranho, mas com o tempo acostuma.

Binding Array e Event Function

Do mesmo jeito que dá para fazer o bind com uma propriedade, é possível fazê-lo com arrays. Isso fica legal para as clássicas listas e trabalhar com aplicações mais complexas, que carregam coisas do banco de dados e disponibilizam em uma tabela, lista ou qualquer coisa assim. Utilizando o bind de array, logo que haja uma modificação no seu conteúdo, o DOM pode sensibilizado. Para isto, utiliza-se também uma propriedade de bind bacana que é o “foreach”.

Só essa facilidade já é legal porém, para ter um pouco mais de tempero, a gente faz o bind também de um evento com uma função. (tudo isso sem jQuery). Através dos bindings de evento, alguns pré prontos e outros que você pode chamar via propriedade “event”, é possível fazer o equivalente ao $(…).on, mas configurando direto no HTML.

Vantagens

Certo, vendo a aplicação assim, pense que, se você estiver trabalhando com jquery e quiser mudar todo seu layout, há uma certa amarração entre o HTML e o código javascript. Esse tipo de vínculo acaba sendo separado ao fazer uso dos observables e dos binds de funções, já que a configuração é feita na sua view, enquanto o seu javascript só vai entender e procurar o que estiver configurado na página.

Outra coisa é a repetição. Ao invés de fazer um código 10 vezes, uma função bem feitinha pode ser útil e trabalhar independente, facilitando na manutenção.

Enfim, o KO tem uma documentação bacana, funcionalidades úteis, outras que nem abordamos aqui e até casa bem com outros frameworks, para fazer mais bruxarias.

Concluindo

A ideia de se utilizar uma ferramenta destas é facilitar a vida e tornar o código limpo. Fica muito mais fácil de codificar quando as coisas fluem. Pense que você tem uma aplicação complexa, uma alteração afetando outro lado da página, diversos bindings, 10 dias de texto com $ aqui $ ali. O knockout.js serve justamente para evitar retrabalho e tornar a aplicação sólida. Lembrando que:

Pra cada código que você faz, um coitado vai ter que dar manutenção e ler 10 vezes mais

Enfim, visite o site e brinque um pouco com o código. Tem tutoriais lá explicando passo a passo como utilizar algumas das principais funcionalidades e, como disse antes, o KO vem junto com alguns templates de aplicação MVC 4, então, não custa dar uma testada.

Até mais ^^.

One thought on “K.O. – Javascriptality

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *