O documento apresenta a ferramenta Flow para análise estática de códigos JavaScript, relatando sua utilização em dois projetos populares no GitHub. Flow detecta erros comuns em JS sem alterar o código e permite tipagem anotada. Os testes mostraram redução de defeitos de 30-50% com Flow, embora propriedades não padrão ainda gerem erros. Anotando tipos, foi possível corrigir um erro reportado.

1. Arquitetura de Software
Ferramenta de Análise Estática para
códigos Javascript - Flow
Rodrigo O. Passos Ferreira

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. 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. 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. Flow - o que é ?

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

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

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. Conclusões
FIM