DSLs in JavaScript

Nathaniel T. Schutta

1
 Who am I?
• Nathaniel T. Schutta
http://www.ntschutta.com/jat/
• Foundations of Ajax & Pro Ajax and Java
Frameworks
• UI guy
• Author, speaker, teacher
• More than a couple of web apps

2
 The Plan
• DSLs?
• JavaScript? Seriously?
• Examples
• Lessons Learned

3
DS what now?

4
Domain Specific Language.

5
Every domain has its
own language.

6
“Part of the benefit of being
"into" something is having an
insider lexicon.”
Kathy Sierra
Creating Passionate Users

http://headrush.typepad.com/creating_passionate_users/2006/11/why_web_20_is_m.html
7
Three quarter, knock
down, soft cut.

8
Scattered, smothered,
covered.

9
Large skim mocha, no
whip no froth.

10
Not general purpose.

11
Simpler, more limited.

12
Expressive.

13
Terse.

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

15
Not a new idea.

16
Unix.

17
Little languages.

18
Lisp.

19
Build the language up...

20
Lots of attention today.

21
Rails!

22
Ruby is very hospitable.

23
So are other languages ;)

24
Internal vs. External.

25
Internal.

26
Within an existing language.

27
More approachable.

28
Simpler.

29
No grammars, parsing, etc.

30
Constrained by host
language.

31
Flexible syntax helps!

32
Ruby ;)

33
Fluent interface.

34
Embedded DSLs.

35
External.

36
Create your own language.

37
Grammars.

38
Need to parse.

39
ANTLR, yacc, JavaCC.

40
Harder.

41
More flexibility.

42
Language workbenches.

43
Tools for creating
new languages.

44
Internal are more
common today.

45
Language workbenches -
shift afoot?

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

47
Meta Programming System.

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

48
 Intentional Programming
- Charles Simonyi.

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

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

50
 Xtext.

http://wiki.eclipse.org/Xtext

51
Why are we seeing DSLs?

52
Easier to read.

53
Closer to the business.

54
Less friction, fewer
translations.

55
Biz can review...

56
“Yesterday, I did a code
review. With a CEO...
Together, we found three
improvements, and a couple of
outright bugs.”
Bruce Tate
Canaries in the Coal Mine

http://blog.rapidred.com/articles/2006/08/30/canaries-in-the-coal-mine
57
Don’t expect them to
write it though!

58
Will we all write DSLs?

59
No.

60
Doesn’t mean we
can’t use them.

61
General advice on
building a DSL:

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

63
Even on a napkin!

64
Use valid syntax.

65
Iterate, iterate, iterate.

66
 Work on the
implementation.

67
 http://martinfowler.com/dslwip/

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

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

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

68
Not a toy!

69
JavaScript has been
around for a while.

70
Many dismissed it as
“toy for designers.”

71
It’s not the 90s anymore.

72
We have tools!

73
Developers care again!

74
Ajax.

75
Suffers from the “EJB issue.”

76
Powerful language.

77
“The Next Big Language”

http://steve-yegge.blogspot.com/
2007/02/next-big-language.html
78
Runs on lots of platforms
- including the JVM.

79
Ruby like?

80
“Rhino on Rails”

http://steve-yegge.blogspot.com/
2007/06/rhino-on-rails.html
81
 Orto - JVM written
in JavaScript.

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

82
 JS-909.

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

83
84
JSSpec.

85
JavaScript testing DSL.

86
JSSpec? Really?

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

88
BDD for JS.

89
Like RSpec.

90
Not quite as elegant.

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

92
value_of?

93
"Hello".should_be("Hello");

94
Sorry.

95
No method missing.

96
We’d need to modify
Object’s prototype.

97
Generally a no-no.

98
Though it’s been done.

http://json.org/json.js
99
Null, undefined objects.

100
Design choice - consistency.

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

102
 describe - global
defined in JSSpec.js.

103
Creates a new
JSSpec.Spec()...

104
And adds it to an
array of specs.

105
 value_of - global
defined in JSSpec.js.

106
value_of - converts parm
to JSSpec.DSL.Subject

107
Handles arbitrary objects.

108
JSSpec.DSL.Subject
contains should_*.

109
Added to prototype.

110
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;
}
}

111
this.target?

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

113
this in JS is...interesting.

114
Why is everything
JSSpec.Foo?

115
JS lacks packages
or namespaces.

116
Keeps it clean.

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

118
Not just a DSL of course.

119
Defines a number
of matchers.

120
Also the runner
and the logger.

121
122
Some CSS to make it pretty.

123
~1500 lines of code.

124
Clean code.

125
Why would you use it?

126
Easier to read.

127
function testStringConcat() {
assertEquals("Hello World", "Hello " + "World");
}

function testNumericConcat() {
assertEquals(4, 2 + 2);
}

128
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");
}
});

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

130
Better? Worse?

131
What would you rather
read 6 months later?

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

133
ActiveRecord.js

134
JavaScript ORM.

135
Seriously?

136
Yep.

137
Let’s you use a DB
from JavaScript.

138
Client or server ;)

139
Gears, AIR, W3C
HTML5 SQL spec.

140
In-memory option too.

141
Some free finder methods.

142
Base find method.

143
Migrations.

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

146
User.validatesPresenceOf('password');

147
More to come...

148
Supports basic relationships.

149
Early stages...

150
On GitHub, contribute!

151
http://activerecordjs.org/

152
Objective-J

153
Objective-C...for JS.

154
JavaScript superset.

155
Cheating...kind of.

156
 Native and
Objective-J classes.

157
Allows for instance methods.

158
 Parameters are
separated by colons.

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

160
Bracket notation for
method calls.

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

162
 Does allow for
method_missing.

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

164
Coffee DSL.

165
Lessons learned.

166
Viable option.

167
Widely used language.

168
Not necessarily easy.

169
Syntax isn’t as flexible.

170
Lots of reserved words.

171
Freakn ;

172
Hello prototype!

173
Verbs as first class citizens.

174
Object literals.

175
DSL vs. named parameters
vs. constructor parms.

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

177
Fail fast vs. fail silent.

178
Method chaining is trivial.

179
Context can be a challenge.

180
Documentation key.

181
 PDoc,YUI Doc.

https://www.ohloh.net/p/pdoc_org
http://developer.yahoo.com/yui/yuidoc/
182
JavaScript isn’t a toy.

183
Not quite as flexible.

184
Plenty of metaprogramming
goodness!

185
Questions?!?

186
 Thanks!
Please complete your surveys.

187