DSLs in JavaScript Nathaniel T. Schutta 1 Who am I? Nathaniel T. - - PowerPoint PPT Presentation

▶
dsls in javascript
SMART_READER_LITE
LIVE PREVIEW

DSLs in JavaScript Nathaniel T. Schutta 1 Who am I? Nathaniel T. - - PowerPoint PPT Presentation

Aug 29, 2023 474 likes •2.37k views

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

slide-1
SLIDE 1

DSLs in JavaScript

Nathaniel T. Schutta

1

slide-2
SLIDE 2

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

slide-3
SLIDE 3

The Plan

  • DSLs?
  • JavaScript? Seriously?
  • Examples
  • Lessons Learned

3

slide-4
SLIDE 4

DS what now?

4

slide-5
SLIDE 5

Domain Specific Language.

5

slide-6
SLIDE 6

Every domain has its

  • wn language.

6

slide-7
SLIDE 7

“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

slide-8
SLIDE 8

Three quarter, knock down, soft cut.

8

slide-9
SLIDE 9

Scattered, smothered, covered.

9

slide-10
SLIDE 10

Large skim mocha, no whip no froth.

10

slide-11
SLIDE 11

Not general purpose.

11

slide-12
SLIDE 12

Simpler, more limited.

12

slide-13
SLIDE 13

Expressive.

13

slide-14
SLIDE 14

Terse.

14

slide-15
SLIDE 15

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

15

slide-16
SLIDE 16

Not a new idea.

16

slide-17
SLIDE 17

Unix.

17

slide-18
SLIDE 18

Little languages.

18

slide-19
SLIDE 19

Lisp.

19

slide-20
SLIDE 20

Build the language up...

20

slide-21
SLIDE 21

Lots of attention today.

21

slide-22
SLIDE 22

Rails!

22

slide-23
SLIDE 23

Ruby is very hospitable.

23

slide-24
SLIDE 24

So are other languages ;)

24

slide-25
SLIDE 25

Internal vs. External.

25

slide-26
SLIDE 26

Internal.

26

slide-27
SLIDE 27

Within an existing language.

27

slide-28
SLIDE 28

More approachable.

28

slide-29
SLIDE 29

Simpler.

29

slide-30
SLIDE 30

No grammars, parsing, etc.

30

slide-31
SLIDE 31

Constrained by host language.

31

slide-32
SLIDE 32

Flexible syntax helps!

32

slide-33
SLIDE 33

Ruby ;)

33

slide-34
SLIDE 34

Fluent interface.

34

slide-35
SLIDE 35

Embedded DSLs.

35

slide-36
SLIDE 36

External.

36

slide-37
SLIDE 37

Create your own language.

37

slide-38
SLIDE 38

Grammars.

38

slide-39
SLIDE 39

Need to parse.

39

slide-40
SLIDE 40

ANTLR, yacc, JavaCC.

40

slide-41
SLIDE 41

Harder.

41

slide-42
SLIDE 42

More flexibility.

42

slide-43
SLIDE 43

Language workbenches.

43

slide-44
SLIDE 44

Tools for creating new languages.

44

slide-45
SLIDE 45

Internal are more common today.

45

slide-46
SLIDE 46

Language workbenches - shift afoot?

46

slide-47
SLIDE 47

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

47

slide-48
SLIDE 48

Meta Programming System.

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

48

slide-49
SLIDE 49

Intentional Programming

  • Charles Simonyi.

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

49

slide-50
SLIDE 50

Oslo.

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

50

slide-51
SLIDE 51

Xtext.

http://wiki.eclipse.org/Xtext

51

slide-52
SLIDE 52

Why are we seeing DSLs?

52

slide-53
SLIDE 53

Easier to read.

53

slide-54
SLIDE 54

Closer to the business.

54

slide-55
SLIDE 55

Less friction, fewer translations.

55

slide-56
SLIDE 56

Biz can review...

56

slide-57
SLIDE 57

“Yesterday, I did a code

  • review. With a CEO...

Together, we found three improvements, and a couple of

  • utright bugs.”

Bruce Tate Canaries in the Coal Mine

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

57

slide-58
SLIDE 58

Don’t expect them to write it though!

58

slide-59
SLIDE 59

Will we all write DSLs?

59

slide-60
SLIDE 60

No.

60

slide-61
SLIDE 61

Doesn’t mean we can’t use them.

61

slide-62
SLIDE 62

General advice on building a DSL:

62

slide-63
SLIDE 63

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

63

slide-64
SLIDE 64

Even on a napkin!

64

slide-65
SLIDE 65

Use valid syntax.

65

slide-66
SLIDE 66

Iterate, iterate, iterate.

66

slide-67
SLIDE 67

Work on the implementation.

67

slide-68
SLIDE 68

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

68

slide-69
SLIDE 69

Not a toy!

69

slide-70
SLIDE 70

JavaScript has been around for a while.

70

slide-71
SLIDE 71

Many dismissed it as “toy for designers.”

71

slide-72
SLIDE 72

It’s not the 90s anymore.

72

slide-73
SLIDE 73

We have tools!

73

slide-74
SLIDE 74

Developers care again!

74

slide-75
SLIDE 75

Ajax.

75

slide-76
SLIDE 76

Suffers from the “EJB issue.”

76

slide-77
SLIDE 77

Powerful language.

77

slide-78
SLIDE 78

“The Next Big Language”

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

78

slide-79
SLIDE 79

Runs on lots of platforms

  • including the JVM.

79

slide-80
SLIDE 80

Ruby like?

80

slide-81
SLIDE 81

“Rhino on Rails”

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

81

slide-82
SLIDE 82

Orto - JVM written in JavaScript.

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

82

slide-83
SLIDE 83

JS-909.

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

83

slide-84
SLIDE 84

84

slide-85
SLIDE 85

JSSpec.

85

slide-86
SLIDE 86

JavaScript testing DSL.

86

slide-87
SLIDE 87

JSSpec? Really?

87

slide-88
SLIDE 88

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

88

slide-89
SLIDE 89

BDD for JS.

89

slide-90
SLIDE 90

Like RSpec.

90

slide-91
SLIDE 91

Not quite as elegant.

91

slide-92
SLIDE 92

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

slide-93
SLIDE 93

value_of?

93

slide-94
SLIDE 94

"Hello".should_be("Hello");

94

slide-95
SLIDE 95

Sorry.

95

slide-96
SLIDE 96

No method missing.

96

slide-97
SLIDE 97

We’d need to modify Object’s prototype.

97

slide-98
SLIDE 98

Generally a no-no.

98

slide-99
SLIDE 99

Though it’s been done.

http://json.org/json.js

99

slide-100
SLIDE 100

Null, undefined objects.

100

slide-101
SLIDE 101

Design choice - consistency.

101

slide-102
SLIDE 102

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

slide-103
SLIDE 103

describe - global defined in JSSpec.js.

103

slide-104
SLIDE 104

Creates a new JSSpec.Spec()...

104

slide-105
SLIDE 105

And adds it to an array of specs.

105

slide-106
SLIDE 106

value_of - global defined in JSSpec.js.

106

slide-107
SLIDE 107

value_of - converts parm to JSSpec.DSL.Subject

107

slide-108
SLIDE 108

Handles arbitrary objects.

108

slide-109
SLIDE 109

JSSpec.DSL.Subject contains should_*.

109

slide-110
SLIDE 110

Added to prototype.

110

slide-111
SLIDE 111

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

slide-112
SLIDE 112

this.target?

112

slide-113
SLIDE 113

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

113

slide-114
SLIDE 114

this in JS is...interesting.

114

slide-115
SLIDE 115

Why is everything JSSpec.Foo?

115

slide-116
SLIDE 116

JS lacks packages

  • r namespaces.

116

slide-117
SLIDE 117

Keeps it clean.

117

slide-118
SLIDE 118

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

118

slide-119
SLIDE 119

Not just a DSL of course.

119

slide-120
SLIDE 120

Defines a number

  • f matchers.

120

slide-121
SLIDE 121

Also the runner and the logger.

121

slide-122
SLIDE 122

122

slide-123
SLIDE 123

Some CSS to make it pretty.

123

slide-124
SLIDE 124

~1500 lines of code.

124

slide-125
SLIDE 125

Clean code.

125

slide-126
SLIDE 126

Why would you use it?

126

slide-127
SLIDE 127

Easier to read.

127

slide-128
SLIDE 128

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

128

slide-129
SLIDE 129

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

slide-130
SLIDE 130

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

slide-131
SLIDE 131

Better? Worse?

131

slide-132
SLIDE 132

What would you rather read 6 months later?

132

slide-133
SLIDE 133

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

133

slide-134
SLIDE 134

ActiveRecord.js

134

slide-135
SLIDE 135

JavaScript ORM.

135

slide-136
SLIDE 136

Seriously?

136

slide-137
SLIDE 137

Yep.

137

slide-138
SLIDE 138

Let’s you use a DB from JavaScript.

138

slide-139
SLIDE 139

Client or server ;)

139

slide-140
SLIDE 140

Gears, AIR, W3C HTML5 SQL spec.

140

slide-141
SLIDE 141

In-memory option too.

141

slide-142
SLIDE 142

Some free finder methods.

142

slide-143
SLIDE 143

Base find method.

143

slide-144
SLIDE 144

Migrations.

144

slide-145
SLIDE 145

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

145

slide-146
SLIDE 146

Validations.

146

slide-147
SLIDE 147

User.validatesPresenceOf('password');

147

slide-148
SLIDE 148

More to come...

148

slide-149
SLIDE 149

Supports basic relationships.

149

slide-150
SLIDE 150

Early stages...

150

slide-151
SLIDE 151

On GitHub, contribute!

151

slide-152
SLIDE 152

http://activerecordjs.org/

152

slide-153
SLIDE 153

Objective-J

153

slide-154
SLIDE 154

Objective-C...for JS.

154

slide-155
SLIDE 155

JavaScript superset.

155

slide-156
SLIDE 156

Cheating...kind of.

156

slide-157
SLIDE 157

Native and Objective-J classes.

157

slide-158
SLIDE 158

Allows for instance methods.

158

slide-159
SLIDE 159

Parameters are separated by colons.

159

slide-160
SLIDE 160
  • (void)setJobTitle: (CPString)aJobTitle

company: (CPString)aCompany

160

slide-161
SLIDE 161

Bracket notation for method calls.

161

slide-162
SLIDE 162

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

162

slide-163
SLIDE 163

Does allow for method_missing.

http://cappuccino.org/discuss/2008/12/08/

  • n-leaky-abstractions-and-objective-j/

163

slide-164
SLIDE 164

http://cappuccino.org/

164

slide-165
SLIDE 165

Coffee DSL.

165

slide-166
SLIDE 166

Lessons learned.

166

slide-167
SLIDE 167

Viable option.

167

slide-168
SLIDE 168

Widely used language.

168

slide-169
SLIDE 169

Not necessarily easy.

169

slide-170
SLIDE 170

Syntax isn’t as flexible.

170

slide-171
SLIDE 171

Lots of reserved words.

171

slide-172
SLIDE 172

Freakn ;

172

slide-173
SLIDE 173

Hello prototype!

173

slide-174
SLIDE 174

Verbs as first class citizens.

174

slide-175
SLIDE 175

Object literals.

175

slide-176
SLIDE 176

DSL vs. named parameters

  • vs. constructor parms.

176

slide-177
SLIDE 177

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

  • nComplete: function(request) {

showResults(request.responseText); } })

177

slide-178
SLIDE 178

Fail fast vs. fail silent.

178

slide-179
SLIDE 179

Method chaining is trivial.

179

slide-180
SLIDE 180

Context can be a challenge.

180

slide-181
SLIDE 181

Documentation key.

181

slide-182
SLIDE 182

PDoc, YUI Doc.

https://www.ohloh.net/p/pdoc_org http://developer.yahoo.com/yui/yuidoc/

182

slide-183
SLIDE 183

JavaScript isn’t a toy.

183

slide-184
SLIDE 184

Not quite as flexible.

184

slide-185
SLIDE 185

Plenty of metaprogramming goodness!

185

slide-186
SLIDE 186

Questions?!?

186

slide-187
SLIDE 187

Thanks!

Please complete your surveys.

187