View com Framework Javascript

Front-end
#1

Eu li o Blog do Milfont, onde é aprensetado seguinte modelo: http://www.milfont.org/tech/2008/09/08/mvc-model-3-e-camadas/

Gosto muito da idéia. E gostaria de começar a aplicá-lo.

Lendo ele, tive algumas dúvidas:

1 - Utilizando Template JS, quando há necessidade de realizar uma espécie de ou <c:forEach>, como faz?
2 - Os objetos Java, por exemplo, será “linkado” para view, sempre através de JSON, ou um tipo DWR?
3 - Creio que nesse modelo, precisaremos escrever bastante JS. Isso pode dificultar a manutenção, ou pesar demais o cliente (nesse caso penso que não…mas).
4 - É possível criar aplicações de grande porte com este modelo?
5 - Existe alguma restrição ou coisa que este modelo não faz e que o tradicional (mvc 2) faz?

Grato!

#2

[quote=Lucas Emanuel]Eu li o Blog do Milfont, onde é aprensetado seguinte modelo: http://www.milfont.org/tech/2008/09/08/mvc-model-3-e-camadas/

Gosto muito da idéia. E gostaria de começar a aplicá-lo.

Lendo ele, tive algumas dúvidas:

1 - Utilizando Template JS, quando há necessidade de realizar uma espécie de ou <c:forEach>, como faz?
2 - Os objetos Java, por exemplo, será “linkado” para view, sempre através de JSON, ou um tipo DWR?
3 - Creio que nesse modelo, precisaremos escrever bastante JS. Isso pode dificultar a manutenção, ou pesar demais o cliente (nesse caso penso que não…mas).
4 - É possível criar aplicações de grande porte com este modelo?
5 - Existe alguma restrição ou coisa que este modelo não faz e que o tradicional (mvc 2) faz?

Grato!
[/quote]

1 - Utilizando Template JS, quando há necessidade de realizar uma espécie de <include> ou <c:forEach>, como faz?

Algumas engines de template possuem fluxos e condicionais, outras são mais simples. Olha o mustache https://github.com/janl/mustache.js/ é bem simples usando só {{#foo}} {{bob}} {{/foo}}, o Ext usa uma tag , cada qual tem sua sintaxe, mas em regra a sintxe é simples.

2 - Os objetos Java, por exemplo, será "linkado" para view, sempre através de JSON, ou um tipo DWR?

O ideal é fazer a troca de dados via json usando uma arquitetura mais restful possível para esse modelo, em java o DWR facilita essa troca porque ele faz um bom parser e encapsula isso. Voce acessa suas classes java direto no js de forma transparente. Devo salientar que o DWR é um projeto antigo e já há algum tempo sem evolução, eu prefiro uma arquitetura restful.

3 - Creio que nesse modelo, precisaremos escrever bastante JS. Isso pode dificultar  a manutenção, ou pesar demais o cliente (nesse caso penso que não..mas).

Com certeza vai escrever muito mais js do que de outros modelos, mas os frameworks js estão aí para facilitar o trabalho, jQuery para encapsular o DOM, Extjs ou YUI para fornecer componentes visuais, etc…
O importante é aprender js de verdade, como é a OO da linguagem, entender o comportamento funcional, etc. Recomendo os livros do Nicholas Zakas.
Alguns livros são ótimos sobre essa questão de pesar no cliente [com certeza existem más e boas praticas] recomendo o High Performance Javascript [do Zakas], dei a dica dos livros de js que recomendo http://www.milfont.org/tech/2010/10/25/recomendacao-de-livros-sobre-javascript/

4 - É possível criar aplicações de grande porte com este modelo?

Tenho alguns cases de grandes apps, inclusive ERP nesse modelo, acredito até que a tendencia para todas as webapps é view na camada física do cliente. Twitter está aí e o Gmail há anos para provar o que digo.

5 - Você encontrou alguma restrição ou coisa que este modelo não faz e que o tradicional (mvc 2) faz?

Restrição maior é entender o paradigma de separar a renderização da view, aprender como é o OO prototype-based do js, entender closures, etc… o resto faz igual, senão melhor.

#3

Lucas, aqui vai um exemplo seguindo essa linha https://gist.github.com/861452

Montei esse código para consumir a API do Call4Paperz linkando as submissões http://call4paperz.com/events/13 para nossa página no evento http://braziljs.com.br/2011/#!/agenda

Código pequeno mas dá para se ter uma idéia, usamos Sammy.js com Mustache e jquery.

#4

Cara, muito bacana. Valeu pelas respostas.

Nesse caso, o que voce indicaria para utilizar como controlador que ficara no Servidor? Tem como utilizar o VRaptor? Servlet puro? ou outros frameworks? Ou voce implementou seu próprio controler em Java?

Grato!

#5

[quote=Lucas Emanuel]Cara, muito bacana. Valeu pelas respostas.

Nesse caso, o que voce indicaria para utilizar como controlador que ficara no Servidor? Tem como utilizar o VRaptor? Servlet puro? ou outros frameworks? Ou voce implementou seu próprio controler em Java?

Grato![/quote]

Em Java eu recomendo o VRaptor, se procurar aqui mesmo no forum vai encontrar muita referencia sobre VRaptor + Rest, JSON, etc…

#6

Comecei adotar este modelo e os Templates JS, mais especificamente o Mustache.js, já que gostei bastante.

No entanto, existem algumas coisas que ainda me encomoda.

Por exemplo, com Mustache, quando vou gerar uma table com os dados via JSON por exemplo, tenho que fazer:

1 - Escrever template HTML dentro de String JS? Isso sangra os olhos. (lembra o velho servlet com write). Não há como colocar o {{dado}} direto no HTML como se fosse EL do JSP?
2 - Ele renderiza a Página primeiro (html/css) e depois gera os dados? (Se fosse gerado no servidor os dados viriam formados) = Impacto no desempenho?

Estou querendo adotar esse modle em futuros projetos, com Vraptor ou Rails, mas acredito que esses dois pontos são fundamentais para adoção.

#7

[quote=Lucas Emanuel]Comecei adotar este modelo e os Templates JS, mais especificamente o Mustache.js, já que gostei bastante.

No entanto, existem algumas coisas que ainda me encomoda.

Por exemplo, com Mustache, quando vou gerar uma table com os dados via JSON por exemplo, tenho que fazer:

1 - Escrever template HTML dentro de String JS? Isso sangra os olhos. (lembra o velho servlet com write). Não há como colocar o {{dado}} direto no HTML como se fosse EL do JSP?
2 - Ele renderiza a Página primeiro (html/css) e depois gera os dados? (Se fosse gerado no servidor os dados viriam formados) = Impacto no desempenho?

Estou querendo adotar esse modle em futuros projetos, com Vraptor ou Rails, mas acredito que esses dois pontos são fundamentais para adoção.
[/quote]

Na verdade usar um template é o contrario do item 1, voce deve escrever marcações dentro de um html que vai servir como template, usando o Mustache especificamente voce vai montar a table dessa forma [ o exemplo é com lista mas a ideia a mesma] http://mustache.github.com/#demo

Não entendi o item 2

#8

[quote=cmilfont][quote=Lucas Emanuel]Comecei adotar este modelo e os Templates JS, mais especificamente o Mustache.js, já que gostei bastante.

No entanto, existem algumas coisas que ainda me encomoda.

Por exemplo, com Mustache, quando vou gerar uma table com os dados via JSON por exemplo, tenho que fazer:

1 - Escrever template HTML dentro de String JS? Isso sangra os olhos. (lembra o velho servlet com write). Não há como colocar o {{dado}} direto no HTML como se fosse EL do JSP?
2 - Ele renderiza a Página primeiro (html/css) e depois gera os dados? (Se fosse gerado no servidor os dados viriam formados) = Impacto no desempenho?

Estou querendo adotar esse modle em futuros projetos, com Vraptor ou Rails, mas acredito que esses dois pontos são fundamentais para adoção.
[/quote]

Na verdade usar um template é o contrario do item 1, voce deve escrever marcações dentro de um html que vai servir como template, usando o Mustache especificamente voce vai montar a table dessa forma [ o exemplo é com lista mas a ideia a mesma] http://mustache.github.com/#demo

Não entendi o item 2[/quote]

Legal.

Quanto ao Item 2, quis dizer o seguinte:

Por exemplo, quando voce desenvolve uma página muito dinâmica, contendo dados dinâmicos, feito em JSP por exemplo, o servidor já envia o html com os dados dinamicos já montados, e o papel do cliente é somente estruturar a página e aplicar estilização em CSS (e alguns JSs).

Com abordagem do template JS, as “montagem” de dados ocorre no cliente (ou não?), juntamente com estilização. Isso pode provocar um retardo (talvez não notável aos nossos olhos), ou causar uma espécie de FOUC?

#9

repeti a msg sem querer

#10

[quote=Lucas Emanuel][quote=cmilfont][quote=Lucas Emanuel]Comecei adotar este modelo e os Templates JS, mais especificamente o Mustache.js, já que gostei bastante.

No entanto, existem algumas coisas que ainda me encomoda.

Por exemplo, com Mustache, quando vou gerar uma table com os dados via JSON por exemplo, tenho que fazer:

1 - Escrever template HTML dentro de String JS? Isso sangra os olhos. (lembra o velho servlet com write). Não há como colocar o {{dado}} direto no HTML como se fosse EL do JSP?
2 - Ele renderiza a Página primeiro (html/css) e depois gera os dados? (Se fosse gerado no servidor os dados viriam formados) = Impacto no desempenho?

Estou querendo adotar esse modle em futuros projetos, com Vraptor ou Rails, mas acredito que esses dois pontos são fundamentais para adoção.
[/quote]

Na verdade usar um template é o contrario do item 1, voce deve escrever marcações dentro de um html que vai servir como template, usando o Mustache especificamente voce vai montar a table dessa forma [ o exemplo é com lista mas a ideia a mesma] http://mustache.github.com/#demo

Não entendi o item 2[/quote]

Legal.

Quanto ao Item 2, quis dizer o seguinte:

Por exemplo, quando voce desenvolve uma página muito dinâmica, contendo dados dinâmicos, feito em JSP por exemplo, o servidor já envia o html com os dados dinamicos já montados, e o papel do cliente é somente estruturar a página e aplicar estilização em CSS (e alguns JSs).

Com abordagem do template JS, as “montagem” de dados ocorre no cliente (ou não?), juntamente com estilização. Isso pode provocar um retardo (talvez não notável aos nossos olhos), ou causar uma espécie de FOUC?[/quote]

Bem, a estuturação pode ocorrer nos dois lados, entenda que a abordagem de apresentação totalmente no lado cliente não impede que o tradicional ocorra.
Claro que dependendo da situação pode ocorrer duplicidade no esforço, mas por exemplo: usando erb como template voce pode se beneficiar do ejs e manter uma unica estrutura e renderizar de acordo com a necessidade [caso o navegador esteja com js desabilitado ou nao suporte js].

De qualquer forma respondendo diretamente a sua pergunta, esses “JSPs” serão montados no lado cliente e pode ocorrer sim um delay perceptivel, tudo vai ocorrer na estrategia que voce adotar. Eu recomendaria inclusive voce testar outras soluções de template e em modelos de estratégia de MVC com js.

Comparativo bacana sobre template engines http://jsperf.com/dom-vs-innerhtml-based-templating/56

#11

Bom, só para dar feedback aos que se interessam.

Estou desenvolvendo um projeto neste modelo e estou tendo boas experiências. Estou usando VRaptor. Adotei uma arquitetura Restful. Está sendo ótimo. RoR seria ótima alternativa também.

Por View ser independente do Servidor, tenho flexibilidade em mudar a tecnologia servidor sem precisar alterar View em nada. Tenho total controle da View. Estou usando bastante jQuery e requisições Ajax e JSON.

Acho que nunca mais vou querer usar JSF na minha vida.

Minha única preocupação é ainda com performance na renderização da View. Penso em fazer algumas comparaçoes e testes, assim que tiver alguma coisa, eu posto aqui.

Valeu Milfont!

#12

Acho bem interessante essa abordagem.

Porém me surgiu uma dúvida agora:

Como é feito o controle de sessão / autenticação com essa abordagem?

Porque no JSP podemos escolher entre Cookies, url-reqriting, entre outros.

E a própria página JSP faz todo o trabalho pra gente.

#13

[quote=andreiribas]Acho bem interessante essa abordagem.

Porém me surgiu uma dúvida agora:

Como é feito o controle de sessão / autenticação com essa abordagem?

Porque no JSP podemos escolher entre Cookies, url-reqriting, entre outros.

E a própria página JSP faz todo o trabalho pra gente.

[/quote]

Esse foi um dos pontos que tive dificuldade tambem. Mas se voce tiver usando uma arquitetura restful,dá para fazer assim, como estou fazendo, por exemplo com VRaptor (ou RoR):

Tenho um UsuarioController. Quando alguem loga, o usuario é setado na sessão.
Dentro desse controller tenho método para retornar o usuario em sessao, por esemplo com Path “/user”

Quando carrego a página, eu busco esse cara por jquery, posso fazer um getJSON nessa URI. Aí eu trago esse cara da sessao na página.

Para controlar autorização de uso, eu faço por Servlet 3 Filters.

#14