Successfully reported this slideshow.
AST: Abstract
Syntax Tree
/ Setembro 2013@millermedeiros
Mas o que vem a ser AST?
AST é uma representação do
"código" em formato de
"árvore".
AST é normalmente um formato de transição, usado para descrever a
estrutura original do programa antes que o mesmo seja co...
é representado como:
functionsum(a,b){
returna+b;
}
{
"type":"Program",
"body":[
{
"type":"FunctionDeclaration",
"id":{
"t...
E por que isso é útil?
É muito útil para ferramentas
que analizam código
lint / validação
análise de complexidade
autocomplete baseado no contexto
detecção de globais
...
É também muito importante
para ferramentas que alteram o
código
minificação
formatação
refactoring
compilers
transpilers
...
Estrutura da AST
(Esprima / SpiderMonkey Parser API)
Tokens (símbolos)
Tokens são grupos de caracteres gerados apartir da análise léxica do
programa.
a+b
[{
"type":"Identifier...
Nodes (nós)
"Nodes" são representações de estruturas base do programa apartir da
análise sintática
a+b
{
"type":"Expressio...
Ferramentas
Esprima
Esprima é o parser mais popular para JavaScript e existem diversas
ferramentas baseadas nele.
http://esprima.org/d...
Esformatter
Formatador de JavaScript com mais de 200 opções de configuração,
ainda em fase experimental, provavelmente ser...
nodefy
Converte módulos escritos no formato AMD para node.js
https://github.com/millermedeiros/nodefy
Outras ferramentas
Rocambole
escodegen
escope
jshint
UglifyJS
JSComplexity
detect-globals
esrefactor
groundskeeper
es6ify
...
Referências
Wikipedia: Abstract Syntax Tree
Wikipedia: Syntax Analysis
Wikipedia: Lexical Analysis
SpiderMonkey Parser API
Construa as
ferramentas do
futuro!
Obrigado!
@millermedeiros
http://slides.millermedeiros.com/7masters/ast/
Miller Medeiros: AST - Abstract Syntax Tree
Upcoming SlideShare
Loading in …5
×

Miller Medeiros: AST - Abstract Syntax Tree

1,090 views

Published on

7Masters JavaScript | Miller Medeiros

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Miller Medeiros: AST - Abstract Syntax Tree

  1. 1. AST: Abstract Syntax Tree / Setembro 2013@millermedeiros
  2. 2. Mas o que vem a ser AST?
  3. 3. AST é uma representação do "código" em formato de "árvore".
  4. 4. AST é normalmente um formato de transição, usado para descrever a estrutura original do programa antes que o mesmo seja convertido para outro formato.
  5. 5. é representado como: functionsum(a,b){ returna+b; } { "type":"Program", "body":[ { "type":"FunctionDeclaration", "id":{ "type":"Identifier", "name":"sum" }, "params":[ { "type":"Identifier", "name":"a" }, {
  6. 6. E por que isso é útil?
  7. 7. É muito útil para ferramentas que analizam código
  8. 8. lint / validação análise de complexidade autocomplete baseado no contexto detecção de globais ...
  9. 9. É também muito importante para ferramentas que alteram o código
  10. 10. minificação formatação refactoring compilers transpilers ...
  11. 11. Estrutura da AST (Esprima / SpiderMonkey Parser API)
  12. 12. Tokens (símbolos) Tokens são grupos de caracteres gerados apartir da análise léxica do programa. a+b [{ "type":"Identifier", "value":"a" }, { "type":"Punctuator", "value":"+" }, { "type":"Identifier", "value":"b" }]
  13. 13. Nodes (nós) "Nodes" são representações de estruturas base do programa apartir da análise sintática a+b { "type":"ExpressionStatement", "expression":{ "type":"BinaryExpression", "operator":"+", "left":{ "type":"Identifier", "name":"a" }, "right":{ "type":"Identifier", "name":"b" } } }
  14. 14. Ferramentas
  15. 15. Esprima Esprima é o parser mais popular para JavaScript e existem diversas ferramentas baseadas nele. http://esprima.org/demo/parse.html
  16. 16. Esformatter Formatador de JavaScript com mais de 200 opções de configuração, ainda em fase experimental, provavelmente será "concluído" até o final de 2013. https://github.com/millermedeiros/esformatter
  17. 17. nodefy Converte módulos escritos no formato AMD para node.js https://github.com/millermedeiros/nodefy
  18. 18. Outras ferramentas Rocambole escodegen escope jshint UglifyJS JSComplexity detect-globals esrefactor groundskeeper es6ify Istanbul Rework (css)
  19. 19. Referências Wikipedia: Abstract Syntax Tree Wikipedia: Syntax Analysis Wikipedia: Lexical Analysis SpiderMonkey Parser API
  20. 20. Construa as ferramentas do futuro!
  21. 21. Obrigado! @millermedeiros http://slides.millermedeiros.com/7masters/ast/

×