$30 off During Our Annual Pro Sale. View Details »

GOTOcon 2012: Taming JavaScript with Cloud9 IDE...

Avatar for zef zef
May 30, 2012
Technology
1
120

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
Tweet

More Decks by zef

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

Other Decks in Technology

See All in Technology
プロダクトマネージャーが押さえておくべき、ソフトウェア資産とAIエージェント投資効果 / pmconf2025
Avatar for Masato Ishigaki / 石垣雅人 i35_267
2
590
MapKitとオープンデータで実現する地図情報の拡張と可視化
Avatar for ZOZO Developers zozotech
PRO
1
120
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
210
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
Avatar for Ayokura ayokura
0
290
グレートファイアウォールを自宅に建てよう
Avatar for 綿糸てせ ctes091x
0
140
【CEDEC+KYUSHU2025】学生・若手必見！テクニカルアーティスト 大全 ～仕事・スキル・キャリアパス、TAの「わからない」を徹底解剖～
Avatar for Cygames cygames
PRO
0
150
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
0
190
直接メモリアクセス
Avatar for KOBA789 koba789
0
280
[デモです] NotebookLM で作ったスライドの例
Avatar for Takaaki Tanaka kongmingstrap
0
100
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
Avatar for hawky the miscellaneous hawkymisc
1
160
法人支出管理領域におけるソフトウェアアーキテクチャに基づいたテスト戦略の実践
Avatar for ogugu ogugu9
1
210
Oracle Technology Night #95 GoldenGate 26ai の実装に迫る1
Avatar for oracle4engineer oracle4engineer
PRO
0
150

Featured

See All Featured
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
121
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.3k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k

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