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.

1. Logic-free Markup for a team of drunk developers
2. http://vidadeprogramador.com.br/2012/07/23/botao-para-cancelar/ visto em 25/05/2013
5. Nossos ultimos 10 anos na web... AJAXLESS => AJAXFUL
6. 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
7. 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
8. Mas nem tudo são flores... A longo prazo...
9. Ainda se faz muitas regras no server
10. Nossa camada de controle cresce
11. ... um bom aliado ao MVC AJAX
12. 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
13. 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
14. Se não tivermos um modelo de desenvolvimento de software bem definido, alguns problemas podem voltar a aparecer
15. 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
16. AJAXLESS Approaches • HTML Estático • CGI's • *[HS]P: JSP, PSP, GSP, ASP, PHP • Servlets • Play Framework Templates
17. 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
18. ...
19. Imagine este software na Cloud...
20. Acessado por muita gente...
21. Muita gente...
22. ...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 )
23. ... vamos focar no Logic-free Markup Logic-free Markup + OOP Como paradigma de desenvolvimento
24. 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
25. 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 )
26. 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.
27. 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 )
28. 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
29. 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
30. Achou complexo?
31. 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
32. 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
33. 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.
34. 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
35. Dados manipuláveis Sofrerão alteração ( de estado ou conteúdo) conforme o usuário vai utilizando uma determinada visão.
36. 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.
37. 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
38. 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
39. 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
40. 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
41. 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 )
42. 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
43. Alguns Exemplos...
44. Te vejo no Bar! Fiquem com Deus Autor: Miere Liniel Teixeira Contatos: miere.teixeira@gmail.com miere@contaazul.com skype: miere.teixeira http://github.com/miere 47 992156