como desenvolver com um sistema com um front-end colossal?
TRANSCRIPT
https://cdn3.iconfinder.com/data/icons/picons-
social/57/03-twitter-256.png
Como desenvolver com um
sistema com um front-end
colossal?
Mozart Diniz
O que é um sistema
com um front-end
colossal?
Estamos falando de algo
entorno de:
68.202 Linhas de código
544 Arquivos JavaScript
4MB De arquivos minificados
Como se chega a
isso?
Dia 1
• Interface amigável e sofisticada
(nada de sistema web parecido
com Desktop)
A definição do layout das telas
deve ser armazenada no banco
Muitos maps
Server como serviço REST
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.png
Interface amigável e sofisticada(nada de sistema web parecido com
Desktop)
A definição do layout das telas
deve ser armazenada no banco
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.pngServerfront
Trate de gerar seus
próprios HTMLs
Bem, estamos em Janeiro de
2012, que framework eu deveria
escolher?
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.png
Backbone.js Angular.js knockout.js Ember.js
Ok, teremos que montar nosso HTML com
JavaScript, as views do Backbone.js podem
nos ajudar com isso!
Fornecia um sistema
de layout de grid para
o formulário e vários
componentes
bonitinhos ;)
Fornecia as abas, os
pickers, draggable,
sortable, tudo que
precisamos!
• Desenvolveu-se o framework
Monet para gerar e administrar
toda a interface.
• Para as telas mais simples de
cadastro criou-se um arquivo de
crud com o model, o collection e
os views do backbone.
• Para as outras uma arquivo pra
cada função.
• Para cada widget visual ou
fragmento componente do
formulário uma template do
backbone
• Para todos os outros problemas
JQUERY!
• Se precisarmos validar o formulário?
jQuery!
• Se precisarmos traduzir
os textos? Roda um jQuery nele ai!
• Eu preciso colocar umas coisas no
mapa. Que tal um jQuery?
Nada pode dar errado!
Dia 240
45 Arquivos para as telas de crud.
+ 27 Collections do backbone.
+ 32 Models do backbone.
+ 48 Arquivos de view.
+ todas as libs que utilizamos!
Mais de 180 arquivos de JavaScript
Demora uma vida pra
carregar!
Os templates se tornaram
uma praga!
193 templates diferentes
templates
Memory Leaks
Limite de CSS
Impossível de testar o sistema tornou-se frágil!
Dia 390
Módulos
Módulo
Módulos
Módulos
Evite o DOM
Antes
// esse código tem caráter meramente ilustrativo ;)
Evite o DOM
// esse código tem caráter meramente ilustrativo ;)
Agora
Isso é tão legal
Que nós fizemos vários :D
Precisamos otimizar
as coisas por aqui.
Mas antes, precisamos nos
separar do server!
ServerFront-end Monet.js
git submodulegit submodule
Java JS JS
• Minifica
• Ofusca
• Karma
• Deploy
E a qualidade?
Ok, o código está lindo,
mas ele funciona?
Teste unitário é ótimo,
mas não resolve tudo.
Automatiza os
testes de aceitação
Seus problemas acabaram!
#SQN
A memória continua crescendo
indefinidamente!
GC não limpa os nós que possuem
listeners.
Performance importa!
[{coord}, {coord}, {coord}]
• Calcula o ângulo
• Pinta a seta
• Adicionar os listeners
• Adiciona ao mapa
Mais de 2 mil vezes
A culpa deve ser do jQuery
Trocar pelo FOR nativo!
28x mais rápido.
Corta o suporte ao
IE9 e faz com
web workers!
Worker()
• Calcula o ângulo
• Pinta a seta
• Adicionar os
listeners
Adiciona ao
mapa, um
a um.
DOM não é thread safe
Reflows & Repaints a
cada coordenada
Desenhe seu próprio SVG
e só no fim, adicione ao mapa.
Mesmo minificado,
ofuscado e zipado o
sistema ainda demora
muito para carregar!
Requisições Ajax
Tiles de mapas
Arquivos de imagens
(layout)
50
36
40
Agora sim :D
Dúvidas?
Obrigado!
@mozartdiniz