E aí, o que acha de aprender a trabalhar com Knockout JS? É dev Magento 2, mas não gosta de Knockout? Acha muito difícil e estranho? Sei como é isso! Don’t worry my friend!!! Vamos lançar uma série de diversos artigos apenas falando sobre Knockout e ensinando a trabalhar com ele!
Então, partiu aprender Knockout JS?!
Knockout é uma biblioteca JavaScript que lhe ajuda a criar UI dinâmicas, ricas e responsivas. Sempre que houver seções de UI atualizadas dinamicamente (por exemplo, alterações dependendo das ações do usuário ou quando uma fonte de dados externa for alterada), o KO poderá ajudar a implementá-la de forma mais simples e sustentável.
Recursos chaves:
- Elegant dependency tracking: Automaticamente atualiza as partes corretas de sua UI sempre que seu data model é alterado;
- Declarative bindings: Uma forma simples e óbvia de conectar partes de sua UI ao seu data model. Você pode construir UIs dinâmicas complexas facilmente usando nested binding contexts;
- Trivially extensible: Implemente comportamentos customizados como bindings declarativas para o fácil reuso em apenas algumas linhas.
Benefícios Adicionais:
- Biblioteca JavaScript pura: funciona com qualquer tecnologia client side e server side;
- Pode ser adicionado em cima de sua aplicação web existente sem necessidade de mudanças arquiteturais;
- Compacto: por volta de 13kb depois de gzipping;
- Funciona em qualquer navegador convencional;
- Conjunto abrangente de especificações (desenvolvida estilo BDD): significa que sua funcionalidade correta pode ser verificada em novos browsers e plataforma.
Desenvolvedores familiarizados com Ruby on Rails. ASP.NET MVC, ou outras tecnologias MV* pode ver MVVM como um form em tempo real do MVC com sintaxes declarativas. Em um outro sentido, você pode pensar no KO como uma forma geral de criar UIs para editar dados JSON… O que funcionar para você 🙂
Como usar?
Neste blog lançaremos uma série de tutoriais ensinando a trabalhar com Knockout Js e a implementá-lo em seus projetos, com total foco em Magento 2. Você também já pode consultar a documentação os tutorias e exemplos no site oficial do Knockout.
KO pretende competir com jQuery (ou Prototype, etc.) ou trabalhar com ele?
Todo mundo ama jQuery! É um ótimo substituto para a API DOM inconsistente que tínhamos que lidar no passado. jQuery é uma excelente forma de baixo nível para manipular elementos e eventos em uma página. KO soluciona um problema diferente.
Assim que sua UI deixar de ser importante e houver apenas alguns comportamentos que sobrepõe, as coisas começam a se tornar complicadas e caras de se manter se você usa apenas jQuery. Considere este exemplo: você está exibindo uma lista de itens, indicando o número de itens nesta lista, e quer habilitar um botão Adicionar apenas quando tiver menos que 5 itens. jQuery não tem conceito de data model subjacente, então para conseguir o número de itens você tem que deduzir pelo número de TRs em uma tabela ou número de DIVs com uma certa class CSS. Talvez o número de itens é exibido em algum SPAN, e você tem que lembrar de alterar o texto daquele SPAN quando o usuário adiciona um item. Você também deve lembrar de desabilitar o botão Adicionar quando o número de TRs for 5. Depois, você tem que implementar um botão Deletar, e descobrir qual elemento DOM alterar quando clicado.
Como Knockout é diferente?
É muito fácil com KO. Ele lhe permite escalar em complexidade sem medo de introduzir inconsistências. Apenas represente seus itens como array, e então use o binding foreach para transformar esse array em uma TABLE ou conjunto de DIVs. Quando o array é alterado, a UI muda para corresponder (não é necessário entender como injetar novos TRs ou onde injetá-los). O resto da UI permanece em sincronismo. Por exemplo, você pode ligar um SPAN para mostrar o número de itens:
There are <span data-bind="text: myItems().length"></span> items
É isso! Você não precisa escrever código para o atualizar. Ele se atualiza quando o array myItems é alterado. Similarmente, para fazer o botão Adicionar habilitar e desabilitar dependendo do número de itens, apenas escreva:
<button data-bind="enable: myItems().length < 5">Add</button>
Depois, quando implementar a funcionalidade Deletar, você não precisa entender quais partes da UI ele tem que interagir.
Para resumir: KO não compete com jQuery ou APIs DOM de nível baixo similares. KO oferece uma maneira complementar, de alto nível para conectar o data model à UI. KO por si só não depende do jQuery, mas você pode, com certeza, usar jQuery junto, e certamente é útil se quiser coisas como transições animadas.