Tern

http://ternjs.net

Static

java.util.Date start =
  mypackage.Timeline.getStartDate();

vs dynamic

var start = timeline.startDate();

// Syntax tree
{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "audience"
          },
          "init": {
            "type": "Literal",
            "value": "Web Rebels"
          }
        }
      ]
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "greeting"
          },
          "init": {
            "type": "BinaryExpression",
            "left": {
              "type": "Literal",
              "value": "hello "
            },
            "operator": "+",
            "right": {
              "type": "Identifier",
              "name": "audience"
            }
          }
        }
      ]
    },
    {
      "type": "ExpressionStatement",
      "expression": {
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          },
          "computed": false
        },
        "arguments": [
          {
            "type": "Identifier",
            "name": "greeting"
          }
        ]
      }
    }
  ]
}

Observation

var x = "foo"; // x is a string

var y = x;     // y is also a string

Observation

var x = "foo"; // x is a string OR bool
x = true;
var y = x;     // y is also a string OR bool

var x = "foo";

var y = x;

var x = "foo";
x = true;
var y = x;

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }
var r = f("foo", "bar");


function g(x, y) { return x + y; }

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }
var r = f("foo", "bar");

function f(a, b) { return g(b, a); }
function g(x, y) { return x + y; }
var r = f("foo", "bar");

var o = {x: 10, y: 0};

var o = {x: 10, y: 0};
var h = o.y;

var o = {x: 10, y: 0};
var h = o.y;

function lastOf(array) {
  return array[array.length - 1];
}

var num = lastOf([1, 2, 3]);
var str = lastOf(["a", "b", "c"]);

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();
};

Uh oh

Missing Connections

Real-World Coding

For Emacs, Vim, & ST

➤ install editor plug-in

➤ add .tern-project file

➤ go

.Fin.

ternjs.net
github.com/marijnh/tern

marijnhaverbeke.nl
twitter.com/marijnjh