Apresentação sobre MVVMC

1.362 visualizações

Publicada em

Apresentação sobre MVVMC

Publicada em: Tecnologia, Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.362
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentação sobre MVVMC

  1. 1. Dissecando Javascript para Aplicações de Internet Rica(RIA)
  2. 2. O que se espera de RIA? - Interação - Velocidade - Workflow fluído - O que há de melhor em aplicações desktop
  3. 3. Atualmente, existem duas opções para RIA: • Desenvolver o comportamento em uma tecnologia nativa(Javascript) • Desenvolver o comportamento em uma tecnologia externa(Flash, Silverlight, JavaFX, etc)
  4. 4. RIA = Spaghetti? Senso comum sobre Javascript: •Limitada •Desorganizada •Difícil de testar •Incompatível entre browsers diferentes
  5. 5. Derrubando o mito Orientação a Objetos(numa linguagem Orientada a Protótipos): // objeto estático var LATIDOS = { "pastor alemão": "AUFF!", "pincher": "AU!" } // classe pai var Animal = function() {}; // classe filha var Cachorro = function(raca) { this.raca = raca; // Atributo this.latir = function() { console.log(LATIDOS[raca]); }; // método }; Cachorro.prototype = new Animal(); //Herança var fido = new Cachorro("pastor alemão"); fido.latir(); //imprime "AUFF!"
  6. 6. Organização -Cada classe pode residir num arquivo separado, basta criar um padrão para a hierarquia de pastas(ex.: /models,/helpers,/lib,etc) - Em produção, devido a uma limitação da web, browsers podem requisitar de 1 a 4 arquivos no máximo por conexão. - Solução: Em produção, juntar todos os arquivos em um só, se houver necessidade. lib/jquery.js helpers/validations.js models/animal.js models/cachorro.js application.js
  7. 7. Documentação - Desenvolvedores detestam escrever ”manual do sistema” - Mal necessário? - Comentários de código são suficientes - Padrão JAVADOC - JSDoc-toolkit
  8. 8. JAVADOC /** * Classe que segue o design pattern IdentityMap, útil para guardar um cache local de objetos. * @name IdentityMap * @class */ var IdentityMap = function() { function I() {}; I.prototype = new Array(); /** * Comparação entre objetos pelo valor. * @name IdentityMap#find * @param id Um id único para o objeto da request * @param params Objeto contendo os parâmetros da request * @function */ I.prototype.find = function(id,params) { return $.grep(this,function(d) { return d.id === id && ko.utils.stringifyJson(d.params) === ko.utils.stringifyJson(params); })[0]; }; return new I(); };
  9. 9. Como testar Javascript - Desde que haja uma separação clara do comportamento da página e dos elementos da página, testes unitários são uma excelente opção. Conheça a biblioteca qUnit: test("Este teste deve ser positivo", function() { ok(true, "Teste ok"); }); test("Este teste deve quebrar", function() { ok(false, "Teste quebrado"); });
  10. 10. Incompatibilidades -A especificação do Javascript(e do HTML e CSS) é regida pelo W3C, mas cada browser implementa diferente. -Como resolver os conflitos? - jQuery salva o dia!
  11. 11. jQuery = Simplicidade + Elegância - Simplifica o acesso ao DOM - Minimiza conflitos entre browsers diferentes
  12. 12. JS puro x jQuery O que você prefere? JS - document.getElementById("example") ou jQuery - $(“#example”) JS – var d = document.getElementById("example"); d.setAttribute('type', 'text'); d.setAttribute('name','maildrop[]'); d.setAttribute('autocomplete','off'); Ou jQuery - $(“#example”).text(“type”).attr(“name”,”maildrop[]”).attr(“autocomplete”,”off”); Ou ainda jQuery - $(“#example”).attr({text:’type’,name:’maildrop[]’,autocomplete:’off’});
  13. 13. Por que jQuery? -Velocidade de prototipagem - Compatibilidade - Padronização - Melhores práticas
  14. 14. Então você passa a usar jQuery... ...e descobre que: -As alterações manuais de conteúdo continuam - Continua difícil mapear as dependências de alterações - $() pra todo lado
  15. 15. Case real Fale Conosco UMC Aluno - Com jQuery(+- 330 linhas) - Manutenção HELL
  16. 16. Por que tantas linhas? -Ocultação manual de conteúdo - Revelação manual de conteúdo - Adição manual de conteúdo - Subtração manual de conteúdo
  17. 17. O que outros fazem? Existem dois tipos de framework web: - Os que mantém o estado(stateful) Ex.: JSF, Wicket, etc. - Os que não mantém o estado(stateless) Ex.: Struts, Play!, VRaptor, etc. Ambos com vantagens e desvantagens para alcançar o mesmo objetivo.
  18. 18. Caminhando no meio Solução híbrida: MVVMC(Modelo-View-View Model-Controller) - Isola-se totalmente a View de seu comportamento(View Model) - O comportamento torna-se facilmente testável - O Controller emagrece em responsabilidades
  19. 19. Buscando o dream team da web - Lingua franca da web(HTML/CSS/JS) - Formatos padrões de dados na web(XML/JSON) - Comunicação padrão com o servidor(AJAX) - Se os padrões forem respeitados, tanto faz o backend
  20. 20. Conheça Knockout.js - Biblioteca javascript para MVVMC - Atualização automática de elementos vinculados a variáveis - Busca automática de dependências
  21. 21. Exemplo de uso Código HTML: <p>Nome: <input data-bind="value: nome" /></p> <p>Sobrenome: <input data-bind="value: sobrenome" /></p> <h2>Oi, <span data-bind="text: nomeCompleto"> </span>!</h2> Código JS: var viewModel = { nome : ko.observable(“Hello"), sobrenome : ko.observable(“World") }; viewModel.nomeCompleto = ko.dependentObservable(function () { return viewModel.nome() + " " + viewModel.sobrenome(); }); ko.applyBindings(viewModel);
  22. 22. Case real Fale Conosco UMC Externo - Com jQuery e Knockout(- de 200 linhas) - Fácil manutenção, dependências rastreadas automaticamente, fácil de testar.
  23. 23. Separação de Responsabilidades - O que o MVVMC conseguiu: - Emagrecer o Controller. Agora ele autoriza e observa o Modelo. - Permite utilizar a camada de persistência que você achar melhor, sem se preocupar com problemas em outras partes do sistema. - Permite utilizar a linguagem que você achar melhor, sem se preocupar com problemas em outras partes do sistema.
  24. 24. Fluxo VIEW VIEW MODEL MODEL CONTROLLER JSON Camada de Persistência que você preferir HTML/CSS JS Gerenciador de Sessão que você preferir
  25. 25. Resumo da ópera -O comportamento do sistema está no lado cliente(View + View Model), onde a interação ocorre(HTML/CSS/JS(jQuery + Knockout). - O Modelo contém as regras de negócio. - O Controller autoriza interações e observa o Modelo. FIM
  26. 26. Bibliografia RIA: http://pt.wikipedia.org/wiki/Internet_rica Javascript: https://developer.mozilla.org/en/JavaScript/Guide jQuery: http://www.jquery.com Knockout: http://www.knockoutjs.com MVVM: http://en.wikipedia.org/wiki/Model_View_ViewModel JSON: http://www.json.org/ Jsdoc-toolkit: http://code.google.com/p/jsdoc-toolkit/

×