como desenvolver com um sistema com um front-end colossal?
TRANSCRIPT
![Page 1: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/1.jpg)
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
![Page 2: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/2.jpg)
O que é um sistema
com um front-end
colossal?
![Page 3: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/3.jpg)
Estamos falando de algo
entorno de:
68.202 Linhas de código
544 Arquivos JavaScript
4MB De arquivos minificados
![Page 4: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/4.jpg)
Como se chega a
isso?
![Page 5: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/5.jpg)
Dia 1
![Page 6: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/6.jpg)
• 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
![Page 7: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/7.jpg)
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.png
Interface amigável e sofisticada(nada de sistema web parecido com
Desktop)
![Page 8: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/8.jpg)
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
![Page 9: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/9.jpg)
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
![Page 10: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/10.jpg)
Ok, teremos que montar nosso HTML com
JavaScript, as views do Backbone.js podem
nos ajudar com isso!
![Page 11: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/11.jpg)
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!
![Page 12: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/12.jpg)
• 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
![Page 13: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/13.jpg)
• 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?
![Page 14: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/14.jpg)
Nada pode dar errado!
![Page 15: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/15.jpg)
Dia 240
![Page 16: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/16.jpg)
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
![Page 17: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/17.jpg)
![Page 18: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/18.jpg)
Demora uma vida pra
carregar!
![Page 19: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/19.jpg)
Os templates se tornaram
uma praga!
193 templates diferentes
![Page 20: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/20.jpg)
templates
![Page 21: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/21.jpg)
![Page 22: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/22.jpg)
Memory Leaks
![Page 23: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/23.jpg)
Limite de CSS
![Page 24: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/24.jpg)
Impossível de testar o sistema tornou-se frágil!
![Page 25: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/25.jpg)
Dia 390
![Page 26: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/26.jpg)
![Page 27: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/27.jpg)
Módulos
Módulo
![Page 28: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/28.jpg)
Módulos
![Page 29: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/29.jpg)
Módulos
![Page 30: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/30.jpg)
Evite o DOM
Antes
// esse código tem caráter meramente ilustrativo ;)
![Page 31: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/31.jpg)
Evite o DOM
// esse código tem caráter meramente ilustrativo ;)
Agora
![Page 32: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/32.jpg)
Isso é tão legal
Que nós fizemos vários :D
![Page 33: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/33.jpg)
![Page 34: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/34.jpg)
Precisamos otimizar
as coisas por aqui.
![Page 35: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/35.jpg)
Mas antes, precisamos nos
separar do server!
ServerFront-end Monet.js
git submodulegit submodule
Java JS JS
![Page 36: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/36.jpg)
• Minifica
• Ofusca
• Karma
• Deploy
![Page 37: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/37.jpg)
E a qualidade?
![Page 38: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/38.jpg)
![Page 39: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/39.jpg)
![Page 40: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/40.jpg)
Ok, o código está lindo,
mas ele funciona?
![Page 41: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/41.jpg)
![Page 42: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/42.jpg)
![Page 43: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/43.jpg)
Teste unitário é ótimo,
mas não resolve tudo.
![Page 44: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/44.jpg)
Automatiza os
testes de aceitação
![Page 45: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/45.jpg)
Seus problemas acabaram!
#SQN
![Page 46: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/46.jpg)
A memória continua crescendo
indefinidamente!
![Page 47: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/47.jpg)
GC não limpa os nós que possuem
listeners.
![Page 48: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/48.jpg)
Performance importa!
![Page 49: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/49.jpg)
![Page 50: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/50.jpg)
[{coord}, {coord}, {coord}]
• Calcula o ângulo
• Pinta a seta
• Adicionar os listeners
• Adiciona ao mapa
Mais de 2 mil vezes
![Page 51: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/51.jpg)
![Page 52: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/52.jpg)
A culpa deve ser do jQuery
Trocar pelo FOR nativo!
28x mais rápido.
![Page 53: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/53.jpg)
![Page 54: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/54.jpg)
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.
![Page 55: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/55.jpg)
![Page 56: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/56.jpg)
DOM não é thread safe
![Page 57: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/57.jpg)
Reflows & Repaints a
cada coordenada
![Page 58: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/58.jpg)
Desenhe seu próprio SVG
e só no fim, adicione ao mapa.
![Page 59: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/59.jpg)
![Page 60: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/60.jpg)
![Page 61: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/61.jpg)
Mesmo minificado,
ofuscado e zipado o
sistema ainda demora
muito para carregar!
![Page 62: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/62.jpg)
![Page 63: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/63.jpg)
Requisições Ajax
Tiles de mapas
Arquivos de imagens
(layout)
50
36
40
![Page 64: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/64.jpg)
![Page 65: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/65.jpg)
Agora sim :D
![Page 66: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/66.jpg)
Dúvidas?
![Page 68: Como desenvolver com um sistema com um front-end colossal?](https://reader034.vdocuments.net/reader034/viewer/2022051017/55ac48701a28ab7a538b4850/html5/thumbnails/68.jpg)
Obrigado!
@mozartdiniz