Triangle JavaScript meetup lightning talks

Node 4 ES6 goodies

Patrick Mueller

V8 4.5 (same as Chrome 45).

Template strings


x = 'World'
y = 'Hello'

`${y}, ${x}`;

const p = LinePoster();
p`Hello`

Classes


class Animal {
    constructor(name) {}
    species() {}
    speak() {}
}

class Frog extends Animal {
    species() {
        return "Frog";
    }

    speak () {
        super(species())
    }
}

super isn't yet optimized, so should be avoided in hot paths.

Arrow functions


const foo () => console.log("in foo")

Don't need to use bind.

D3: Data-Driven Documents

John W. Long

http://d3js.org/

http://codepen.io/jlong/pen/avNdjr?editors=101

http://codepen.io/collection/aGmAK/

Eases creating functions to map data to coordinates. Helper for creating SVG lines.

D3 widgets

Doug

Built number line widget with number pad.

Hot module replacement

Nate Hunzaker

Terrain generation using Perlin noise (created for Tron).

Patch changes into code running in browser.


require('./colorTable');

if (module.hot) {
    module.hot.accept('./colorTable', function () {
    })
}

Can be used for React stores with Redux.

S.JS

Adam Haile

https://github.com/curveship/S

Fast reactive programming in JavaScript.

Manually change subscriptions are redundant, inefficient (diamond problem), inconsistent. Double links in code graph prevent GC.

Reactive programming treats change as a foundational principle.

Examples:

Spreadsheets
React + MObservable
Elm

Reactive components

Data type for a value that changes over time, signal or cell.
Data type for a "live" function. Behaviour, formula, computation, task.
System that keeps the above glued together.

ClojureScript for JavaScripters

Monte Johnston

https://monjohn.github.io/clojurescript-for-javascripters/

http://www.infoq.com/presentations/Value-Values http://www.infoq.com/presentations/Simple-Made-Easy-QCon-London-2012 http://www.infoq.com/presentations/Are-We-There-Yet-Rich-Hickey

Clojure LISP compiling to JavaScript.

http://www.tryclj.com

Homoiconicity: treat code as data. Macros.

(+ 1 1)
(partition-by odd? '(1 1 1 2 2 3 3))

All usual data structures are immutable. Simplicity, predictability, performance. Immutable.js

Google Closure Tools. Libraries, including jQuery. Dependency management, become namespaces. Minification, including dead code removal.

Transcribing YouTube videos

Aaron Snitzer

http://wikitate.com

Annotate and playback subtitles for (almost) any YouTube video.

For accessibility, internationalization. Improves searchability.

@decorators

Ben McCormick

https://github.com/wycats/javascript-decorators

ES6 classes only for methods, no properties. Can't set properties in constructor before calling super().

Decorators proposed for ES2016. Allow customization of classes and functions at class creation.


@isTestable(true)
class MyClass {}

function isTestable(value) {
    return function decorator(target) {
        target.isTestable = value;
    }
}

class C {
    @enumberable(false)
    method() {  }
}
function enumerable(value) {
    return function (target, name, descriptor) {
        descriptor.enumerable = value;
    }
}

Function decorators modify method before it is added to class rather than being called each time decorated function is called.

Usable in TypeScript, in Babel with experimental flag.

Used in Angular 2, Aurelia.

Plans for using in Ember and React.

Dynamically adding console logging

Kip Streithorst

Add conditional breakpoint with the log statement as the condition.

Can also be used to modify variables using conditions like:


void(response.status = 401)