SLIDE 1
Tern
http://ternjs.net
// Demo variable var audience = "GOTO Berlin"; var greeting = "hello " + a console.log(greeting); 1 2 3 4 5 6 7 8
Tern http://ternjs.net 1 // Demo variable 2 3 var - - PowerPoint PPT Presentation
Tern http://ternjs.net 1 // Demo variable 2 3 var - - PowerPoint PPT Presentation
Tern http://ternjs.net 1 // Demo variable 2 3 var audience = "GOTO Berlin"; 4 5 var greeting = "hello " + a 6 7 console.log(greeting); 8 Static scope 1 var aGlobal = 10; 2 3
SLIDE 2
SLIDE 3
Static scope
var aGlobal = 10; function foo(arg1, arg2) { a } 1 2 3 4 5 6
SLIDE 4
Dynamic types
var player = {name: "Heinrich", score: 9999}; function foo(x) { x. } foo(player); 1 2 3 4 5 6 7 8
SLIDE 5
Observation
var x = "foo"; // x is a string var y = x; // y is also a string
SLIDE 6
Observation
var x = "foo"; // x is a string OR bool if (quux()) x = false; var y = x; // y is also a string OR bool
SLIDE 7
Abstract Interpretation
SLIDE 8
SLIDE 9
Syntax tree
{ "type": "Program", "body": [ {↔}, {↔}, {↔} ] } 1 2 3 4 20 44 68 69
SLIDE 10
The user is typing
var array = []; if (code.isBeing("edited")) { must.know.type.of(array.in
- rderTo = complete("a", "property");
1 2 3 4 5
SLIDE 11
var x = "foo"; var y = x;
string x
string
y
string
SLIDE 12
var x = "foo"; if (quux()) x = false; var y = x;
string x
string bool
y
string bool
bool
SLIDE 13
function f(a, b) { return g(b, a); } function g(x, y) { return x + y; } var r = f("foo", "bar");
SLIDE 14
function g(x, y) { return x + y; }
[+] fn( x y )→ g
fn
SLIDE 15
function f(a, b) { return g(b, a); } function g(x, y) { return x + y; }
[+] fn( x y )→ g
fn
fn( a b )→ f
fn'
SLIDE 16
function f(a, b) { return g(b, a); } function g(x, y) { return x + y; }
[+] fn( x y )→ g
fn
fn( a b )→ f
fn'
call( )→
SLIDE 17
function f(a, b) { return g(b, a); } function g(x, y) { return x + y; }
[+] fn( x y )→ g
fn
fn( a b )→ f
fn'
call( )→
SLIDE 18
[+] fn( x y )→ g
fn
fn( a b )→ f
fn'
call( )→ call( )→ r
function f(a, b) { return g(b, a); } function g(x, y) { return x + y; } var r = f("foo", "bar");
SLIDE 19
[+] fn( x
str
y
str )→ str
g
fn
fn( a
str
b
str )→ str
f
fn'
call(
str str )→ str
call(
str str )→ str
r
str
string
SLIDE 20
var o = {x: 10, y: 0};
- bj
.y
number
.x
number
- bj
SLIDE 21
var o = {x: 10, y: 0}; var h = o.y;
- bj
.y
number
.x
number
- bj
get .y h
SLIDE 22
var o = {x: 10, y: 0}; var h = o.y;
- bj
.y
number
.x
number
- bj
get .y
number
h
number
SLIDE 23
Parametric polymorphism
function lastOf(array) { return array[array.length - 1]; } var num = lastOf([1, 2, 3]); var str = lastOf(["a", "b", "c"]);
SLIDE 24
Parametric polymorphism
function lastOf(array) { return array[array.length - 1]; }
get <i> fn( arr )→
SLIDE 25
var __extends = function(child, parent) { for (var key in parent) child[key] = parent[key]; function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); };
Now what?
SLIDE 26
Missing Connections
SLIDE 27
Practical Use
SLIDE 28
SLIDE 29
// File 1 var myVar = {x: 1, y: 2}; (function(exports) { exports.capitalize = function(word) { return word.charAt(0).toUpperCase() word.slice(1); }; exports.garble = function(word) { function garbleCh(ch) { return String.fromCharCode( ch.charCodeAt(0) + 1); } return word.replace(/./g, garbleCh }; }(this.myMod = {})); // File 2 my 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 1 2 3 4
SLIDE 30
For Emacs, Vim, & ST
➤ install editor plug-in ➤ add .tern-project file ➤ go
SLIDE 31
SLIDE 32
Related Work
SLIDE 33
SLIDE 34
Fin.
ternjs.net github.com/marijnh/tern marijnhaverbeke.nl twitter.com/marijnjh
SLIDE 35
SLIDE 36
eloquentjavascript.net
SLIDE 37