Avoiding JavaScript Pitfalls Through Tree Hugging        Zef Hemel (@zef)
JavaScript Developer
http://c9.io
we’re building#1 JavaScript IDE
~400,000
Iterating using undeclared variable
Warning: you are in an anonymous inner function with its own “this” pointer -- ya sure this is what you mean?
Did you mean “length”?
How?
Unleash theawesome power of...
tatic
X   tatic
program analysis
Whatcan you do with it?
code outlinescode completion (intellisense)       code navigation              ...
ParseAnalyze
Code   Parser   AST
Abstract Syntax Tree                                Opa * 10        Parser     “*”    Var   Num                           ...
Zeon                   Narcissus              UglifyJSlanguage.js                         Esprima
performance (speed/memory)     AST datastructure      traversal tools
i fi c                        ec                       p   performance (speed/memory)                     s         i pt  ...
treehugger.js
“The JQuery of AST analysis.”
Standard AST Datastructure
Standard Traversals        +Pattern Matching
Opa * 10   “*”   Var   Num               “a”   “10”
Op                   Op("*", Var("a"),“*”   Var   Num            Num("10"))      “a”   “10”
Op                         ATerm                   Op("*", Var("a"),“*”   Var   Num             Num("10"))      “a”   “10”
Constructors   Var(_)Lists          [_, _]Strings        "hello"Placeholders   x
http://github.com/ajaxorg/treehugger
http://github.com/ajaxorg/treehugger   http://c9.io   @zef    @cloud9ide
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Avoiding JavaScript Pitfalls Through Tree Hugging
Upcoming SlideShare
Loading in …5
×

Avoiding JavaScript Pitfalls Through Tree Hugging

2,281 views

Published on

Slides of the talk given at MeetJS Summit (http://summit.meetjs.pl). The TreeHugger playground can be found here: http://ajaxorg.github.com/treehugger/test.html

Published in: Technology
  • Be the first to comment

Avoiding JavaScript Pitfalls Through Tree Hugging

  1. 1. Avoiding JavaScript Pitfalls Through Tree Hugging Zef Hemel (@zef)
  2. 2. JavaScript Developer
  3. 3. http://c9.io
  4. 4. we’re building#1 JavaScript IDE
  5. 5. ~400,000
  6. 6. Iterating using undeclared variable
  7. 7. Warning: you are in an anonymous inner function with its own “this” pointer -- ya sure this is what you mean?
  8. 8. Did you mean “length”?
  9. 9. How?
  10. 10. Unleash theawesome power of...
  11. 11. tatic
  12. 12. X tatic
  13. 13. program analysis
  14. 14. Whatcan you do with it?
  15. 15. code outlinescode completion (intellisense) code navigation ...
  16. 16. ParseAnalyze
  17. 17. Code Parser AST
  18. 18. Abstract Syntax Tree Opa * 10 Parser “*” Var Num “a” “10”
  19. 19. Zeon Narcissus UglifyJSlanguage.js Esprima
  20. 20. performance (speed/memory) AST datastructure traversal tools
  21. 21. i fi c ec p performance (speed/memory) s i pt r AST datastructure S c v a traversal toolsJa
  22. 22. treehugger.js
  23. 23. “The JQuery of AST analysis.”
  24. 24. Standard AST Datastructure
  25. 25. Standard Traversals +Pattern Matching
  26. 26. Opa * 10 “*” Var Num “a” “10”
  27. 27. Op Op("*", Var("a"),“*” Var Num Num("10")) “a” “10”
  28. 28. Op ATerm Op("*", Var("a"),“*” Var Num Num("10")) “a” “10”
  29. 29. Constructors Var(_)Lists [_, _]Strings "hello"Placeholders x
  30. 30. http://github.com/ajaxorg/treehugger
  31. 31. http://github.com/ajaxorg/treehugger http://c9.io @zef @cloud9ide

×