This repository has been archived by the owner on Sep 25, 2018. It is now read-only.
/
atom.xml
225 lines (189 loc) · 21 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[SCION]]></title>
<link href="http://jbeard4.github.com/SCION/atom.xml" rel="self"/>
<link href="http://jbeard4.github.com/SCION/"/>
<updated>2013-02-22T22:12:17-05:00</updated>
<id>http://jbeard4.github.com/SCION/</id>
<author>
<name><![CDATA[Jacob Beard]]></name>
<email><![CDATA[jbeard4@cs.mcgill.ca]]></email>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[The next step in the evolution of SCION, a.k.a. scion-ng, a.k.a. SCION-core, a.k.a. SCION 1.0.0]]></title>
<link href="http://jbeard4.github.com/SCION/blog/2013/02/22/the-next-step-in-the-evolution-of-scion/"/>
<updated>2013-02-22T10:19:00-05:00</updated>
<id>http://jbeard4.github.com/SCION/blog/2013/02/22/the-next-step-in-the-evolution-of-scion</id>
<content type="html"><![CDATA[<p><em>tl;dr: The next version of SCION is going to have real stack traces for SCXML, and an API by which js devs can specify the Statecharts model as a simple, declarative JavaScript object.</em></p>
<p>I have started this blog for SCION news and updates because I wanted to provide a fuller picture of the major architectural changes that are occurring in SCION, and the motivation for making these changes. I’ll refer to this next major iteration of SCION as “SCION-ng” (for “next generation”), although the branch name on GitHub is “core”, and the semantic versioning number has been rev’d to 1.0.0, so it could be referred to by any of these attributes.</p>
<h2>Deficiences in SCION</h2>
<p>So far, I think the SCION project has been successful in reaching its initial goals of developing a fast, robust, portable, embeddable SCXML interpreter. SCION is being used in production and provides an effective solution for many developers working with SCXML.</p>
<p>However, in my mind SCION has had two major deficiencies. The first is that SCION lacks traceability, which is to say, if an exception is thrown during execution of an SCXML document originating from some JavaScript action code within that document, SCION will not provide a meaningful stack trace with line and column numbers tracing back to the original source SCXML document. Instead, it provides the line and column number of the JavaScript code generated by SCION, which is something that is private and internal to SCION and not meant to be user-visible, essentially making the resulting stack trace a useless garbage value. The reason for this problem is that SCION relies on the XML DOM API for document parsing, and DOM does not report the original line and column numbers of the parsed elements. So, the first goal of SCION-ng is to fix this problem and bring real stack traces to SCION.</p>
<p>The second major deficiency in SCION is its reliance on SCXML, and subsequently, an XML syntax for specifying Statecharts models. One of the original goals of SCION was that it would be useful to Web front-end developers for managing complex UI state (this subject is actually the second half of my soon-to-be-published Master thesis). However, based on my conversations with many front-end developers, I found that relying on an XML syntax was virtually a non-starter. Note that I work as a Web front-end developer professionally, and I happen to enjoy working with various forms of executable XML (just look at my Google Summer of Code 2010 project, <a href="http://commons.apache.org/sandbox/gsoc/2010/scxml-js/">scxml-js</a>, to see how much I like XSLT!), but I recognize that I am very much in the minority here. Front-end developers would prefer to work with either a pure-JSON syntax, or, alternatively, a simple JavaScript object. So, to make SCION more useful and accessible to Web front-end developers, the second goal of SCION-ng is to allow developers to specify the Statecharts model as a simple, declarative JavaScript object literal; entry, exit, and transition actions will simply be JavaScript functions, or arrays of JavaScript functions attached to onEntry/onExit/onTransition properties of the object; and the SCXML datamodel will simply be local variables kept in a closure using the JavaScript module pattern. These data structures and these concepts are a front-end developer’s bread and butter, and it makes perfect sense to create a lean Statecharts interpreter that maximally reuses these concepts.</p>
<h2>Solution and Benefits</h2>
<p>In order to accomplish these goals, then, I have rearchitected SCION into two separate modules: SCION-core and SCION-SCXML. SCION-core will be the core state machine engine, which accepts a simple JavaScript object as the Statecharts model and then interprets it according to SCION semantics. SCION-SCXML, on the other hand, will be a lightweight compiler which accepts an SCXML document as input, then parses it using the excellent <a href="https://github.com/isaacs/sax-js">sax-js</a> XML parser, preserving line and column numbers in the process, and generates nicely formatted JavaScript modules as output, with line and column numbers embedded in the generated function name, so that if an exception occurs during execution, it will give you a meaningful stack trace. The generated modules return a Statecharts model object which can be fed into SCION-core. SCION-SCXML will depend on SCION-core, but not vice-versa.</p>
<p>SCION-SCXML will be able to perform this SCXML-to-JavaScript compilation either ahead-of-time, or on the fly at runtime in a way that is transparent to the developer. In fact, SCION-SCXML will be mostly backwards-compatible with the current version of SCION. I say “mostly”, because I’m planning to change or remove some features which were originally useful for research purposes, but were never used much and are now a source of additional complexity. I’ll write in more detail about these features in a future post. The SCION API should remain unchanged.</p>
<p>There will be additional benefits to this refactoring effort as well:</p>
<ul>
<li>It will be possible to entirely eliminate SCION’s somewhat brittle <a href="https://github.com/jbeard4/SCION/blob/master/lib/base-platform/dom.js">DOM compatibility layer</a>, which should mean greater reliability across environments.</li>
<li>Stripping SCION-core down to just the state machine interpreter made it feasible to combine everything into one UMD module (it’s under 1000 LOC, including comments, which I think is quite reasonable for a single module). This means it will be trivial to install and use SCION from CommonJS, AMD, or Vanilla JS - no build step or compatibility shims required! It also means that Google Closure compiler can optimize things really well, leading to the next point…</li>
<li>SCION-core is super-small - only 2.3kb after being minified and gzipped! This will give Web developers a lot of expressive power in a very tiny package.</li>
<li>Finally, being able to specify a Statecharts model using a simple JavaScript object has a lot of exciting prospects regarding dynamic generation of Statecharts models at runtime. I think this is a capability with many potential applications, and this is something I’ll write more about in a future post.</li>
</ul>
<h2>Examples</h2>
<p>So, that’s a lot of talk about architecture, let’s look at some code. All of these examples have been auto-generated by SCION-SCXML from the <a href="https://github.com/jbeard4/scxml-test-framework">scxml-test-framework</a>, so they are not the most user-friendly, but should give you a sense of how to specify Statecharts models for SCION-core, and the compiled code output of SCION-SCXML.</p>
<p>Here’s an example based on test <a href="https://github.com/jbeard4/scxml-test-framework/blob/master/test/basic/basic1.scxml">basic/basic1.scxml</a>:</p>
<figure class='code'><figcaption><span> (basic1.sc.json)</span> <a href='http://jbeard4.github.com/SCION/downloads/code/test/basic/basic1.sc.json'>download</a></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='json'><span class='line'><span class="p">{</span>
</span><span class='line'> <span class="nt">"states"</span><span class="p">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="nt">"id"</span><span class="p">:</span> <span class="s2">"a"</span><span class="p">,</span>
</span><span class='line'> <span class="nt">"transitions"</span><span class="p">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="nt">"target"</span><span class="p">:</span> <span class="s2">"b"</span><span class="p">,</span>
</span><span class='line'> <span class="nt">"event"</span><span class="p">:</span> <span class="s2">"t"</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="nt">"id"</span><span class="p">:</span> <span class="s2">"b"</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>As you can see, it’s just a simple JSON file. This can be passed directly into the SCION constructor like so:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./basic1.sc.json'</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">sc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">scion</span><span class="p">.</span><span class="nx">Statechart</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
</span><span class='line'><span class="nx">sc</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>
<p>There is a limited subset of SCXML that can be described by as pure JSON and executed by SCION. If there is a datamodel or action code, then a pure-json representation is not sufficient, and so a regular JavaScript module is used instead. The naming conventions for JSON and JavaScript files containing Statechart models is *.sc.json and *.sc.js.</p>
<p>Here’s an example compiled from test <a href="https://github.com/jbeard4/scxml-test-framework/blob/master/test/script/test0.scxml">script/test0.scxml</a> that shows how to execute actions and manipulate data:</p>
<figure class='code'><figcaption><span> (test0.sc.js)</span> <a href='http://jbeard4.github.com/SCION/downloads/code/test/script/test0.sc.js'>download</a></figcaption>
<div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
</pre></td><td class='code'><pre><code class='js'><span class='line'><span class="c1">//Generated on Thursday, February 21, 2013 19:56:28 by the SCION SCXML compiler</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">x</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">$script_line_27_column_20</span><span class="p">(</span><span class="nx">_event</span><span class="p">,</span> <span class="nx">In</span><span class="p">,</span> <span class="nx">_sessionId</span><span class="p">,</span> <span class="nx">_name</span><span class="p">,</span> <span class="nx">_ioprocessors</span><span class="p">,</span> <span class="nx">_x</span><span class="p">){</span>
</span><span class='line'> <span class="nx">x</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">function</span> <span class="nx">$cond_line_34_column_59</span><span class="p">(</span><span class="nx">_event</span><span class="p">,</span> <span class="nx">In</span><span class="p">,</span> <span class="nx">_sessionId</span><span class="p">,</span> <span class="nx">_name</span><span class="p">,</span> <span class="nx">_ioprocessors</span><span class="p">,</span> <span class="nx">_x</span><span class="p">){</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">x</span> <span class="o">===</span> <span class="mi">100</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="s2">"states"</span><span class="o">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"intitial1"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"transitions"</span><span class="o">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"target"</span><span class="o">:</span> <span class="s2">"a"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"onTransition"</span><span class="o">:</span> <span class="nx">$script_line_27_column_20</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"a"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"transitions"</span><span class="o">:</span> <span class="p">[</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"target"</span><span class="o">:</span> <span class="s2">"b"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"event"</span><span class="o">:</span> <span class="s2">"t"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"cond"</span><span class="o">:</span> <span class="nx">$cond_line_34_column_59</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"target"</span><span class="o">:</span> <span class="s2">"f"</span><span class="p">,</span>
</span><span class='line'> <span class="s2">"event"</span><span class="o">:</span> <span class="s2">"t"</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"b"</span>
</span><span class='line'> <span class="p">},</span>
</span><span class='line'> <span class="p">{</span>
</span><span class='line'> <span class="s2">"id"</span><span class="o">:</span> <span class="s2">"f"</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'> <span class="p">]</span>
</span><span class='line'><span class="p">};</span>
</span></code></pre></td></tr></table></div></figure>
<p>You could use this model as follows:</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">model</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'./test0.sc'</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">sc</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">scion</span><span class="p">.</span><span class="nx">Statechart</span><span class="p">(</span><span class="nx">model</span><span class="p">);</span>
</span><span class='line'><span class="nx">sc</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>
<p>More examples can be found in the <a href="https://github.com/jbeard4/SCION/tree/core/test">tests directory of the “core” branch of SCION</a>.</p>
<h2>Implementation Status</h2>
<p>Documentation still needs to be written for SCION-core, but it passes all the tests from the scxml-test-framework, and so I feel it is ready to be used. It exists as a single <a href="https://github.com/umdjs/umd">UMD</a> module <a href="https://github.com/jbeard4/SCION/blob/core/lib/scion.js">here</a>, in the “core” branch of SCION.</p>
<p>SCION-SCXML still needs some more work: it currently only supports ahead-of-time compilation using node.js, so I need to make it portable and support on-the-fly compilation. The code lives <a href="https://github.com/jbeard4/SCION-SCXML">here</a>.</p>
<p>I’m planning to continue working in the “core” branch of SCION until SCION-SCXML is fully compatible with the current SCION API. When that’s done, I’ll publish a final release of the SCION 0.0.* branch. I’ll then merge the SCION “core” branch back into “master”, and publish a 1.0.0 release of SCION-ng.</p>
<p>I welcome your questions and comments.</p>
]]></content>
</entry>
</feed>