https://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&feed=atom&action=historyHaskell in web browser/Basics - Revision history2024-03-29T05:03:48ZRevision history for this page on the wikiMediaWiki 1.35.5https://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=44359&oldid=prevHenk-Jan van Tuyl: Updated the link to the description of window.setTimeout2012-02-06T22:28:06Z<p>Updated the link to the description of window.setTimeout</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:28, 6 February 2012</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 94:</td>
<td colspan="2" class="diff-lineno">Line 94:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Threads emulation====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Threads emulation====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Execution of Javascript in Web browser is [http://splintor.wordpress.com/2006/04/26/javascript-is-single-threaded/ always] single-threaded. It is however possible and useful to emulate multi-threaded execution with <code>[<del class="diffchange diffchange-inline">http</del>://developer.mozilla.org/en/<del class="diffchange diffchange-inline">docs</del>/<del class="diffchange diffchange-inline">DOM:</del>window.setTimeout window.setTimeout]</code> method.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Execution of Javascript in Web browser is [http://splintor.wordpress.com/2006/04/26/javascript-is-single-threaded/ always] single-threaded. It is however possible and useful to emulate multi-threaded execution with <code>[<ins class="diffchange diffchange-inline">https</ins>://developer.mozilla.org/en/<ins class="diffchange diffchange-inline">DOM</ins>/window.setTimeout window.setTimeout]</code> method.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Javascript threads available to Haskell programs have must of "real" threads features stripped off: there are no thread identifiers, threads must always explicitly yield execution, time-wise threads scheduling is very loose, etc.</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Javascript threads available to Haskell programs have must of "real" threads features stripped off: there are no thread identifiers, threads must always explicitly yield execution, time-wise threads scheduling is very loose, etc.</div></td>
</tr>
</table>Henk-Jan van Tuylhttps://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=44358&oldid=prevHenk-Jan van Tuyl: /* DOM */ Updated the link to HaskellDirect2012-02-06T22:24:20Z<p><span dir="auto"><span class="autocomment">DOM: </span> Updated the link to HaskellDirect</span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 22:24, 6 February 2012</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 3:</td>
<td colspan="2" class="diff-lineno">Line 3:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Formalized description of DOM interfaces is provided by [http://www.w3.org the Web Consortium] in the form of [http://www.omg.org/gettingstarted/omg_idl.htm OMG IDL] definitions. An example of such definitions can be found [http://www.w3.org/TR/DOM-Level-2-HTML/idl-definitions.html here].</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Formalized description of DOM interfaces is provided by [http://www.w3.org the Web Consortium] in the form of [http://www.omg.org/gettingstarted/omg_idl.htm OMG IDL] definitions. An example of such definitions can be found [http://www.w3.org/TR/DOM-Level-2-HTML/idl-definitions.html here].</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>It was necessary to convert these definitions to Haskell function declarations to make them available to Haskell programs for Web browser. The special utility, <code>domconv</code> is part of the Javascript backend toolset. The utility is based on [http://haskell.org/hdirect/ <del class="diffchange diffchange-inline">H/Direct</del>], although most of non-IDL related functionality was stripped, and Haskell source generator was completely rewritten. In this section, we discuss the logic of IDL to Haskell conversion.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>It was necessary to convert these definitions to Haskell function declarations to make them available to Haskell programs for Web browser. The special utility, <code>domconv</code> is part of the Javascript backend toolset. The utility is based on [http://<ins class="diffchange diffchange-inline">hackage.</ins>haskell.org<ins class="diffchange diffchange-inline">/package</ins>/hdirect/ <ins class="diffchange diffchange-inline">HaskellDirect</ins>], although most of non-IDL related functionality was stripped, and Haskell source generator was completely rewritten. In this section, we discuss the logic of IDL to Haskell conversion.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell type classes====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell type classes====</div></td>
</tr>
</table>Henk-Jan van Tuylhttps://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=20298&oldid=prevDimitryGolubovsky: classes -> type classes for clarity2008-03-28T11:49:52Z<p>classes -> type classes for clarity</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 11:49, 28 March 2008</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 5:</td>
<td colspan="2" class="diff-lineno">Line 5:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>It was necessary to convert these definitions to Haskell function declarations to make them available to Haskell programs for Web browser. The special utility, <code>domconv</code> is part of the Javascript backend toolset. The utility is based on [http://haskell.org/hdirect/ H/Direct], although most of non-IDL related functionality was stripped, and Haskell source generator was completely rewritten. In this section, we discuss the logic of IDL to Haskell conversion.</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>It was necessary to convert these definitions to Haskell function declarations to make them available to Haskell programs for Web browser. The special utility, <code>domconv</code> is part of the Javascript backend toolset. The utility is based on [http://haskell.org/hdirect/ H/Direct], although most of non-IDL related functionality was stripped, and Haskell source generator was completely rewritten. In this section, we discuss the logic of IDL to Haskell conversion.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell classes====</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell<ins class="diffchange diffchange-inline"> type</ins> classes====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Web Consortium's DOM definitions are presented as a hierarchy of interfaces. For example, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 Node] interface is a parent to the majority of other interfaces, such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document Document] (direct ancestor), or [http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037 HTMLElement] (not a direct ancestor, but ''HTMLElement'' should inherit all properties and methods of ''Node'').</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Web Consortium's DOM definitions are presented as a hierarchy of interfaces. For example, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 Node] interface is a parent to the majority of other interfaces, such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document Document] (direct ancestor), or [http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037 HTMLElement] (not a direct ancestor, but ''HTMLElement'' should inherit all properties and methods of ''Node'').</div></td>
</tr>
</table>DimitryGolubovskyhttps://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=20245&oldid=prevDimitryGolubovsky: Typo2008-03-26T03:30:58Z<p>Typo</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 03:30, 26 March 2008</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 102:</td>
<td colspan="2" class="diff-lineno">Line 102:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====CPS and threads====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====CPS and threads====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Continuation|Continuation Passing Style]] allows for very efficient implementation of threads: in fact, switching context between threads is merely saving a continuation of currently executing thread in some static memory object, and evaluating continuation of (resuming) <del class="diffchange diffchange-inline">an</del> thread that was similarly suspended earlier.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Continuation|Continuation Passing Style]] allows for very efficient implementation of threads: in fact, switching context between threads is merely saving a continuation of currently executing thread in some static memory object, and evaluating continuation of (resuming) <ins class="diffchange diffchange-inline">a</ins> thread that was similarly suspended earlier.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Message passing between threads====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Message passing between threads====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Threads may pass messages to each other, using [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html#t%3AMSGBOX Message Boxes]. Sending messages is asynchronous (although rescheduling of threads execution occurs to resume the receiving thread). Sending a message may fail if there is a message in the ''Message Box'' (no message buffering). Receiving messages is always a blocking operation. Receiving a message may fail if there is already a thread waiting on the ''Message Box''. Therefore more than one thread may send messages to the same ''Message Box'' (but sending all messages is not guaranteed unless result of sending is checked), but more than one thread may not receive messages from the same ''Message Box''.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Threads may pass messages to each other, using [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html#t%3AMSGBOX Message Boxes]. Sending messages is asynchronous (although rescheduling of threads execution occurs to resume the receiving thread). Sending a message may fail if there is a message in the ''Message Box'' (no message buffering). Receiving messages is always a blocking operation. Receiving a message may fail if there is already a thread waiting on the ''Message Box''. Therefore more than one thread may send messages to the same ''Message Box'' (but sending all messages is not guaranteed unless result of sending is checked<ins class="diffchange diffchange-inline">, and appropriate action taken if <code>sendMsg</code> fails</ins>), but more than one thread may not receive messages from the same ''Message Box''.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Events handling====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Events handling====</div></td>
</tr>
</table>DimitryGolubovskyhttps://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=20244&oldid=prevDimitryGolubovsky: Typos2008-03-26T03:25:01Z<p>Typos</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 03:25, 26 March 2008</td>
</tr><tr>
<td colspan="2" class="diff-lineno">Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell classes====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====DOM interfaces vs. Haskell classes====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Web <del class="diffchange diffchange-inline">Consortuim</del>'s DOM definitions are presented as a hierarchy of interfaces. For example, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 Node] interface is a parent to the majority of other interfaces, such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document Document] (direct ancestor), or [http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037 HTMLElement] (not a direct ancestor, but ''HTMLElement'' should inherit all properties and methods of ''Node'').</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Web <ins class="diffchange diffchange-inline">Consortium</ins>'s DOM definitions are presented as a hierarchy of interfaces. For example, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 Node] interface is a parent to the majority of other interfaces, such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document Document] (direct ancestor), or [http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037 HTMLElement] (not a direct ancestor, but ''HTMLElement'' should inherit all properties and methods of ''Node'').</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is achieved by defining Haskell type classes whose hierarchy repeats the hierarchy of DOM interfaces. Thus, we have the [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACNode CNode] and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACDocument CDocument] classes. For each DOM interface, also a phantom data type is defined: [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATNode TNode], and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATDocument TDocument] correspondingly. Phantom types are assigned to concrete values (references to DOM objects) while type classes are used to constrain types of parameters of functions working with those DOM objects. The ''CDocument'' class is defined as:</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>This is achieved by defining Haskell type classes whose hierarchy repeats the hierarchy of DOM interfaces. Thus, we have the [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACNode CNode] and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACDocument CDocument] classes. For each DOM interface, also a phantom data type is defined: [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATNode TNode], and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATDocument TDocument] correspondingly. Phantom types are assigned to concrete values (references to DOM objects) while type classes are used to constrain types of parameters of functions working with those DOM objects. The ''CDocument'' class is defined as:</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Line 88:</td>
<td colspan="2" class="diff-lineno">Line 88:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></haskell></div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></haskell></div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>which creates a DOM node tagged with <del class="diffchange diffchange-inline">< </del>DIV<del class="diffchange diffchange-inline"> ></del>. Such maker functions are defined for most of HTML elements. Maker functions always return values of concrete type.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>which creates a DOM node tagged with <ins class="diffchange diffchange-inline">&lt;</ins>DIV<ins class="diffchange diffchange-inline">&gt;</ins>. Such maker functions are defined for most of HTML elements. Maker functions always return values of concrete type.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Threads===</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>===Threads===</div></td>
</tr>
<tr>
<td colspan="2" class="diff-lineno">Line 106:</td>
<td colspan="2" class="diff-lineno">Line 106:</td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Message passing between threads====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Message passing between threads====</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker">−</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Threads may pass messages to each other, using [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html#t%3AMSGBOX Message Boxes]. Sending messages is asynchronous (although rescheduling of threads execution occurs to resume the receiving thread). Sending a message may fail if there is a message in the Message Box (no message buffering). Receiving messages is always a blocking operation. Receiving a message may fail if there is already a thread waiting on the Message Box. Therefore more than one thread may send messages to the same Message Box (but sending all messages is not guaranteed unless result of sending is checked), but more than one thread may not receive messages from the same Message Box.</div></td>
<td class="diff-marker">+</td>
<td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Threads may pass messages to each other, using [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html#t%3AMSGBOX Message Boxes]. Sending messages is asynchronous (although rescheduling of threads execution occurs to resume the receiving thread). Sending a message may fail if there is a message in the <ins class="diffchange diffchange-inline">''</ins>Message Box<ins class="diffchange diffchange-inline">''</ins> (no message buffering). Receiving messages is always a blocking operation. Receiving a message may fail if there is already a thread waiting on the <ins class="diffchange diffchange-inline">''</ins>Message Box<ins class="diffchange diffchange-inline">''</ins>. Therefore more than one thread may send messages to the same <ins class="diffchange diffchange-inline">''</ins>Message Box<ins class="diffchange diffchange-inline">''</ins> (but sending all messages is not guaranteed unless result of sending is checked), but more than one thread may not receive messages from the same <ins class="diffchange diffchange-inline">''</ins>Message Box<ins class="diffchange diffchange-inline">''</ins>.</div></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td>
</tr>
<tr>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Events handling====</div></td>
<td class="diff-marker"> </td>
<td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>====Events handling====</div></td>
</tr>
</table>DimitryGolubovskyhttps://wiki.haskell.org/index.php?title=Haskell_in_web_browser/Basics&diff=19851&oldid=prevDimitryGolubovsky at 02:45, 15 March 20082008-03-15T02:45:26Z<p></p>
<p><b>New page</b></p><div>===DOM===<br />
<br />
Formalized description of DOM interfaces is provided by [http://www.w3.org the Web Consortium] in the form of [http://www.omg.org/gettingstarted/omg_idl.htm OMG IDL] definitions. An example of such definitions can be found [http://www.w3.org/TR/DOM-Level-2-HTML/idl-definitions.html here].<br />
<br />
It was necessary to convert these definitions to Haskell function declarations to make them available to Haskell programs for Web browser. The special utility, <code>domconv</code> is part of the Javascript backend toolset. The utility is based on [http://haskell.org/hdirect/ H/Direct], although most of non-IDL related functionality was stripped, and Haskell source generator was completely rewritten. In this section, we discuss the logic of IDL to Haskell conversion.<br />
<br />
====DOM interfaces vs. Haskell classes====<br />
<br />
Web Consortuim's DOM definitions are presented as a hierarchy of interfaces. For example, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 Node] interface is a parent to the majority of other interfaces, such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document Document] (direct ancestor), or [http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037 HTMLElement] (not a direct ancestor, but ''HTMLElement'' should inherit all properties and methods of ''Node'').<br />
<br />
This is achieved by defining Haskell type classes whose hierarchy repeats the hierarchy of DOM interfaces. Thus, we have the [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACNode CNode] and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ACDocument CDocument] classes. For each DOM interface, also a phantom data type is defined: [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATNode TNode], and [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-Dom.html#t%3ATDocument TDocument] correspondingly. Phantom types are assigned to concrete values (references to DOM objects) while type classes are used to constrain types of parameters of functions working with those DOM objects. The ''CDocument'' class is defined as:<br />
<br />
<haskell><br />
class CNode a => CDocument a<br />
data TNode<br />
data TDocument<br />
instance CNode TNode<br />
instance CDocument TDocument<br />
instance CNode TDocument<br />
</haskell><br />
<br />
to reflect inheritance of ''Document'' from ''Node''. Accordingly, continuing our example, for ''HTMLElement'', we have:<br />
<br />
<haskell><br />
class CNode a => CElement a<br />
class CElement a => CHTMLElement a<br />
data THTMLElement<br />
instance CElement THTMLElement<br />
instance CHTMLElement THTMLElement<br />
instance CNode THTMLElement<br />
</haskell><br />
<br />
and so on. This means that a value of ''THTMLElement'' may be passed as argument to a function expecting an instance of ''CNode'', but not the opposite. Similarly, a value of ''TDocument'' can by no means be passed to a function expecting a ''THTMLElement''. This increases type safety of a program which, if written in Javascript, would have lacked such safety completely (or eventually would end up throwing an exception from runtime type check).<br />
<br />
Below is an example of such type constrained function:<br />
<br />
<haskell><br />
hasChildNodes :: CNode this => this -> CPS c Bool<br />
</haskell><br />
<br />
which corresponds to the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187 hasChildNodes] function defined within the ''Node'' interface. Any DOM object which is a ''Node'' can be passed to this function (by reference) as the <code>this</code> argument.<br />
<br />
====Attributes vs. getters and setters====<br />
<br />
Within interfaces, DOM specification defines attributes and methods. Attributes are either read-only (such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D095 nodeName] of the ''Node'' interface) or read-write (such as [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080 nodeValue] of the same interface). In Haskell bindings, getter (for read-only attributes), and both getter and setter (for read-write attributes) functions are defined in straightforward manner:<br />
<br />
<haskell><br />
get'nodeName :: CNode this => this -> CPS c String<br />
set'nodeValue :: CNode zz => String -> zz -> CPS c zz<br />
get'nodeValue :: CNode this => this -> CPS c String<br />
</haskell><br />
<br />
Getters always take the object containing an attribute as the first argument, <code>this</code>, and it is always constrained to the type class corresponding to the DOM interface. Setters always take the value to be set as the first argument, and the object containing the attribute as the second argument. Setters always return reference to the same object where an attribute was set. The latter property allows to concatenate multiple setters in Continuation-passing style, such as:<br />
<br />
<haskell><br />
........$ \he -><br />
(set'id "myid")<br />
(set'lang "en")<br />
(set'title "Hello")<br />
</haskell><br />
<br />
This whole construction will pass the same object (<code>he</code>) to the continuation, but continuation will deal with updated object.<br />
<br />
The setters in the example above are defined in the [http://www.golubovsky.org:5984/_utils/yhcws/DOM-Level2-HTMLElement.html DOM.Level2.HTMLElement] module.<br />
<br />
====Methods vs. functions====<br />
<br />
Interface methods are translated to Haskell functions whose type signatures have proper type coetraints. Thus, the [http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-getElBId getElementById] function defined in the ''Document'' interface as<br />
<br />
<code><br />
Element getElementById(in DOMString elementId);<br />
</code><br />
<br />
translates to Haskell function:<br />
<br />
<haskell><br />
getElementById :: (CDocument this, CElement zz) => this -> String -> CPS c zz<br />
</haskell><br />
<br />
as follows from its type, ''getElementById'' does not return a value of concrete type, but rather a type-constrained value. Values of types corresponding to DOM interfaces, translate to type-constrained rather than concrete values. This sometimes makes it necessary to supply explicit type signatures unless a function receiving the returned constrained value has a type signature that brings a constrained type down to a concrete type.<br />
<br />
====Maker functions====<br />
<br />
The IDL conversion utility <code>domconv</code> auto-creates convenient functions that serve as constructors of DOM objects corresponding to HTML tags. An example of such maker function is:<br />
<br />
<haskell><br />
mkDiv :: CHTMLDocument a => a -> CPS c THTMLDivElement<br />
</haskell><br />
<br />
which creates a DOM node tagged with < DIV >. Such maker functions are defined for most of HTML elements. Maker functions always return values of concrete type.<br />
<br />
===Threads===<br />
<br />
====Threads emulation====<br />
<br />
Execution of Javascript in Web browser is [http://splintor.wordpress.com/2006/04/26/javascript-is-single-threaded/ always] single-threaded. It is however possible and useful to emulate multi-threaded execution with <code>[http://developer.mozilla.org/en/docs/DOM:window.setTimeout window.setTimeout]</code> method.<br />
<br />
Javascript threads available to Haskell programs have must of "real" threads features stripped off: there are no thread identifiers, threads must always explicitly yield execution, time-wise threads scheduling is very loose, etc.<br />
<br />
Please refer to the [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html Control.Concurrent.JSThreads] module documentation. A working threads example (including inter-thread message passing, see below) can be found [http://hpaste.org/6094 here].<br />
<br />
====CPS and threads====<br />
<br />
[[Continuation|Continuation Passing Style]] allows for very efficient implementation of threads: in fact, switching context between threads is merely saving a continuation of currently executing thread in some static memory object, and evaluating continuation of (resuming) an thread that was similarly suspended earlier.<br />
<br />
====Message passing between threads====<br />
<br />
Threads may pass messages to each other, using [http://www.golubovsky.org:5984/_utils/yhcws/Control-Concurrent-JSThreads.html#t%3AMSGBOX Message Boxes]. Sending messages is asynchronous (although rescheduling of threads execution occurs to resume the receiving thread). Sending a message may fail if there is a message in the Message Box (no message buffering). Receiving messages is always a blocking operation. Receiving a message may fail if there is already a thread waiting on the Message Box. Therefore more than one thread may send messages to the same Message Box (but sending all messages is not guaranteed unless result of sending is checked), but more than one thread may not receive messages from the same Message Box.<br />
<br />
====Events handling====<br />
<br />
From Javascript standpoint, attaching an event handler to a HTML element is simply setting appropriate ''on-'' attribute with reference to appropriate function to which event information will be passed. The low-level events API available to Haskell programs provides means for a thread to wait on a HTML element for a certain event to occur. Refer to the [http://www.golubovsky.org:5984/_utils/yhcws/CDOM-Level2-Events.html CDOM.Level2.Events] module for more information.<br />
<br />
===XML HTTP===<br />
<br />
[http://www.w3.org/TR/XMLHttpRequest/ XML HTTP] API is available to Haskell programs running in Web browser. Refer to the [http://www.golubovsky.org:5984/_utils/yhcws/Network-XMLHTTP.html Network.XMLHTTP] module for more information.<br />
<br />
===JSON===<br />
<br />
Although not part of the native browser API, [http://json.org/ JSON] is a useful way to access properties of Javascript objects. Besides, [http://couchdb.com/CouchDB/CouchDBWeb.nsf/Home?OpenForm CouchDB] on which the [[Yhc_web_service|Yhc Web Service]] is based, uses JSON as encoding format for queries and responses.<br />
<br />
The JSON API provided to Haskell programs is based on the opaque type [http://www.golubovsky.org:5984/_utils/yhcws/Data-JsonNode.html#t%3AJsonNode JsonNode]. Operations over JSON nodes are monadic as they may fail. For example, the [http://www.golubovsky.org:5984/_utils/yhcws/Data-JsonNode.html#v%3AgetValueByName getValueByName] function fails if the JSON node queried does not have a value with given name. Monadic interface allows to write code that retrieves values from JSON node in <hask>do</hask> notation and compose operations using <hask>>>=</hask> (monadic bind).<br />
<br />
Thus, the following code:<br />
<br />
<haskell><br />
uri = fromMaybe "----" $ do<br />
buri <- splitURI loc<br />
prot <- getValueByName "protocol" buri >>= getString<br />
auth <- getValueByName "authority" buri >>= getString<br />
anchor <- getValueByName "anchor" buri >>= getString<br />
let uri = prot ++ "://" ++ auth ++ "/" ++ anchor<br />
return uri<br />
</haskell><br />
<br />
retrieves parts of an URI (see below) represented as a JSON node, and composes a new URI out of them. If the URI JSON node does not contain any of the values requested, the whole monadic sequence fails, and the fall-back value "----" will be returned.<br />
<br />
Refer to the [http://www.golubovsky.org:5984/_utils/yhcws/Data-JsonNode.html Data.JsonNode] module for more information.<br />
<br />
===URI===<br />
<br />
Haskell programs running in Web browser may operate on [http://en.wikipedia.org/wiki/URI Uniform Resource Identifiers] (URI) by transforming URI strings into [[#JSON|JSON]] nodes. The function for such conversion is [http://www.golubovsky.org:5984/_utils/yhcws/Network-XMLHTTP.html#v%3AsplitURI splitURI] defined in the [http://www.golubovsky.org:5984/_utils/yhcws/Network-XMLHTTP.html Network.XMLHTTP] module. It also has monadic interface (see example in the [[#JSON|JSON]] section). The function itself is a wrapper for the URI parser based on Steven Levithan's [http://blog.stevenlevithan.com/archives/parseuri parseUri] Javascript function.</div>DimitryGolubovsky