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 JavaScript populares (mais de 200 estrelas no GitHub).

- Relatar a experiência de "tipar" gradualmente algumas variáveis.

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 “

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.

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- 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)

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

Testesexecuçã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.

Testes

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.

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 OTransitionProperty 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 MozTransitionProperty not found in /tmp/flow/flowlib_1febc443/lib/cssom.js:46:1,336:1: CSSStyleDeclaration…

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.

Testes

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.

Conclusões

FIM