Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Logic-free Markup for a team of drunk developer...

Logic-free Markup for a team of drunk developers ( PT_BR )

Entenda como "Logic-Free Markup" pode ajudar o time a desenvolver web a separar a regra de negócio da camada de marcação, permitindo re-uso e teste destas lógicas, a componentização do front-end e ainda ter tempo para tomar uma boa cerveja depois do expediente.

Miere Liniel Teixeira

May 27, 2013
Tweet

More Decks by Miere Liniel Teixeira

Other Decks in Programming

Transcript

  1. AJAXLESS • 100% do processamento da página ocorria no SERVER

    • as regras de negócio acabavam se MISTURANDO ao código HTML • tinha-se a falsa sensação de velocidade no desenvolvimento • manutenção trabalhosa do código fonte • usuário via a tela pronta ao clicar no link • mas podia dar a sensação de que o site é lento se a rotina for mal escrita
  2. Ahhhh... o MVC, o Salvador • Otima proposta para segmentaçao

    do código • Visa separar a regra de negócio da regra de interface ( HTML ) • Gigante oferta de frameworks • Torna possível testar unitariamente as nossas regras de negócio • O código começa a ficar mais limpo • Mais fácil de se manutenir • O usuário tem a tela pronta ao clicar
  3. AJAX + MVC • Telas c/ menos tempo em carga

    no servidor • Tela carrega parcialmente • Populada assincronamente • Melhora a experiência com o usuário final • A camada de controle (no servidor) começa a diminuir • Passa a utilizar melhor o poder computacional do client
  4. AJAX + MVC • A camada de controle (no client)

    começa a aumentar • Fica mais complexa • Requer conhecimento de mais uma linguagem de programação ( JavaScript ) • Diferença de paradigma: server linguagem sincrona vs javascript ser assincrono
  5. Se não tivermos um modelo de desenvolvimento de software bem

    definido, alguns problemas podem voltar a aparecer
  6. AJAX + MVC • A tela não fica pronta ao

    abrir o site • Excesso de AJAX pode dar a impressão de que a página está se montando aos poucos • Excesso de eventos pode dificultar manutenibilidade do software • As regras de tela no JavaScript podem se tornar tão complexas que somente quem criou o código consegue entendê-lo
  7. AJAXLESS Approaches • HTML Estático • CGI's • *[HS]P: JSP,

    PSP, GSP, ASP, PHP • Servlets • Play Framework Templates
  8. AJAX + MVC approaches • REST APIs: JAXRS, Play Framework

    • AJAX Js Libs: jQuery, MooTools, Dijit, etc. • JSF, CWT, Wicket, GWT, Vaadin • Rails, Grails • Spray.io • jQuery Templates, DustyJS, etc
  9. ...

  10. ...com os seguintes requisitos: • Continuous Delivery: 2 a 3

    deploys por dia • Design atrativo: acabamento dado ao sistema deve ser impecável • Fácil de usar • Resposta rápida ao comandos do usuário • Baixo nível de BUGs ( se possível zero )
  11. Logic-free Markup • Foca em isolar completamente o código de

    lógicas de negócio • Marcação HTML livre de lógica ( Pô, tradução literal, Miere? ) • Permite que Designers e bons diagramadores deem manutenção no software. • Ajuda na manutenibilidade do código • Com códigos bem isolados, fica mais fácil de aplicar teste unitários
  12. Logic-free Markup • Permite se aproveitar melhor o recurso computacional

    do navegador do cliente • Não precisa mais manter estado • Divide-se melhor as regras de interface • É possível até incluir testes unitários na interface ( em JS )
  13. O mito da linguagem de programação É possível se aplicar

    esta técnica com qualquer linguagem de programação ou ferramenta que devolva um (X)HTML sem que te obrigue a misturar lógica com o template.
  14. Porém... • É uma técnica: só se aprende com muito

    treino e dedicação • Requer mudanças no jeito de programar e pensar o software • Requer conhecimento protocolo HTTP ( além do 404 ) • Demora a virar cultura entre os desenvolvedores • Requer a escolha de ferramentas que ajude a manter esta técnica viva • Treino, Treino, Treino ( Coding Dojo/Kata )
  15. Ferramentas necessárias • API Rest para obter os dados •

    API para roteamento de HTML • Boa API para servir de base pra desenvolvimento JavaScript • Ferramentas para módulos em JS • Navegação via Hash • HTML Form binding
  16. Cenário testado • REST: JAXRS • Layr - para roteamento

    de HTML • jQuery como API base pra JavaScript • RequireJS para módulos JS • HashJS ( customizado ) para HashNavigation • Custom form binder¹ ¹ https://gist.github.com/miere/5651578#file-sample-js
  17. Conceitos por trás do Free-logic Markup • Criando visões no

    sistema • Dados Manipuláveis/Não manipuláveis • Contexto de exibição/Estados de exibição • RESTFul WebServices • Cached Data • Roteamento baseado em negócio • Roteamento hieráquico ( ou natural ) • Pre-rendering no Server Side • Pre-rendering no Client Side
  18. Visões do Sistema • É a forma como os dados

    são transformados em informação para o usuário • Cada visão transmite uma informação • Um dado pode possuir mais de uma informação • Dado: Movimentação Bancária • Informação: Extrato, Saldo, Contas à Pagar, Contas à Receber, transferências
  19. Dados não manipuláveis Não sofrerão alteração ( de estado ou

    conteúdo) por parte do usuário enquanto ele estiver numa determinada visão.
  20. Contexto de Exibição/Existência • Dado usado para exibir ou não

    informação na tela. • Para um determinado usuario, numa determinada visão, esta informação nunca mais vai mudar a menos que uma ação em outra parte do sistema mude. • Ex: Esconder parte do template ( no server ) para um usuário que não é premium
  21. Dados manipuláveis Sofrerão alteração ( de estado ou conteúdo) conforme

    o usuário vai utilizando uma determinada visão.
  22. Estado de Exibição/Existência • Dado usado para exibir ou não

    informação na tela. • Conforme usuário manipula uma parte da tela, um dado pode ser exibido ou não. • Ex: Ao selecionar uma opção num radiobox, parte dos campos ficam desabilitados.
  23. RESTFul WebServices • Fonte de dados ( DML ) •

    Explorar o protocolo HTTP para efetuar o CRUD • Usar filtros para efetuar buscas • Usar métodos HTTP corretamente • Devolver códigos HTTP de maneira semantica
  24. Cached Data • Dados com pouca atualização podem ser "cacheados"

    ( AMD Static Module, HTML 5 K/V Database, etc) • Usar WebSocket para sincronizar estes dados com pouco custo para o server • Usar as pontes REST para obter estes dados • Cachear resultados de calculo, relatórios e informações inferidas a partir dos dados da ponte REST
  25. Roteamento baseado em negócio • HTML que são devolvidos com

    intervenção do backend • O backend precisa efetuar uma tomada de decisão antes de devolver o HTML para o navegador • As tomadas de decisão são feitas na linguagem do backend, e não no template • Dados manipuláveis não são incluídos no template
  26. Roteamento hierárquico ( natural ) • HTML são devolvidos sem

    intervenção do backend ( exceto para tratamento cache ) • São dispostos fisicamente, na árvore de arquivos, da mesma forma com que são chamados do navegador • /user/list.php -> /var/www/user/list.php • /user/list/ -> src/main/webapp/user/list.xhtml • São úteis quando a visão requer muitos dados manipuláveis
  27. Pre-rendering ( server side ) • Quando o HTML é

    pre-processado antes de ser devolvido para o navegador • A intenção é preencher o HTML com dados não manipuláveis afim de melhorar a experiência do usuário • O usuário passa a ter a sensação de que a tela veio pronta do servidor ( ou mais completa )
  28. Pre-rendering ( client-side ) • O HTML vem sem intervenção

    do backend • As regras de transição de uma visão para outra dão a sensação de que a tela veio pronta do server • Usado quando existem muitos dados manipuláveis • A tela pode exibir um loading enquanto os dados são pre-processados • O uso de Cached Data faz com que a experiência do usuário melhore
  29. Te vejo no Bar! Fiquem com Deus Autor: Miere Liniel

    Teixeira Contatos: [email protected] [email protected] skype: miere.teixeira http://github.com/miere 47 992156