Difference between revisions of "Yhc/Javascript"

From HaskellWiki
< Yhc
Jump to navigation Jump to search
(More table)
(Updated another couple of links)
 
(41 intermediate revisions by 5 users not shown)
Line 1: Line 1:
  +
__NOTOC__
==Brief Overview==
 
  +
===YCR2JS, a Converter of Yhc Core to Javascript===
An experimental sub-project, '''Yhc Core to Javascript Converter (ycr2js)''', is aimed to create a tool that generates Javascript out of a binary Yhc core file.
 
   
  +
'''Note:''' There is also a [[Haskell in web browser|general tutorial for using Haskell in a web browser]]
The project was started as an experimental patch to [[Implementations#nhc98|nhc98]] in attempt to convert its internal PosLambda constructs into Javascript expressions. After some initial success, the project was switched to use the [[Yhc/API/Core|Yhc Core]] as the source for transformation. Recently, with a great amount of help from the [[Yhc]] Team, the project has been integrated into the main Yhc source tree and is moving towards closer integration with the compiler.
 
  +
with YCR2JS.
   
  +
====Table of Contents====
Ability to convert an arbitrary Haskell source into Javascript makes it possible to execute Haskell programs in a Web browser. This, in turn, allows for development of both client and server sides of an Internet application entirely in Haskell.
 
   
  +
# [[Yhc/Javascript/Brief_overview|'''Brief Overview''']]
Server side solutions in Haskell have been around for a while, such as [http://happs.org/HAppS/README.html HAppS -- Haskell Application Server], [http://www.cs.chalmers.se/~d00nibro/hsp/ Haskell Server Pages], and others. For the client side, [http://csmisc14.cs.chalmers.se/~bjornson/soc/ HSPClientSide] has been recently introduced, which is a close analog to '''ycr2js'''. HSPClientSide provides a domain-specific language to define the client side Web page structure (static HTML and Javascript). On the contrary, '''ycr2js''' helps convert any compilable Haskell source into Javascript.
 
  +
# [[Yhc/Javascript/Users_guide|'''Users Guide''']]
 
  +
# [[Yhc/Javascript/Programmers_guide|'''Programmers Guide''']]
==Principles of Operation==
 
  +
# [[Yhc/Javascript/Inner_workings|'''Inner Workings''']]
The Yhc compiler generally produces a binary [[Yhc/RTS/hbc|bytecode]] file (usually named with ''.hbc'' extension) for each Haskell module compiled. These bytecode files are to be interpreted by [[Yhc/Tutorial#yhi|yhi]], a command-line bytecode interpreter.
 
  +
# '''Examples and Demos'''
 
  +
----
The compiler is also capable of producing a binary [[Yhc/API/Core|core]] file (usually named with ''.ycr'' extension), and also its human-readable representation for each Haskell module compiled. The internal structure of core is based on significantly simplified nhc98's PosLambda constructs (Yhc is derived from nhc98 code). Core consists of definitions for compiled Haskell functions and data objects.
 
  +
{|
 
The feature of core linking was added recently to Yhc. This allows for merging core files from several modules together, removing functions that are not used (similar to static linking performed by a traditional Unix or Windows executable linker). The resulting file (usually named with ''.yca'' extension) has the same format as per-module core files.
 
 
Binary core files may be read back into computer memory using the [http://www.cs.york.ac.uk/fp/yhc/snapshot/docs/Yhc-Core.html Yhc Core API] functions.
 
 
The '''ycr2js''' program reads the binary core file specified (.yca or .ycr), and performs conversion of Haskell functions compiled into Core to their Javascript representation storing the generated Javascript code in a file. Resulting Javascript may be embedded on a (X)HTML page to be loaded into a Web browser.
 
 
==Users Guide==
 
 
<to be written>
 
 
==Inner Workings==
 
In this section, internal structure of Javascript objects and runtime support algorithms is reviewed.
 
 
===Javascript Objects===
 
 
The table below summarizes types of Javascript objects used in the '''ycr2js'''generated Javascript code.
 
 
{|border="1" bordercolor="gray"
 
|+<b>Javascript Object Types and Their Methods and Properties</b>
 
!Member/<br>Constructor!!Prop<br>Meth<br>Constr!!H<br>S<br>C<br>o<br>n<br>s!!H<br>S<br>E<br>O<br>L!!H<br>S<br>F<br>u<br>n!!H<br>S<br>D<br>l<br>y!!H<br>S<br>D<br>a<br>t<br>a!!colspan="4" width="90%"|Description/Arguments
 
 
|-
 
|-
  +
!Demo name:
!HSCons
 
  +
|'''"Does it leak?"'''
|style="text-align:center"|C||style="text-align:center"|*||&nbsp;||&nbsp;||&nbsp;||&nbsp;||valign="top"|Builds a list CONS cell||valign="top"|head:<br>head element||valign="top" colspan="2"|tail:<br>remainder of the list
 
 
|-
 
|-
  +
|- valign="top"
!HSEOL
 
  +
!Description:
|style="text-align:center"|C||&nbsp;||style="text-align:center"|*||&nbsp;||&nbsp;||&nbsp;||valign="top"|Final element of a list or an empty list||colspan="3"|&nbsp;
 
  +
|This is an early preview of the features provided by the prototype of Haskell Web Toolkit (HsWTK), a thin layer on top of DOM which provides basic HTML layout capabilities and simulates cooperative pseudo-threads. HTML widgets displayed are self-explanatory. This demo program is also a memory leak test: please load it into various browsers and notice if browser executable size increases as certain user actions are performed. In fact, there should be no serious leaks, periodic browser size increases were noticed in Microsoft Internet Explorer v6, but at certain moments size decreased due to proper garbage collection. Browser size may even get smaller if the demo program page is unloaded. Mozilla Firefox did not show any memory leaks.
  +
|- valign="top"
  +
!Features:
  +
|Prototypic code of Haskell Web Toolkit:
  +
* Functions and combinators to describe appearance of a web form
  +
* Support for cooperative threads, events handling, message passing between threads
  +
* Widgets demonstrate interaction between HTML form elements
  +
* Programmable timer: while waiting, browser does not lock up
  +
<small>
  +
Some of these demo widgets are based on demo programs seen in [http://www.cse.chalmers.se/~hallgren/Thesis/main.html Fudgets Thesis]
  +
</small>
  +
|- valign="top"
  +
!Tested with:
  +
|Firefox 1.5/Linux 32bit, Firefox 2.0/Linux 64bit, Opera 9/Windows 2000, MSIE 6.0/Windows XP: no noticeable memory leaks detected. MSIE does not display icons in the select element's dropdown menu.<br>
  +
<small><sup>feel free to add your own combination of browser/os where you got this demo working, fully or partially, note whether noticeable memory leaks were observed in response to users' actions.</sup></small>
  +
|- valign="top"
  +
!Demo URL:
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/HsWTKDemo.html
  +
|- valign="top"
  +
!Stylesheet:
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/HsWTK.css
  +
|- valign="top"
  +
!Haskell Source:
  +
|http://www.cs.york.ac.uk/fp/darcs//yhc/web/jsdemos/HsWTKDemo.hs<br>
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
!HSFun
 
  +
|'''"Echo"'''
|style="text-align:center"|C||&nbsp;||&nbsp;||style="text-align:center"|*||&nbsp;||&nbsp;||valign="top"|Creates a function thunk with no arguments applied to||valign="top"|name:<br>function name to be used for debugging/exception tracing||valign="top"|arity:<br>arity of the function known by the compiler||valign="top"|body:<br>expression to apply to function's arguments and evaluate
 
  +
|- valign="top"
  +
!Description:
  +
|Type any text in the input field provided, and see it echoed right above after Enter is pressed. Just for fun, type any decimal number and see it converted to a Roman number, and vice versa. For more fun, a timer is provided: measure how fast your browser runs Haskell ;)
  +
|- valign="top"
  +
!Features:
  +
|Lowest possible level of interaction with web browser:
  +
* Simple monadic framework
  +
* Wrapping Javascript functions to become Haskell functions
  +
* Calling Haskell functions from Javascript
  +
* Access to Javascript (including DOM) objects and properties
  +
* Handling of Javascript exceptions in Haskell
  +
* Events handling
  +
* Third party code of some "general" purpose works in web browser
  +
|- valign="top"
  +
!Tested with:
  +
|Netscape 7/Linux, MSIE 6.0/Windows 2000, Konqueror 3.5.5/Linux, Opera/Windows, Firefox/ Mac OS X<br>
  +
<small><sup>feel free to add your own combination of browser/os where you got this demo working</sup></small>
  +
|- valign="top"
  +
!Demo URL:
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Echo.html
  +
|- valign="top"
  +
!Haskell Source:
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Echo.hs http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
!HSDly
 
  +
|'''"Echo/Unicode"'''
|style="text-align:center"|C||&nbsp;||&nbsp;||&nbsp;||style="text-align:center"|*||&nbsp;||valign="top"|A special object to wrap around a saturated function call||valign="top" colspan="3"|thunk:<br>saturated function call that is a HSFun object with number of arguments applied to (_a) equal to the function arity (_x); evaluation of this thunk will be delayed until it is applied to an argument which would have oversaturated the call in the absence of HSDly
 
  +
|- valign="top"
  +
!Description:
  +
|Around March 20, 2007, handling of Unicode character properties was added to the Yhc/Javascript runtime. This implementation is based on the Unicode Character Database available from the [http://www.unicode.org Unicode Consortium]. The database was compiled in Javascript and included in the output web page. This demo program is just recompilation of the same Echo source, but with the new runtime that supports Unicode. The Javascript Unicode Characters Database adds about 70k to the web page size.
  +
|- valign="top"
  +
!Features:
  +
|Same as in the above demo program. Replacement of functions like ''toUpper'', ''toLower'', ''isAlpha'' etc. to direct Javascript implementations affects the timing shown by the program: in some browsers there may be some speedup, in other browsers there may be a slowdown.
  +
|- valign="top"
  +
!Demo URL:
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoUnicode.html
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
!HSData
 
  +
|'''"Echo/DOM/CPS"'''
|style="text-align:center"|C||&nbsp;||&nbsp;||&nbsp;||&nbsp;||style="text-align:center"|*||valign="top"|Builds a data object other than a CONS cell or an Empty List||valign="top"|con:<br>constructor name (with non-alphanumeric characters replaced with underscored character codes)||valign="top" colspan="2"|arrs:<br>a Javascript Array containing contructor arguments
 
  +
|- valign="top"
|-
 
  +
!Description:
!_r
 
  +
|Finally, the DOM framework has been implemented. IDL files provided by the [http://www.w3.org Web Consortium] were converted into set of Haskell modules using modified sources of [http://haskell.org/hdirect H/Direct], mainly the OMG IDL parser. The DOM framework uses [[Continuation]] passing style (CPS) rather than monadic style: this is believed to make adoption of [http://www.altocumulus.org/Fudgets/ Fudgets] easier as they use mainly CPS style in their internals. This demo web page looks similar to the previous Echo demo, and provides the same "functionality". This demo web page also uses unicode-enabled versions of character functions.
|style="text-align:center"|P||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||colspan="4" valign="top"|Boolean: true when a thunk may be evaluated.
 
  +
|- valign="top"
* true in HSFun when the call is saturated (<code>_a.length == _x</code>)
 
  +
!Features:
* Always true in HSDly
 
  +
|Utilization of the type-safe DOM Level1 interface:
* Always false in HSCons, HSEOL, HSData
 
  +
* Demonstration of the CPS style
|-
 
  +
* No unsafe direct access to Javascript objects needed: a library is now available
!_c
 
  +
|- valign="top"
|style="text-align:center"|M||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||style="text-align:center"|*||colspan="4" valign="top"|Evaluate a thunk. If this method is said as "has no action", this means that it just returns <code>this</code> and does nothing else.
 
  +
!Demo URL:
* No action in HSFun unless the call is saturated (<code>_a.length == _x</code>) in which case it applies the function body (_b) to the accumulated arguments array (_a) and returns whatever the body returns
 
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoCPS.html
* In HSDly, evaluates the delayed function call first <b>and then applies the oversaturating arguments to the result (_ap), and returns whatever results from this (either unsaturated or saturated function call wrapped in another HSDly object)</b>
 
  +
|- valign="top"
* No action in HSCons, HSEOL, HSData
 
  +
!Haskell Source:
|-
 
  +
|http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoCPS.hs<br> http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
!_a
 
|style="text-align:center"|P||&nbsp;||&nbsp;||style="text-align:center"|*||style="text-align:center"|*||&nbsp;||colspan="4" valign="top"|Array:
 
* in HSFun, holds accumulated arguments
 
* in HSDly, holds oversaturating arguments
 
|-
 
!_ap
 
|style="text-align:center"|M||&nbsp;||&nbsp;||style="text-align:center"|*||style="text-align:center"|*||&nbsp;||colspan="2" valign="top"|Apply function call/delayed saturated call to argument(s)
 
* In HSFun, clones the HSFun object, and concatenates its argument to the accumulated arguments array (_a) of the copy. If the copy becomes a saturated call, sets it's _r property to true and returns the copy wrapped into HSDly, otherwise just returns the copy
 
* <b>In HSDly, clones the HSDly object and concatenates its argument to the oversaturating arguments array (_a) of the copy. No evaluation is done at this time; it will be performed by the _c method</b>
 
|colspan="2" valign="top"|targs:<br>Array containing the arguments to be applied to
 
 
|}
 
|}
  +
----
   
  +
--[[User:DimitryGolubovsky|DimitryGolubovsky]] November 17, 2007
==Examples and Demos==
 
*'''Echo'''<br>'''Description:''' Type any text in the input field provided, and see it echoed right above.<br>'''Tested with:''' Netscape 7/Linux<br>'''Demo URL''': http://darcs.haskell.org/yhc/web/jsdemos/Echo.html<br>'''Haskell Source:''' http://darcs.haskell.org/yhc/web/jsdemos/Echo.hs
 
 
 
--[[User:DimitryGolubovsky|DimitryGolubovsky]] 19:02, 6 November 2006 (UTC)
 

Latest revision as of 21:10, 16 December 2010

YCR2JS, a Converter of Yhc Core to Javascript

Note: There is also a general tutorial for using Haskell in a web browser with YCR2JS.

Table of Contents

  1. Brief Overview
  2. Users Guide
  3. Programmers Guide
  4. Inner Workings
  5. Examples and Demos

Demo name: "Does it leak?"
Description: This is an early preview of the features provided by the prototype of Haskell Web Toolkit (HsWTK), a thin layer on top of DOM which provides basic HTML layout capabilities and simulates cooperative pseudo-threads. HTML widgets displayed are self-explanatory. This demo program is also a memory leak test: please load it into various browsers and notice if browser executable size increases as certain user actions are performed. In fact, there should be no serious leaks, periodic browser size increases were noticed in Microsoft Internet Explorer v6, but at certain moments size decreased due to proper garbage collection. Browser size may even get smaller if the demo program page is unloaded. Mozilla Firefox did not show any memory leaks.
Features: Prototypic code of Haskell Web Toolkit:
  • Functions and combinators to describe appearance of a web form
  • Support for cooperative threads, events handling, message passing between threads
  • Widgets demonstrate interaction between HTML form elements
  • Programmable timer: while waiting, browser does not lock up

Some of these demo widgets are based on demo programs seen in Fudgets Thesis

Tested with: Firefox 1.5/Linux 32bit, Firefox 2.0/Linux 64bit, Opera 9/Windows 2000, MSIE 6.0/Windows XP: no noticeable memory leaks detected. MSIE does not display icons in the select element's dropdown menu.

feel free to add your own combination of browser/os where you got this demo working, fully or partially, note whether noticeable memory leaks were observed in response to users' actions.

Demo URL: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/HsWTKDemo.html
Stylesheet: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/HsWTK.css
Haskell Source: http://www.cs.york.ac.uk/fp/darcs//yhc/web/jsdemos/HsWTKDemo.hs

Demo name: "Echo"
Description: Type any text in the input field provided, and see it echoed right above after Enter is pressed. Just for fun, type any decimal number and see it converted to a Roman number, and vice versa. For more fun, a timer is provided: measure how fast your browser runs Haskell ;)
Features: Lowest possible level of interaction with web browser:
  • Simple monadic framework
  • Wrapping Javascript functions to become Haskell functions
  • Calling Haskell functions from Javascript
  • Access to Javascript (including DOM) objects and properties
  • Handling of Javascript exceptions in Haskell
  • Events handling
  • Third party code of some "general" purpose works in web browser
Tested with: Netscape 7/Linux, MSIE 6.0/Windows 2000, Konqueror 3.5.5/Linux, Opera/Windows, Firefox/ Mac OS X

feel free to add your own combination of browser/os where you got this demo working

Demo URL: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Echo.html
Haskell Source: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Echo.hs http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace

Demo name: "Echo/Unicode"
Description: Around March 20, 2007, handling of Unicode character properties was added to the Yhc/Javascript runtime. This implementation is based on the Unicode Character Database available from the Unicode Consortium. The database was compiled in Javascript and included in the output web page. This demo program is just recompilation of the same Echo source, but with the new runtime that supports Unicode. The Javascript Unicode Characters Database adds about 70k to the web page size.
Features: Same as in the above demo program. Replacement of functions like toUpper, toLower, isAlpha etc. to direct Javascript implementations affects the timing shown by the program: in some browsers there may be some speedup, in other browsers there may be a slowdown.
Demo URL: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoUnicode.html

Demo name: "Echo/DOM/CPS"
Description: Finally, the DOM framework has been implemented. IDL files provided by the Web Consortium were converted into set of Haskell modules using modified sources of H/Direct, mainly the OMG IDL parser. The DOM framework uses Continuation passing style (CPS) rather than monadic style: this is believed to make adoption of Fudgets easier as they use mainly CPS style in their internals. This demo web page looks similar to the previous Echo demo, and provides the same "functionality". This demo web page also uses unicode-enabled versions of character functions.
Features: Utilization of the type-safe DOM Level1 interface:
  • Demonstration of the CPS style
  • No unsafe direct access to Javascript objects needed: a library is now available
Demo URL: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoCPS.html
Haskell Source: http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/EchoCPS.hs
http://www.cs.york.ac.uk/fp/darcs/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace

--DimitryGolubovsky November 17, 2007