Essa apresentação conta a nossa saga pra conseguir construir, manter, performar e garantir a qualidade de um sistema com uma camada enorme de JavaScript, aqui falamos de vários dos problemas enfrentados e suas soluções.

1. Como desenvolver com um
sistema com um front-end
colossal?
https://cdn3.iconfinder.com/data/icons/picons-social/
57/03-twitter-256.png
Mozart Diniz
@mozartdiniz
mozartdiniz@sagaranatech.com

2. O que é um sistema
com um front-end
colossal?

3. Estamos falando de algo
entorno de:
68.202 Linhas de código
544 Arquivos JavaScript
4MB De arquivos minificados

4. Como se chega a
isso?

5. Dia 1

6. • 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

7. Interface amigável e sofisticada
(nada de sistema web parecido com
Desktop)
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.png

8. A definição do layout das telas
deve ser armazenada no banco
fronhtttps://cdn3.iconfinder.com/data/icons/musthave/256/DSeletee.prnvger
Trate de gerar seus
próprios HTMLs

9. Bem, estamos em Janeiro de
2012, que framework eu deveria
escolher?
Backbone.js Angular.js knockout.js Ember.js
https://cdn3.iconfinder.com/data/icons/musthave/256/Delete.png

10. Ok, teremos que montar nosso HTML com
JavaScript, as views do Backbone.js podem
nos ajudar com isso!

11. Fornecia as abas, os
pickers, draggable,
sortable, tudo que
precisamos!
Fornecia um sistema
de layout de grid para
o formulário e vários
componentes
bonitinhos ;)

12. • 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

13. • 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?

14. Nada pode dar errado!

15. Dia 240

16. 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

18. Demora uma vida pra
carregar!

19. Os templates se tornaram
uma praga!
193 templates diferentes

20. templates

22. Memory Leaks

23. Limite de CSS

24. Impossível de testar o
sistema tornou-se frágil!

25. Dia 390

27. Módulos
Módulo

28. Módulos

29. Módulos

30. Evite o DOM
Antes
// esse código tem caráter meramente ilustrativo ;)

31. Evite o DOM
Agora
// esse código tem caráter meramente ilustrativo ;)

32. Isso é tão legal
Que nós fizemos vários :D

34. Precisamos otimizar
as coisas por aqui.

35. Mas antes, precisamos nos
separar do server!
Server
Front-end Monet.js
Java JS JS
git submodule
git submodule

36. • Minifica
• Ofusca
• Karma
• Deploy

37. E a qualidade?

40. Ok, o código está lindo,
mas ele funciona?

43. Teste unitário é ótimo,
mas não resolve tudo.

44. Automatiza os
testes de aceitação

45. Seus problemas acabaram!
#SQN

46. A memória continua crescendo
indefinidamente!

47. GC não limpa os nós que possuem
listeners.

48. Performance importa!

50. [{coord}, {coord}, {coord}]
• Calcula o ângulo
• Pinta a seta
• Adicionar os listeners
• Adiciona ao mapa
Mais de 2 mil vezes

52. A culpa deve ser do jQuery
Trocar pelo FOR nativo!
28x mais rápido.

54. 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.

56. DOM não é thread safe

57. Reflows & Repaints a
cada coordenada

58. Desenhe seu próprio SVG
e só no fim, adicione ao mapa.

61. Mesmo minificado,
ofuscado e zipado o
sistema ainda demora
muito para carregar!

63. Requisições Ajax
Tiles de mapas
Arquivos de imagens
(layout)
50
36
40

65. Agora sim :D

66. Dúvidas?

67. Estamos contratando!
jobs@greenmile.com

68. Obrigado!
@mozartdiniz