Arquitetura de Software
Ferramenta de Análise Estática para
códigos Javascript - Flow
Rodrigo O. Passos Ferreira
Objetivos do trabalho
- Apresentar a ferramenta e suas funcionalidades.
- Reportar o uso de Flow em dois sistemas JavaScri...
Flow - o que é?
“ Flow is a static type checker for JavaScript. It can be used
to catch common bugs in JavaScript programs...
Flow - o que é ?
● Verificação de erros comuns em códigos javascript como tipos incorretos,
referência a valores nulos den...
Flow - o que é ?
Projetos JS
- ZoomJS v 0.3 <https://github.com/fat/zoom.js>
- Plugin jQuery para aplicar zoom em imagens
- 2.048 estrelas
...
Metodologia
● Rodar a ferramenta flow nos projetos selecionados no modo normal e modo weak,
para identificar diferenças.
●...
Testes
execução nos dois sistemas no modo normal e modo weak
● Redução de defeitos de 30% e 50% do modo weak para normal n...
Testes
Testes
- Alta ocorrência do erro Property not found in pelo motivo da utilização de
propriedades de classes não declaradas...
Testes
37: document.body.style.transition = 'transform '+ TRANSITION_DURATION +'ms ease';
38: document.body.style.OTransit...
Testes
Para avaliar a funcionalidade de anotação de tipos e
implementação de interfaces para classes, foi selecionado
um d...
Testes
Conclusões
● Funciona!
● Ferramenta eficiente para auxiliar no desenvolvimento de sistemas javascript.
● Em intenso desenv...
Conclusões
FIM
Próximos SlideShares
Carregando em…5
×

Ferramenta Flow - Análise estática de códigos javascript

511 visualizações

Publicada em

Apresentação da ferramenta mantida pela equipe do facebook para análise estática e identificação de erros em códigos javascript

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
511
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ferramenta Flow - Análise estática de códigos javascript

  1. 1. Arquitetura de Software Ferramenta de Análise Estática para códigos Javascript - Flow Rodrigo O. Passos Ferreira
  2. 2. Objetivos do trabalho - Apresentar a ferramenta e suas funcionalidades. - Reportar o uso de Flow em dois sistemas JavaScript populares (mais de 200 estrelas no GitHub). - Relatar a experiência de "tipar" gradualmente algumas variáveis.
  3. 3. Flow - o que é? “ Flow is a static type checker for JavaScript. It can be used to catch common bugs in JavaScript programs - such as silent type conversions, null dereferences and so on - often without requiring any changes to your code. It also adds type syntax to JavaScript, so that developers can express invariants about their code and have them maintained automatically “
  4. 4. Flow - o que é ? ● Verificação de erros comuns em códigos javascript como tipos incorretos, referência a valores nulos dentre outros. ● Permite tipagem estática anotada (não obrigatória) de variáveis em js. ● Suporte a verificação online da alteração de arquivos via um servidor monitora as alterações nos arquivos rastreados em tempo real. ● Possui modo “weaker” que evita muitos falsos positivos, bastante útil em bibliotecas e códigos com muita utilização de reflexão de código etc. ● Definição de interfaces para classes de objetos, evitando falsos positivos na inferência de tipos e facilitando a verificação de códigos de terceiros. ● Verificação dinâmica. ● Largamente testado e utilizado nos códigos produzidos pela Facebook.
  5. 5. Flow - o que é ?
  6. 6. Projetos JS - ZoomJS v 0.3 <https://github.com/fat/zoom.js> - Plugin jQuery para aplicar zoom em imagens - 2.048 estrelas - 86 forks - 218 linhas de código (arquivo do plugin) - ClusterizeJS v 0.7.0 <https://github.com/NeXTs/Clusterize.js> - Plugin Javascript para exibição de grandes datasets - 3.235 estrelas - 128 forks - 264 linhas de código (arquivo do plugin)
  7. 7. Metodologia ● Rodar a ferramenta flow nos projetos selecionados no modo normal e modo weak, para identificar diferenças. ● Verificar e tabelar os tipos e quantidades de erros encontrados em cada um dos projetos. ● Avaliar os erros encontrados em função do código para tentar identificar se eram falsos positivos ou erros de fato. ● Experimentar anotar os tipos das variáveis explicitamente (ou implementar interface caso os erros encontrados fossem provenientes de inferência incorreta de classe).
  8. 8. Testes execução nos dois sistemas no modo normal e modo weak ● Redução de defeitos de 30% e 50% do modo weak para normal no ZoomJS e ClusterizeJS respectivamente.
  9. 9. Testes
  10. 10. Testes - Alta ocorrência do erro Property not found in pelo motivo da utilização de propriedades de classes não declaradas, ou não padrão na biblioteca Javascript padrão.
  11. 11. Testes 37: document.body.style.transition = 'transform '+ TRANSITION_DURATION +'ms ease'; 38: document.body.style.OTransition = '-o-transform '+ TRANSITION_DURATION +'ms ease'; 39: document.body.style.MozTransition = '-moz-transform '+ TRANSITION_DURATION +'ms ease'; 40: document.body.style.msTransition = '-ms-transform '+ TRANSITION_DURATION +'ms ease'; 41: document.body.style.WebkitTransition = '-webkit-transform '+ TRANSITION_DURATION +'ms ease'; /home/rodrix/ArqSW/tp/zoom.js:38:3,83: assignment of property OTransition Property not found in /tmp/flow/flowlib_1febc443/lib/cssom.js:46:1,336:1: CSSStyleDeclaration /home/rodrix/ArqSW/tp/zoom.js:39:3,87: assignment of property MozTransition Property not found in /tmp/flow/flowlib_1febc443/lib/cssom.js:46:1,336:1: CSSStyleDeclaration …
  12. 12. Testes Para avaliar a funcionalidade de anotação de tipos e implementação de interfaces para classes, foi selecionado um dos erros apontados pela ferramenta (do tipo property not found in) e implementada uma interface para a classe em questão, afim de verificar se o erro dado como corrigido pela ferramenta.
  13. 13. Testes
  14. 14. Conclusões ● Funciona! ● Ferramenta eficiente para auxiliar no desenvolvimento de sistemas javascript. ● Em intenso desenvolvimento, logo tem muito a melhorar. Em resumo, podemos considerar que a ferramenta é bastante funcional e flexível, permitindo um ganho de produtividade no que diz respeito a identificação de erros e melhora na qualidade do código (anotação de tipos). Mas precisa ainda de alguns ajustes, como possibilidade de se utilizar uma biblioteca JS externa (na versão atual ela é integrada ao executável) para que se possa utilizar implementações diferenetes de VM's javascript.
  15. 15. Conclusões FIM

×