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
SMART_READER_LITE
LIVE PREVIEW

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

Aug 13, 2023 560 likes •1.45k views

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

slide-1
SLIDE 1

Taming JavaScript with Cloud9 IDE: a Tale of Tree Hugging

Zef Hemel (@zef)

slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

.js

slide-6
SLIDE 6

browser.js

slide-7
SLIDE 7

db.js

slide-8
SLIDE 8

server.js

slide-9
SLIDE 9

*.js

slide-10
SLIDE 10
slide-11
SLIDE 11

~140,000

slide-12
SLIDE 12

Tooling matters

slide-13
SLIDE 13
slide-14
SLIDE 14

JavaScript Developer

slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

HTML

CSS

JavaScript

slide-20
SLIDE 20

HTML5 CSS3 JavaScript

Client

slide-21
SLIDE 21

HTML5 CSS3 JavaScript

Client

Node.js Redis

Server

slide-22
SLIDE 22

HTML5 CSS3 JavaScript

Client

Node.js Redis

Server

XMLHttpRequest HTML5 WebSockets
slide-23
SLIDE 23

Mozilla Bespin

slide-24
SLIDE 24

Mozilla Bespin Canvas

slide-25
SLIDE 25

Browser Wars 2.0

slide-26
SLIDE 26

DOM

slide-27
SLIDE 27

Sidebar

slide-28
SLIDE 28

Sidebar

slide-29
SLIDE 29

Sidebar

slide-30
SLIDE 30

Sidebar

slide-31
SLIDE 31

Sidebar

slide-32
SLIDE 32

Sidebar

slide-33
SLIDE 33

Sidebar

slide-34
SLIDE 34

Sidebar

slide-35
SLIDE 35

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

slide-36
SLIDE 36
slide-37
SLIDE 37

~240,000

slide-38
SLIDE 38

Component Systems

Message Queues

Decoupling

slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43

Tooling matters especially for JavaScript

slide-44
SLIDE 44
slide-45
SLIDE 45

Unleash the

awesome power of...

slide-46
SLIDE 46

tatic

slide-47
SLIDE 47

program analysis

slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50

Iterating using undeclared variable

slide-51
SLIDE 51
slide-52
SLIDE 52

Warning: you are in an anonymous inner function with its

  • wn “this” pointer
slide-53
SLIDE 53
slide-54
SLIDE 54

Did you mean “length”?

slide-55
SLIDE 55

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

John Carmack

slide-56
SLIDE 56

How?

slide-57
SLIDE 57

Parse

Analyze

slide-58
SLIDE 58

Parser

Code AST

slide-59
SLIDE 59

Abstract Syntax Tree

a * 10

Parser

Op Var Num

“*” “a” “10”

slide-60
SLIDE 60

Zeon UglifyJS Narcissus Esprima language.js

slide-61
SLIDE 61

performance (speed/memory) AST datastructure traversal tools

slide-62
SLIDE 62

performance (speed/memory) AST datastructure traversal tools

JavaScript specific

slide-63
SLIDE 63

treehugger.js

slide-64
SLIDE 64

“The JQuery of AST analysis.”

slide-65
SLIDE 65

treehugger.js

slide-66
SLIDE 66

treehugger.js

Generic AST Data structure
slide-67
SLIDE 67

treehugger.js

Generic AST Data structure Generic Traversals
slide-68
SLIDE 68

treehugger.js

Generic AST Data structure Generic Traversals DSL with Pattern Matching
slide-69
SLIDE 69

treehugger.js

Generic AST Data structure Generic Traversals DSL with Pattern Matching Language- Specific Parsers
slide-70
SLIDE 70

treehugger.js

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

JavaScript

(UglifyJS-based)
slide-71
SLIDE 71

treehugger.js

Generic AST Data structure Generic Traversals

DSL with Pattern Matching

Language- Specific Parsers

JavaScript

(UglifyJS-based)
slide-72
SLIDE 72

a * 10

Op Var Num

“*” “a” “10”

slide-73
SLIDE 73

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

Op Var Num

“*” “a” “10”

slide-74
SLIDE 74

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

Op Var Num

“*” “a” “10”

slide-75
SLIDE 75

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

slide-76
SLIDE 76

let’s play

slide-77
SLIDE 77

What

can you do with it?

slide-78
SLIDE 78

Low-level tooling

slide-79
SLIDE 79
slide-80
SLIDE 80

Intelligent code completion

slide-81
SLIDE 81

Complex refactoring

slide-82
SLIDE 82

Cloud

slide-83
SLIDE 83

Big data

slide-84
SLIDE 84

What if...

slide-85
SLIDE 85 Project 1 Project 2 Project 3 Project 4 Project 5 Project 6
slide-86
SLIDE 86

Your (dev) environment matters

use static analysis tools

slide-87
SLIDE 87

http://c9.io

@zef

http://github.com/ajaxorg/treehugger