1. CEJS 0.0.2
Mudando de renderização client-side para server-side: uma experiência

2. QUEM SOU EU?
• Hamon Vitorino
• Desenvolvedor na Fortes desde 2010
• Trabalho há 9 anos com tecnologias .Net

3. WEB FORMS X MVC
• Testabilidade
• Manutenibilidade
• Customização

4. JQUERYUI
• Bom poder de customização
• Domínio sobre (quase todo) o HTML exibido
• Componentes client-side prontos: calendário, popup, validação de formulários...
• Boa disponibilidade de componentes de terceiros
• Documentação razoável e uma comunidade muito grande

5. MASSSSSS...
• Como fazer disso tudo uma app homogênea visualmente e em termos de usabilidade?
• Cadê a grid paginada, com filtro assíncrono no cliente ou no servidor, flutuante, com
ordenação por múltiplas células, que podem ser escolhidas, movidas, removidas ou
adicionadas?

6. EXTJS3 (SEUS PROBLEMAS ACABARAM!)
• Componentes client-side em javascript
• Reuso de código
• Visual muito elegante
• Possui a marioria dos componentes necessários
• Documentação muito boa

7. MASSSSSS...
• Não tem boa convivência com outras bibliotecas
• Enorme quantidade de código (~5k de C# para ~22k de js)
• Quase nenhum domínio sobre o HTML e o CSS
• Dificuldade de customizar devido ao ciclo de vida obscuro dos componentes
• Gerenciamento de layout próprio
• Pesado no browser (FF chegou a consumir 1,5GB)
• O HTML gerado é muito denso, dificultando testes de aceitação
• Excessivamente parecido com o Desktop

8. EXTJS4
• Todos os componentes da versão anterior mais um framework mvc (parecido com o
backbone)
• Permite a criação e gerenciamento de módulos e quando devem ser carregados
• Componentização melhorada, pois o ciclo de vida ficou menos obscuro

9. MASSSSSS...
• Todos os defeitos da versão anterior, exceto pela componentização e modularização
• Modularização baseada em strings, impedindo a IDE (VS2010) de gerar intellisense (faz
muita falta)
• A baixa capacidade de customização foi decisiva aqui, além da aparência de Desktop

10. SAMMYJS + MUSTACHE
• Total controle sobre o HTML (enfim!)
• Boa (e necessária) convivência com outra bibliotecas
• Liberdade de escolha da sua biblioteca de templates (mustache)

11. MASSSSSS...
• Necessidade de manter dois sistemas de rotas (cliente e servidor)
• Dificuldade de criar/reusar componentes usando somente uma biblioteca de templates
client-side
• Baixa manutenibilidade

12. HELPERS SERVER-SIDE + KNOCKOUTJS
• Componentes (templates/partial views) tipados e configuráveis, escritos no server-side
usando Razor
• Helpers (C#) que renderizam os componentes
• Aparência e comportamento homogêneos e definidos pela equipe
• Comportamentos dinâmicos nas máginas ficaram mais fáceis com a implementação de
MVVM do KO e seus bindings
• Menos código javascript
• Boa convivência com outras bibliotecas
• Layout gerenciado pelo browser (#win)

13. COMO TODOS OS OUTROS, TAMBÉM TEM UM
MASSSSSS...
• Todo o código é de nossa responsabilidade e isso implica em manutenção evolutiva e
corretiva

14. LINKS
• jqueryui.com
• jquery.com
• sammyjs.org
• mustache.github.com
• knockoutjs.com

15. CONTATOS
• @hvitorino
• github.com/hvitorino
• hamon.vitorino@gmail.com