Tweet
Tweet

Slide 1

Slide 1 text

Macros Unshackling JavaScript James Long / @jlongster with

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

with http://www.quirkyscience.com/wp-content/uploads/2012/06/Explosion-Image-by-US-Department-of-Defense.jpg ASI http://markakiprof.files.wordpress.com/2009/11/stresss.jpg ==

Slide 4

Slide 4 text

1998 EcmaScript 2

Slide 5

Slide 5 text

1999 EcmaScript 3

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

2014 EcmaScript 6

Slide 9

Slide 9 text

var {x, y} = pos;

Slide 10

Slide 10 text

<3
 COMPILERS

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

@jlongster

Slide 13

Slide 13 text

(lisp)

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

(defmacro if (test cons alt)! ...)

Slide 16

Slide 16 text

(defmethod (ship :speed) ()! (sqrt (+ (^ x-velocity 2)! (^ y-velocity 2)))

Slide 17

Slide 17 text

method ship speed() {! return sqrt(pow(this.xVelocity, 2),! pow(this.yVelocity, 2));! }

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

EmojiScript

Slide 20

Slide 20 text

Emotion as a Value

Slide 21

Slide 21 text

var happy = ;! // ILLEGAL # Emotion Literals

Slide 22

Slide 22 text

var happy = ;! // OK! # Emotion Literals

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

# Emotional Algebra + == ; + == + == ;

Slide 25

Slide 25 text

> === true

Slide 26

Slide 26 text

if(1 == “1”) { ... }! // Error: "==" is not allowed # Enforce Good Practices

Slide 27

Slide 27 text

# Enforce Good Practices if(1 “1”) { ... }

Slide 28

Slide 28 text

# Errors throw new Error(! “something is wrong”! )

Slide 29

Slide 29 text

# Errors "something is wrong"

Slide 30

Slide 30 text

# Automatic Cat Insertion var foo = 1 + 2;! var bar = baz();! var user = + ;

Slide 31

Slide 31 text

# Automatic Cat Insertion var foo = 1 + 2! var bar = baz()! var user = +

Slide 32

Slide 32 text

# Better Expressiveness if(user < ) {! "be happy"! }

Slide 33

Slide 33 text

$ npm install emojiscript $ emo file.js > output.js

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

$ npm install emojiscript $ sjs -m emojiscript/macros/poop.js file.js

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

macros/fat-arrow.js x => x * x function(x) {! return x * x;! }.bind(this)

Slide 38

Slide 38 text

macros/destructure.js var {x, y} = obj;! var [one, two] = arr; var x = obj.x;! var y = obj.y;! var one = arr[0];! var two = arr[1];

Slide 39

Slide 39 text

macros/class.js class Foo {! move(x, y) {! this.x = x;! this.y = y;! }! }

Slide 40

Slide 40 text

macros/class.js function Foo() {}! Foo.prototype.move = function(x, y) {! this.x = x;! this.y = y;
 }

Slide 41

Slide 41 text

$ sjs! -m emojiscript/macros/poop.js ! -m es6-macros/macros/fat-arrow.js! file.js

Slide 42

Slide 42 text

Experiment!

Slide 43

Slide 43 text

• Proposal • Discussion • Finalization • Implementation • Maturation

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

⾠

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

@Inject(TodoList)! export class AppView extends View {! ! constructor(todos) {! this.todos = todos;! //...! }! ! // ...! ! } # Angular & ES6+

Slide 50

Slide 50 text

macro == {! case { $ctx } => {! throwSyntaxError(! "== is not allowed”,! #{$ctx}! );! }! }

Slide 51

Slide 51 text

macro macro {! case { $ctx } => {! throwSyntaxError(! "macros are not allowed, go home”,! #{$ctx}! );! }! }

Slide 52

Slide 52 text

# Function Tracing

Slide 53

Slide 53 text

let function = macro {! rule { $name($args ...) { $body ... } } => {! console.log(! "calling " + syntaxToString $name + “..”! );! ! var ret = (function($args ...) {! $body ...;! })($args ...);! ! console.log(! "returning " + syntaxToString $name! );! return ret;! }! }

Slide 54

Slide 54 text

$('#app').html('
');

Slide 55

Slide 55 text

# Stack Allocation

Slide 56

Slide 56 text

var MB = 1024 * 1024;! var STACK_SIZE = 2 * MB;! var buffer = new ArrayBuffer(STACK_SIZE);! var U1 = new Uint8Array(buffer);! var I1 = new Int8Array(buffer);! var U2 = new Uint16Array(buffer);! var I2 = new Int16Array(buffer);! var U4 = new Uint32Array(buffer);! var I4 = new Int32Array(buffer);! var F4 = new Float32Array(buffer);! var F8 = new Float64Array(buffer);

Slide 57

Slide 57 text

defineRecord Point {! x : double,! y : double! }! ! Point pos;! pos.x = 100;! pos.y = 80;

Slide 58

Slide 58 text

var ptr = SP;! SP -= 16;! F8[ptr + 0] = 100;! F8[ptr + 8] = 80;

Slide 59

Slide 59 text

?

Slide 60

Slide 60 text

# Sweet.js Features • Pattern Matching • Various expansion strategies • Hygiene

Slide 61

Slide 61 text

# Pattern Matching macro var {! rule { { $name (,) ... } = $obj } => {! var $($name = $obj.$name) (,) ...! }! ! rule { [ $name (,) ... ] = $arr } => {! var i = 0;! var $($name = $arr[i++]) (,) ...! }! ! rule { $name } => {! var $name! }! }

Slide 62

Slide 62 text

# Expansion Strategies: rule macro foo {! rule { } => {! // expanded code! }! ! rule { } => {! // expanded code! }! ! rule { } => {! // expanded code! }! }

Slide 63

Slide 63 text

# Expansion Strategies: let let var = macro {! rule { $name = $val:expr } => {! var $name = $val! }! }

Slide 64

Slide 64 text

# Expansion Strategies: infix macro => {! rule infix { ($value (,) ...) | {$body ...} } => {! function($value (,) ...) {! $body ...! }.bind(this)! }! rule infix { ($value (,) ...) | $guard:expr } => {! function($value (,) ...) {! return $guard;! }.bind(this)! }! }!

Slide 65

Slide 65 text

# Expansion Strategies: operator operator + 12 left { $l, $r } => #{! add($l, $r)! } add(add(add(1, 2), 3), 4); 1 + 2 + 3 + 4

Slide 66

Slide 66 text

# Expansion Strategies: operator operator + 12 right { $l, $r } => #{! add($l, $r)! } add(1, add(2, add(3, 4))) 1 + 2 + 3 + 4

Slide 67

Slide 67 text

# Expansion Strategies: case ! macro foo {! case { $ctx } => {! // any JavaScript executed here!! ! if(!cond) {! throwSyntaxError("bad thing!", #{$ctx});! }! ! letstx $name = [token];! return #{! // expanded code here! $name! }! }! }

Slide 68

Slide 68 text

# Hygiene macro square {! rule { $expr:expr } => {! var x = $expr;! x * x! }! }! ! var x = 5;! square x; var x$1 = 5;! var x$2 = x$1;! x$2 * x$2

Slide 69

Slide 69 text

# Syntax Highlighting

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

# Quick Recap • JavaScript is under a lot of pressure to
 evolve • sweet.js provides macros for adding language features as libraries • Compilers can’t work together • We can help TC39 and liberate JavaScript

Slide 72

Slide 72 text

Thanks! James Long / @jlongster https://github.com/jlongster/emojiscript