Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

GOTOcon 2012: Taming JavaScript with Cloud9 IDE...

Avatar for zef zef
May 30, 2012
Technology
130
1

GOTOcon 2012: Taming JavaScript with Cloud9 IDE: a Tale of Tree Hugging

My talk on TreeHugger.js at GOTOcon.

Avatar for zef

zef

May 30, 2012

More Decks by zef

See All by zef
Pick Your Battles
Avatar for zef zef
1
160
GeeCON 2012: Coding in the Cloud
Avatar for zef zef
2
350

Other Decks in Technology

See All in Technology
Tofu-Controller lightning talk @ Containerday 2026
Avatar for Giovanni Toraldo gionn
0
110
脆弱性診断って、何をしているの？ 〜弱点を見つけて、会社の改善につなげるまで〜
Avatar for KeeG keeg
0
920
エンタメ企業のM&Aを支えるデータ基盤 ― 統合から店舗のリアルタイム分析まで / Data Engineering Summit 2026
Avatar for GENDA genda
0
180
ブラウザとサーバーから考えるAI時代のフロントエンド監視
Avatar for Shogo Fukami shogo4131
3
940
パスキーの自動テストはどこまでいけるのか
Avatar for teamLab teamlab
PRO
0
250
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
340
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
240
Kiro Crewをはじめよう
Avatar for t.kizawa kizawa2020
1
160
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
950
スプシの手作業からの解脱 ~更新はClaude Codeに、見せ方と使い方はGASアプリに任せる~
Avatar for KentaroFujii kentarofujii
0
150
Conditional PED-ANOVA: Hyperparameter Importance in Hierarchical & Dynamic Search Spaces
Avatar for Preferred Networks pfn
PRO
0
140
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
480

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
2
410
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
520
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
910
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
250

Transcript

  1. Taming JavaScript with Cloud9 IDE: a Tale of Tree Hugging

    Zef Hemel (@zef)
  2. None
  3. None
  4. None

  5. .js

  6. browser.js

  7. db.js

  8. server.js

  9. *.js

  10. None

  11. ~140,000

  12. Tooling matters

  13. None

  14. JavaScript Developer

  15. None
  16. None
  17. None

  18. HTML CSS JavaScript

  19. HTML5 CSS3 JavaScript Client

  20. HTML5 CSS3 JavaScript Client Node.js Redis Server

  21. HTML5 CSS3 JavaScript Client Node.js Redis Server XMLHttpRequest HTML5 WebSockets

  22. Mozilla Bespin

  23. Mozilla Bespin Canvas

  24. Browser Wars 2.0

  25. DOM

  26. Sidebar

  27. Sidebar

  28. Sidebar

  29. Sidebar

  30. Sidebar

  31. Sidebar

  32. Sidebar

  33. Sidebar

  34. JavaScript C/C++ Closure CoffeeScript Coldfusion C# CSS Groovy HTML Java

    JSON LaTeX Lua Markdown OCaml Perl PHP Ruby Scad Scala SCSS SQL SVG Textile XML
  35. None

  36. ~240,000

  37. Component Systems Message Queues Decoupling

  38. None
  39. None
  40. None
  41. None

  42. Tooling matters especially for JavaScript

  43. None

  44. Unleash the awesome power of...

  45. tatic

  46. program analysis

  47. None
  48. None

  49. Iterating using undeclared variable

  50. None

  51. Warning: you are in an anonymous inner function with its

    own “this” pointer
  52. None

  53. Did you mean “length”?

  54. “The most important thing I have done as a programmer

    in recent years is to aggressively pursue static code analysis.” John Carmack

  55. How?

  56. Parse Analyze

  57. Parser Code AST

  58. Abstract Syntax Tree a * 10 Parser Op Var Num

    “*” “a” “10”

  59. Zeon UglifyJS Narcissus Esprima language.js

  60. performance (speed/memory) AST datastructure traversal tools

  61. performance (speed/memory) AST datastructure traversal tools JavaScript specific

  62. treehugger.js

  63. “The JQuery of AST analysis.”

  64. treehugger.js

  65. treehugger.js Generic AST Data structure

  66. treehugger.js Generic AST Data structure Generic Traversals

  67. treehugger.js Generic AST Data structure Generic Traversals DSL with Pattern

    Matching

  68. treehugger.js Generic AST Data structure Generic Traversals DSL with Pattern

    Matching Language- Specific Parsers

  69. treehugger.js Generic AST Data structure Generic Traversals DSL with Pattern

    Matching Language- Specific Parsers JavaScript (UglifyJS-based)

  70. treehugger.js Generic AST Data structure Generic Traversals DSL with Pattern

    Matching Language- Specific Parsers JavaScript (UglifyJS-based)

  71. a * 10 Op Var Num “*” “a” “10”

  72. Op("*", Var("a"), Num("10")) Op Var Num “*” “a” “10”

  73. Op("*", Var("a"), Num("10")) ATerm Op Var Num “*” “a” “10”

  74. Constructors Lists Strings Var(_) [_, _] "hello" Placeholders x

  75. let’s play

  76. What can you do with it?

  77. Low-level tooling

  78. None

  79. Intelligent code completion

  80. Complex refactoring

  81. Cloud

  82. Big data

  83. What if...

  84. Project 1 Project 2 Project 3 Project 4 Project 5

    Project 6

  85. Your (dev) environment matters use static analysis tools

  86. http://c9.io @zef http://github.com/ajaxorg/treehugger