Building DSLs with JavaScript and CoffeeScript Dave Mosher @dmosher [email protected]

Goals: Theory + Practical Examples What is a DSL? As a web developer, why should I care? What practical ways can I apply this knowledge?

Domain Specific Language “Small languages, focused around a specific aspect of a software system” ~ Martin Fowler http://martinfowler.com/books/dsl.html

Characteristics “You can't build a whole program with a DSL” ~ Martin Fowler http://martinfowler.com/books/dsl.html

Characteristics External vs Internal

External “language that's parsed independently of the host general purpose language” http://martinfowler.com/books/dsl.html

External - CSS ruleset : selector [ ‘,’ S* selector ]* ‘{‘ S* declaration [ ‘;’ S*declaration ]* ‘}’ S* ; selector : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]? ; simple_selector : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class : ‘.’ IDENT ; element_name : IDENT | ‘*’ ; attrib : ‘[‘ S* IDENT S* [ [ ‘=’ | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ‘]’ ; pseudo : ‘:’ [ IDENT | FUNCTION S* [IDENT S*] ‘)’ ] ;

Internal “form of API in a host general purpose language” http://martinfowler.com/books/dsl.html

Internal “fluent interface” http://martinfowler.com/books/dsl.html

Internal - Procedural Code http://martinfowler.com/bliki/FluentInterface.html function makeNormal(Customer customer) { Order o1 = new Order(); customer.addOrder(o1); OrderLine line1 = new OrderLine(1, Product.find("widget")); o1.addLine(line1); OrderLine line2 = new OrderLine(2, Product.find("pants")); o1.addLine(line2); OrderLine line3 = new OrderLine(3, Product.find("cows")); o1.addLine(line3); line2.setSkippable(true); o1.setRush(true); }

Internal - Fluent Interface http://martinfowler.com/bliki/FluentInterface.html function makeFluent(Customer customer) { customer.newOrder() .with(1, "widget") .with(2, "pants").skippable() .with(3, "cows") .priorityRush(); }

In the Browser JavaScript

A Question of Value “I use to say, ‘I can bend space and time with .toString() and .eval()…

A Question of Value “I’ve come to realize that it’s generally better to not bend space and time in JavaScript.” ~ Marak Squires

In the Browser Does the host language support meta programming?

Meta Programming Support define_method method_missing eval assignment** Proxies* eval *ES6 coming soon™ ** Object.defineProperty in some cases

What’s a realistic approach to building a DSL in JavaScript?

Realistic DSLs in JavaScript Focus on the benefits not the terminology

Realistic DSLs in JavaScript Reduce cognitive load Improve understanding Reveal intent

Focus Areas 1. convention over configuration 2. meaningful semantics 3. fluent interfaces 4. extensions to libraries 5. abstractions

Realistic DSLs in JavaScript Convention over Configuration

Namespacing window.app = { views: { config: {}, }, … } // myView.js app = app || {}; app.views = app.views || {}; app.views.myView = {};

Extend.js + Namespacing extend(‘app.views.config’, {…});

Realistic DSLs in JavaScript Meaningful Semantics

Meaningful Semantics window.alert; adjective noun verb idiom

Meaningful Semantics window.notify = window.alert; notify(‘semantics improved’); verb

Meaningful Semantics extend ‘app.views.home’, class HomeView extends Backbone.View overloaded semantics

Meaningful Semantics def(‘app.views.home’, Backbone.View.extend({…}); def ‘app.views.home’, class HomeView extends Backbone.View improved semantics window.def = window.extend;

Realistic DSLs in JavaScript Fluent Interfaces

Fluent Interfaces (Mocha) (5).should.be.exactly(5).and.be.a.Number;

Method Chaining: Not Fluency // underscore var childrenOf = function(rootId) { return _(navItems).chain().where({parentId: rootId, hidden:false}).map(function(child) { return { title: child.label, url: child.url, ordinal: child.sequence, state: child.name }; }).sortBy(function(child) { return child.ordinal; }).value(); }; // lodash var childrenOf = function(rootId) { return _(navItems).where({parentId: rootId, hidden:false}).map(function(child) { return { title: child.label, url: child.url, ordinal: child.sequence, state: child.name }; }).sortBy(function(child) { return child.ordinal; }); };

Procedural Code http://martinfowler.com/bliki/FluentInterface.html function makeNormal(Customer customer) { Order o1 = new Order(); customer.addOrder(o1); OrderLine line1 = new OrderLine(1, Product.find("widget")); o1.addLine(line1); OrderLine line2 = new OrderLine(2, Product.find("pants")); o1.addLine(line2); OrderLine line3 = new OrderLine(3, Product.find("cows")); o1.addLine(line3); line2.setSkippable(true); o1.setRush(true); }

Fluent Interface http://martinfowler.com/bliki/FluentInterface.html function makeFluent(Customer customer) { customer.newOrder() .with(1, "widget") .with(2, "pants").skippable() .with(3, "cows") .priorityRush(); }

Cost of Implementation “The price of this fluency is more effort, both in thinking and in the API construction itself. Coming up with a nice fluent API requires a good bit of thought.” ~ Martin Fowler http://martinfowler.com/bliki/FluentInterface.html

Realistic DSLs in JavaScript Extensions to Libraries

Backbone + Fixins.SuperView class MyView extends Backbone.Fixins.SuperView renderJQueryAccordion: -> https://github.com/testdouble/backbone-fixins

ng - Automatic Template Resolution

Realistic DSLs in JavaScript Abstractions

Web Components

Date:

$(‘#datepicker’).datepicker();

jQuery + CSS Selector Paradigm $(‘#header > nav li:nth-child(2)’); document.querySelectorAll(…);

ng - custom element directives

Recap 1. convention over configuration 2. meaningful semantics 3. fluent interfaces 4. extensions to libraries 5. abstractions

Values to keep in mind 1. reduce cognitive load 2. improve understanding 3. reveal intent

Final Thoughts Be pragmatic Be aware of complexity Be cost-averse

Questions?

Thanks for coming! Dave Mosher @dmosher [email protected] bitly.com/bundles/dmosher/8