dsls in javascript

187
DSLs in JavaScript Nathaniel T. Schutta

Upload: elliando-dias

Post on 06-May-2015

3.707 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: DSLs in JavaScript

DSLs in JavaScriptNathaniel T. Schutta

Page 2: DSLs in JavaScript

Who am I?

• Nathaniel T. Schuttahttp://www.ntschutta.com/jat/

• Foundations of Ajax & Pro Ajax and Java Frameworks

• UI guy

• Author, speaker, teacher

• More than a couple of web apps

Page 3: DSLs in JavaScript

The Plan• DSLs?

• JavaScript? Seriously?

• Examples

• Lessons Learned

Page 4: DSLs in JavaScript

DS what now?

Page 5: DSLs in JavaScript

Domain Specific Language.

Page 6: DSLs in JavaScript

Every domain has its own language.

Page 7: DSLs in JavaScript

“Part of the benefit of being "into" something is having an insider lexicon.”

Kathy SierraCreating Passionate Users

http://headrush.typepad.com/creating_passionate_users/2006/11/why_web_20_is_m.html

Page 8: DSLs in JavaScript

Three quarter, knock down, soft cut.

Page 9: DSLs in JavaScript

Scattered, smothered, covered.

Page 10: DSLs in JavaScript

Large skim mocha, no whip no froth.

Page 11: DSLs in JavaScript

Not general purpose.

Page 12: DSLs in JavaScript

Simpler, more limited.

Page 13: DSLs in JavaScript

Expressive.

Page 14: DSLs in JavaScript

Terse.

Page 15: DSLs in JavaScript

$$('.header').each(function(el) {el.observe("click", toggleSection)});

Page 16: DSLs in JavaScript

Not a new idea.

Page 17: DSLs in JavaScript

Unix.

Page 18: DSLs in JavaScript

Little languages.

Page 19: DSLs in JavaScript

Lisp.

Page 20: DSLs in JavaScript

Build the language up...

Page 21: DSLs in JavaScript

Lots of attention today.

Page 22: DSLs in JavaScript

Rails!

Page 23: DSLs in JavaScript

Ruby is very hospitable.

Page 24: DSLs in JavaScript

So are other languages ;)

Page 25: DSLs in JavaScript

Internal vs. External.

Page 26: DSLs in JavaScript

Internal.

Page 27: DSLs in JavaScript

Within an existing language.

Page 28: DSLs in JavaScript

More approachable.

Page 29: DSLs in JavaScript

Simpler.

Page 30: DSLs in JavaScript

No grammars, parsing, etc.

Page 31: DSLs in JavaScript

Constrained by host language.

Page 32: DSLs in JavaScript

Flexible syntax helps!

Page 33: DSLs in JavaScript

Ruby ;)

Page 34: DSLs in JavaScript

Fluent interface.

Page 35: DSLs in JavaScript

Embedded DSLs.

Page 36: DSLs in JavaScript

External.

Page 37: DSLs in JavaScript

Create your own language.

Page 38: DSLs in JavaScript

Grammars.

Page 39: DSLs in JavaScript

Need to parse.

Page 40: DSLs in JavaScript

ANTLR, yacc, JavaCC.

Page 41: DSLs in JavaScript

Harder.

Page 42: DSLs in JavaScript

More flexibility.

Page 43: DSLs in JavaScript

Language workbenches.

Page 44: DSLs in JavaScript

Tools for creating new languages.

Page 45: DSLs in JavaScript

Internal are more common today.

Page 46: DSLs in JavaScript

Language workbenches - shift afoot?

Page 47: DSLs in JavaScript

http://martinfowler.com/articles/languageWorkbench.html

http://martinfowler.com/articles/mpsAgree.html

Page 48: DSLs in JavaScript

Meta Programming System.

http://www.jetbrains.com/mps/

Page 49: DSLs in JavaScript

Intentional Programming - Charles Simonyi.

http://intentsoft.com/http://www.technologyreview.com/Infotech/18047/?a=f

Page 50: DSLs in JavaScript

Oslo.

http://msdn.microsoft.com/en-us/oslo/default.aspx

Page 51: DSLs in JavaScript

Xtext.

http://wiki.eclipse.org/Xtext

Page 52: DSLs in JavaScript

Why are we seeing DSLs?

Page 53: DSLs in JavaScript

Easier to read.

Page 54: DSLs in JavaScript

Closer to the business.

Page 55: DSLs in JavaScript

Less friction, fewer translations.

Page 56: DSLs in JavaScript

Biz can review...

Page 57: DSLs in JavaScript

“Yesterday, I did a code review. With a CEO... Together, we found three improvements, and a couple of outright bugs.”

Bruce TateCanaries in the Coal Mine

http://blog.rapidred.com/articles/2006/08/30/canaries-in-the-coal-mine

Page 58: DSLs in JavaScript

Don’t expect them to write it though!

Page 59: DSLs in JavaScript

Will we all write DSLs?

Page 60: DSLs in JavaScript

No.

Page 61: DSLs in JavaScript

Doesn’t mean we can’t use them.

Page 62: DSLs in JavaScript

General advice on building a DSL:

Page 63: DSLs in JavaScript

Write it as you’d like it to be...

Page 64: DSLs in JavaScript

Even on a napkin!

Page 65: DSLs in JavaScript

Use valid syntax.

Page 66: DSLs in JavaScript

Iterate, iterate, iterate.

Page 67: DSLs in JavaScript

Work on the implementation.

Page 68: DSLs in JavaScript

http://martinfowler.com/bliki/DslQandA.html

http://memeagora.blogspot.com/2007/11/ruby-matters-frameworks-dsls-and.html

http://martinfowler.com/dslwip/

http://weblog.jamisbuck.org/2006/4/20/writing-domain-specific-languages

Page 69: DSLs in JavaScript

Not a toy!

Page 70: DSLs in JavaScript

JavaScript has been around for a while.

Page 71: DSLs in JavaScript

Many dismissed it as “toy for designers.”

Page 72: DSLs in JavaScript

It’s not the 90s anymore.

Page 73: DSLs in JavaScript

We have tools!

Page 74: DSLs in JavaScript

Developers care again!

Page 75: DSLs in JavaScript

Ajax.

Page 76: DSLs in JavaScript

Suffers from the “EJB issue.”

Page 77: DSLs in JavaScript

Powerful language.

Page 78: DSLs in JavaScript

“The Next Big Language”

http://steve-yegge.blogspot.com/2007/02/next-big-language.html

Page 79: DSLs in JavaScript

Runs on lots of platforms - including the JVM.

Page 80: DSLs in JavaScript

Ruby like?

Page 81: DSLs in JavaScript

“Rhino on Rails”

http://steve-yegge.blogspot.com/2007/06/rhino-on-rails.html

Page 82: DSLs in JavaScript

Orto - JVM written in JavaScript.

http://ejohn.org/blog/running-java-in-javascript/

Page 83: DSLs in JavaScript

JS-909.

http://www.themaninblue.com/experiment/JS-909/

Page 84: DSLs in JavaScript
Page 85: DSLs in JavaScript

JSSpec.

Page 86: DSLs in JavaScript

JavaScript testing DSL.

Page 87: DSLs in JavaScript

JSSpec? Really?

Page 88: DSLs in JavaScript

/** * Domain Specific Languages */JSSpec.DSL = {};

Page 89: DSLs in JavaScript

BDD for JS.

Page 90: DSLs in JavaScript

Like RSpec.

Page 91: DSLs in JavaScript

Not quite as elegant.

Page 92: DSLs in JavaScript

describe('Plus operation', { 'should concatenate two strings': function() { value_of("Hello " + "World").should_be("Hello World"); }, 'should add two numbers': function() { value_of(2 + 2).should_be(4); }})

Page 93: DSLs in JavaScript

value_of?

Page 94: DSLs in JavaScript

"Hello".should_be("Hello");

Page 95: DSLs in JavaScript

Sorry.

Page 96: DSLs in JavaScript

No method missing.

Page 97: DSLs in JavaScript

We’d need to modify Object’s prototype.

Page 98: DSLs in JavaScript

Generally a no-no.

Page 99: DSLs in JavaScript

Though it’s been done.

http://json.org/json.js

Page 100: DSLs in JavaScript

Null, undefined objects.

Page 101: DSLs in JavaScript

Design choice - consistency.

Page 102: DSLs in JavaScript

describe('Plus operation', { 'should concatenate two strings': function() { value_of("Hello " + "World").should_be("Hello World"); }, 'should add two numbers': function() { value_of(2 + 2).should_be(4); }})

Page 103: DSLs in JavaScript

describe - global defined in JSSpec.js.

Page 104: DSLs in JavaScript

Creates a new JSSpec.Spec()...

Page 105: DSLs in JavaScript

And adds it to an array of specs.

Page 106: DSLs in JavaScript

value_of - global defined in JSSpec.js.

Page 107: DSLs in JavaScript

value_of - converts parm to JSSpec.DSL.Subject

Page 108: DSLs in JavaScript

Handles arbitrary objects.

Page 109: DSLs in JavaScript

JSSpec.DSL.Subject contains should_*.

Page 110: DSLs in JavaScript

Added to prototype.

Page 111: DSLs in JavaScript

JSSpec.DSL.Subject.prototype.should_be = function(expected) { var matcher = JSSpec.EqualityMatcher.createInstance(expected,this.target); if(!matcher.matches()) { JSSpec._assertionFailure = {message:matcher.explain()}; throw JSSpec._assertionFailure; }}

Page 112: DSLs in JavaScript

this.target?

Page 113: DSLs in JavaScript

JSSpec.DSL.Subject = function(target) { this.target = target;};

Page 114: DSLs in JavaScript

this in JS is...interesting.

Page 115: DSLs in JavaScript

Why is everything JSSpec.Foo?

Page 116: DSLs in JavaScript

JS lacks packages or namespaces.

Page 117: DSLs in JavaScript

Keeps it clean.

Page 118: DSLs in JavaScript

Doesn’t collide...unless you have JSSpec too!

Page 119: DSLs in JavaScript

Not just a DSL of course.

Page 120: DSLs in JavaScript

Defines a number of matchers.

Page 121: DSLs in JavaScript

Also the runner and the logger.

Page 122: DSLs in JavaScript
Page 123: DSLs in JavaScript

Some CSS to make it pretty.

Page 124: DSLs in JavaScript

~1500 lines of code.

Page 125: DSLs in JavaScript

Clean code.

Page 126: DSLs in JavaScript

Why would you use it?

Page 127: DSLs in JavaScript

Easier to read.

Page 128: DSLs in JavaScript

function testStringConcat() { assertEquals("Hello World", "Hello " + "World");} function testNumericConcat() { assertEquals(4, 2 + 2);}

Page 129: DSLs in JavaScript

var oTestCase = new YAHOO.tool.TestCase({ name: "Plus operation", testStringConcat : function () { YAHOO.util.Assert.areEqual("Hello World", "Hello " + "World", "Should be 'Hello World'"); },

testNumericConcat : function () { YAHOO.util.Assert.areEqual(4, 2 + 2, "2 + 2 should be 4"); }});

Page 130: DSLs in JavaScript

describe('Plus operation', { 'should concatenate two strings': function() { value_of("Hello " + "World").should_be("Hello World"); }, 'should add two numbers': function() { value_of(2 + 2).should_be(4); }})

Page 131: DSLs in JavaScript

Better? Worse?

Page 132: DSLs in JavaScript

What would you rather read 6 months later?

Page 133: DSLs in JavaScript

http://jania.pe.kr/aw/moin.cgi/JSSpec

Page 134: DSLs in JavaScript

ActiveRecord.js

Page 135: DSLs in JavaScript

JavaScript ORM.

Page 136: DSLs in JavaScript

Seriously?

Page 137: DSLs in JavaScript

Yep.

Page 138: DSLs in JavaScript

Let’s you use a DB from JavaScript.

Page 139: DSLs in JavaScript

Client or server ;)

Page 140: DSLs in JavaScript

Gears, AIR, W3C HTML5 SQL spec.

Page 141: DSLs in JavaScript

In-memory option too.

Page 142: DSLs in JavaScript

Some free finder methods.

Page 143: DSLs in JavaScript

Base find method.

Page 144: DSLs in JavaScript

Migrations.

Page 145: DSLs in JavaScript

ActiveRecord.Migrations.migrations = {   1: {   up: function(schema){   schema.createTable('one',{   a: '',       b: {            type: 'TEXT',            value: 'default'          } });   },   down: function(schema){   schema.dropTable('one');   }   }};  

Page 146: DSLs in JavaScript

Validations.

Page 147: DSLs in JavaScript

User.validatesPresenceOf('password'); 

Page 148: DSLs in JavaScript

More to come...

Page 149: DSLs in JavaScript

Supports basic relationships.

Page 150: DSLs in JavaScript

Early stages...

Page 151: DSLs in JavaScript

On GitHub, contribute!

Page 152: DSLs in JavaScript

http://activerecordjs.org/

Page 153: DSLs in JavaScript

Objective-J

Page 154: DSLs in JavaScript

Objective-C...for JS.

Page 155: DSLs in JavaScript

JavaScript superset.

Page 156: DSLs in JavaScript

Cheating...kind of.

Page 157: DSLs in JavaScript

Native and Objective-J classes.

Page 158: DSLs in JavaScript

Allows for instance methods.

Page 159: DSLs in JavaScript

Parameters are separated by colons.

Page 160: DSLs in JavaScript

- (void)setJobTitle: (CPString)aJobTitle company: (CPString)aCompany

Page 161: DSLs in JavaScript

Bracket notation for method calls.

Page 162: DSLs in JavaScript

[myPerson setJobTitle: "Founder" company: "280 North"];

Page 163: DSLs in JavaScript

Does allow for method_missing.

http://cappuccino.org/discuss/2008/12/08/on-leaky-abstractions-and-objective-j/

Page 164: DSLs in JavaScript

http://cappuccino.org/

Page 165: DSLs in JavaScript

Coffee DSL.

Page 166: DSLs in JavaScript

Lessons learned.

Page 167: DSLs in JavaScript

Viable option.

Page 168: DSLs in JavaScript

Widely used language.

Page 169: DSLs in JavaScript

Not necessarily easy.

Page 170: DSLs in JavaScript

Syntax isn’t as flexible.

Page 171: DSLs in JavaScript

Lots of reserved words.

Page 172: DSLs in JavaScript

Freakn ;

Page 173: DSLs in JavaScript

Hello prototype!

Page 174: DSLs in JavaScript

Verbs as first class citizens.

Page 175: DSLs in JavaScript

Object literals.

Page 176: DSLs in JavaScript

DSL vs. named parameters vs. constructor parms.

Page 177: DSLs in JavaScript

new Ajax.Request('/DesigningForAjax/validate', { asynchronous: true, method: "get", parameters: {zip: $F('zip'), city: $F('city'), state: $F('state')}, onComplete: function(request) { showResults(request.responseText); }})

Page 178: DSLs in JavaScript

Fail fast vs. fail silent.

Page 179: DSLs in JavaScript

Method chaining is trivial.

Page 180: DSLs in JavaScript

Context can be a challenge.

Page 181: DSLs in JavaScript

Documentation key.

Page 182: DSLs in JavaScript

PDoc, YUI Doc.

https://www.ohloh.net/p/pdoc_org

http://developer.yahoo.com/yui/yuidoc/

Page 183: DSLs in JavaScript

JavaScript isn’t a toy.

Page 184: DSLs in JavaScript

Not quite as flexible.

Page 185: DSLs in JavaScript

Plenty of metaprogramming goodness!

Page 186: DSLs in JavaScript

Questions?!?

Page 187: DSLs in JavaScript

Thanks!Please complete your surveys.