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

GOTOcon 2012: Taming JavaScript with Cloud9 IDE...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
200個のGitHubリポジトリを横断調査したかった
Avatar for Issei.Komori icck
0
130
気づかぬうちにセキュリティ負債を生むAPIキー運用
Avatar for Michitaka Sugawara sgwrmctk
0
160
新しいVibe Codingと”自走”について
Avatar for watany watany
6
330
日本 Fintech 未来予測レポート 2027〜2028年（手動編集版）
Avatar for 8maki 8maki
0
2.4k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
やさしいA2A入門
Avatar for みのるん minorun365
PRO
12
1.9k
自律型AIエージェントは何を破壊するのか
Avatar for kojira kojira
0
160
非エンジニアがClaudeと挑んだ「1ヶ月間プロダクト30本ノック」
Avatar for kinako askokc
0
580
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
Avatar for MasahiroKawahara masahirokawahara
2
360
作って終わりにしない タイミーのセマンティックレイヤー育成の現在地
Avatar for chanyou0311 chanyou0311
4
2.4k
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
150
AIのReact習熟度を測る
Avatar for uhyo uhyo
2
600

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
150
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
840
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
310
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
300
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
230
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k

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