avoiding javascript pitfalls through tree hugging

47
Avoiding JavaScript Pitfalls Through Tree Hugging Zef Hemel (@zef)

Upload: zefhemel

Post on 05-Dec-2014

2.266 views

Category:

Technology


1 download

DESCRIPTION

Slides of the talk given at MeetJS Summit (http://summit.meetjs.pl). The TreeHugger playground can be found here: http://ajaxorg.github.com/treehugger/test.html

TRANSCRIPT

Page 1: Avoiding JavaScript Pitfalls Through Tree Hugging

Avoiding JavaScript PitfallsThrough Tree Hugging

Zef Hemel (@zef)

Page 2: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 3: Avoiding JavaScript Pitfalls Through Tree Hugging

JavaScript Developer

Page 4: Avoiding JavaScript Pitfalls Through Tree Hugging

http://c9.io

Page 5: Avoiding JavaScript Pitfalls Through Tree Hugging

we’re building#1 JavaScript IDE

Page 6: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 7: Avoiding JavaScript Pitfalls Through Tree Hugging

~400,000

Page 8: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 9: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 10: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 11: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 12: Avoiding JavaScript Pitfalls Through Tree Hugging

Iterating using undeclared variable

Page 13: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 14: Avoiding JavaScript Pitfalls Through Tree Hugging

Warning: you are in an anonymous inner function with its own “this” pointer -- ya sure this is what you mean?

Page 15: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 16: Avoiding JavaScript Pitfalls Through Tree Hugging

Did you mean “length”?

Page 17: Avoiding JavaScript Pitfalls Through Tree Hugging

How?

Page 18: Avoiding JavaScript Pitfalls Through Tree Hugging

Unleash the awesome power of...

Page 19: Avoiding JavaScript Pitfalls Through Tree Hugging

tatic

Page 20: Avoiding JavaScript Pitfalls Through Tree Hugging

taticX

Page 21: Avoiding JavaScript Pitfalls Through Tree Hugging

program analysis

Page 22: Avoiding JavaScript Pitfalls Through Tree Hugging

Whatcan you do with it?

Page 23: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 24: Avoiding JavaScript Pitfalls Through Tree Hugging

code outlines

code navigation

...

code completion (intellisense)

Page 25: Avoiding JavaScript Pitfalls Through Tree Hugging

Parse

Analyze

Page 26: Avoiding JavaScript Pitfalls Through Tree Hugging

ParserCode AST

Page 27: Avoiding JavaScript Pitfalls Through Tree Hugging

Abstract Syntax Tree

a * 10 Parser

Op

Var Num“*”

“a” “10”

Page 28: Avoiding JavaScript Pitfalls Through Tree Hugging

Zeon

UglifyJS

Narcissus

Esprimalanguage.js

Page 29: Avoiding JavaScript Pitfalls Through Tree Hugging

performance (speed/memory)

AST datastructure

traversal tools

Page 30: Avoiding JavaScript Pitfalls Through Tree Hugging

performance (speed/memory)

AST datastructure

traversal tools

JavaSc

ript s

pecific

Page 31: Avoiding JavaScript Pitfalls Through Tree Hugging

treehugger.js

Page 32: Avoiding JavaScript Pitfalls Through Tree Hugging

“The JQuery of AST analysis.”

Page 33: Avoiding JavaScript Pitfalls Through Tree Hugging

Standard AST Datastructure

Page 34: Avoiding JavaScript Pitfalls Through Tree Hugging

Standard Traversals

Pattern Matching

+

Page 35: Avoiding JavaScript Pitfalls Through Tree Hugging

a * 10

Op

Var Num“*”

“a” “10”

Page 36: Avoiding JavaScript Pitfalls Through Tree Hugging

Op("*", Var("a"), Num("10"))

Op

Var Num“*”

“a” “10”

Page 37: Avoiding JavaScript Pitfalls Through Tree Hugging

Op("*", Var("a"), Num("10"))

ATerm

Op

Var Num“*”

“a” “10”

Page 38: Avoiding JavaScript Pitfalls Through Tree Hugging

Constructors

Lists

Strings

Var(_)

[_, _]

"hello"

Placeholders x

Page 39: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 41: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 42: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 43: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 44: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 45: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 46: Avoiding JavaScript Pitfalls Through Tree Hugging
Page 47: Avoiding JavaScript Pitfalls Through Tree Hugging

http://c9.io @zef @cloud9ide

http://github.com/ajaxorg/treehugger