Taming JavaScript with Cloud9 IDE: a Tale of Tree Hugging Zef Hemel - PowerPoint PPT Presentation

Taming JavaScript with Cloud9 IDE: a Tale of Tree Hugging Zef Hemel (@zef)

.js

browser.js

db.js

server.js

*.js

~140,000

Tooling matters

JavaScript Developer

HTML CSS JavaScript

HTML5 Client CSS3 JavaScript

HTML5 Client CSS3 JavaScript Node.js Server Redis

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

Mozilla Bespin

Mozilla Bespin Canvas

Browser Wars 2.0

DOM

Sidebar

Sidebar

Sidebar

Sidebar

Sidebar

Sidebar

Sidebar

Sidebar

JavaScript Scala Lua HTML SCSS Java C/C++ Markdown Closure SQL PHP SVG Perl C# Ruby CSS Textile CoffeeScript JSON Coldfusion Scad OCaml Groovy XML LaTeX

~240,000

Component Systems Decoupling Message Queues

Tooling matters especially for JavaScript

Unleash the awesome power of...

tatic

program analysis

Iterating using undeclared variable

Warning: you are in an anonymous inner function with its own “this” pointer

Did you mean “length”?

“The most important thing I have done as a programmer in recent years is to aggressively pursue static code analysis.” John Carmack

How?

Parse Analyze

Parser Code AST

Abstract Syntax Tree Op Parser “*” a * 10 Var Num “a” “10”

Zeon Narcissus UglifyJS language.js Esprima

performance (speed/memory) AST datastructure traversal tools

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

treehugger.js

“The JQuery of AST analysis.”

treehugger.js

Generic AST Data structure treehugger.js

Generic AST Data structure treehugger.js Generic Traversals

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

Generic AST Data structure treehugger.js DSL with Language- Pattern Specific Parsers Matching Generic Traversals

Generic AST Data structure treehugger.js DSL with Language- Pattern Specific Parsers Matching JavaScript (UglifyJS-based) Generic Traversals

Generic AST Data structure DSL with treehugger.js Language- Pattern Specific Parsers Matching JavaScript (UglifyJS-based) Generic Traversals

Op a * 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”

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

let’s play

What can you do with it?

Low-level tooling

Intelligent code completion

Complex refactoring

Cloud

Big data

What if...

Project 4 Project 5 Project 1 Project 3 Project 2 Project 6

Your (dev) environment matters use static analysis tools

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