Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GOTOcon 2012: Taming JavaScript with Cloud9 IDE...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for zef zef
May 30, 2012
Technology
120
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
「誰一人取り残されない」 AIエージェント時代のプロダクト設計思想 Product Management Summit 2026
Avatar for mizushimac mizushimac
1
1.7k
MLOps導入のための組織作りの第一歩
Avatar for Daisuke Akagawa (Akasan) akasan
0
390
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる！
Avatar for Kaz kaz1437
0
160
260422_Sansan_Tech_Talk__関西_vol.3_データ活用のリアル__矢田__.pdf
Avatar for SansanTech sansantech
PRO
0
120
AgentCore Managed Harness を使ってみよう
Avatar for やくも yakumo
2
240
スクラムの中で AI-DLC workflow を 使い始めて3ヶ月の振り返り
Avatar for 株式会社カミナシ kaminashi
0
140
Cortex Codeのコスト見積ヒントご紹介
Avatar for Yosuke Katsuki yokatsuki
0
120
LLM時代の検索アーキテクチャと技術的意思決定
Avatar for shibuiwilliam shibuiwilliam
3
1.5k
弁護士ドットコム株式会社 エンジニア職向け 会社紹介資料
Avatar for 弁護士ドットコム bengo4com
1
190
AI와 협업하는 조직으로의 여정
Avatar for Arawn Park arawn
0
530
Anthropic「Long-running a gents」をGeminiで再現してみた
Avatar for t-kikuchi tkikuchi
0
540
Hacobu Tech Deck
Avatar for Hacobu hacobu
PRO
0
130

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.8k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
55k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
303
52k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.5k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
160
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
900
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
140
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120

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