Difference between revisions of "Yhc/Javascript"

From HaskellWiki
< Yhc
Jump to navigation Jump to search
(Added link to Haskell in a web browser tutorial)
(Clean up table formatting a little)
Line 12: Line 12:
 
# [[Yhc/Javascript/Inner_workings|'''Inner Workings''']]
 
# [[Yhc/Javascript/Inner_workings|'''Inner Workings''']]
 
# '''Examples and Demos'''
 
# '''Examples and Demos'''
  +
----
 
{|
 
{|
 
|-
 
|-
  +
!Demo name:
|'''Does it leak?'''
+
|'''"Does it leak?"'''
 
|-
 
|-
 
|- valign="top"
 
|- valign="top"
  +
!Description:
|'''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.
+
|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"
 
|- valign="top"
  +
!Features:
|'''Features:'''||Prototypic code of Haskell Web Toolkit:
+
|Prototypic code of Haskell Web Toolkit:
 
* Functions and combinators to describe appearance of a web form
 
* Functions and combinators to describe appearance of a web form
 
* Support for cooperative threads, events handling, message passing between threads
 
* Support for cooperative threads, events handling, message passing between threads
Line 28: Line 32:
 
</small>
 
</small>
 
|- valign="top"
 
|- valign="top"
  +
!Tested with:
|'''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>
+
|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>
 
<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"
 
|- valign="top"
  +
!Demo URL:
|'''Demo URL:'''||http://darcs.haskell.org/yhc/web/jsdemos/HsWTKDemo.html
+
|http://darcs.haskell.org/yhc/web/jsdemos/HsWTKDemo.html
 
|- valign="top"
 
|- valign="top"
  +
!Stylesheet:
|'''Stylesheet:'''||http://darcs.haskell.org/yhc/web/jsdemos/HsWTK.css
+
|http://darcs.haskell.org/yhc/web/jsdemos/HsWTK.css
 
|- valign="top"
 
|- valign="top"
  +
!Haskell Source:
|'''Haskell Source:'''||http://darcs.haskell.org/yhc/web/jsdemos/HsWTKDemo.hs<br>
+
|http://darcs.haskell.org/yhc/web/jsdemos/HsWTKDemo.hs<br>
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
|'''Echo'''
+
|'''"Echo"'''
 
|- valign="top"
 
|- valign="top"
  +
!Description:
|'''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 ;)
+
|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"
 
|- valign="top"
  +
!Features:
|'''Features:'''||Lowest possible level of interaction with web browser:
+
|Lowest possible level of interaction with web browser:
 
* Simple monadic framework
 
* Simple monadic framework
 
* Wrapping Javascript functions to become Haskell functions
 
* Wrapping Javascript functions to become Haskell functions
Line 50: Line 64:
 
* Third party code of some "general" purpose works in web browser
 
* Third party code of some "general" purpose works in web browser
 
|- valign="top"
 
|- valign="top"
  +
!Tested with:
|'''Tested with:'''||Netscape 7/Linux, MSIE 6.0/Windows 2000, Konqueror 3.5.5/Linux, Opera/Windows, Firefox/ Mac OS X<br>
+
|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>
 
<small><sup>feel free to add your own combination of browser/os where you got this demo working</sup></small>
 
|- valign="top"
 
|- valign="top"
  +
!Demo URL:
|'''Demo URL:'''||http://darcs.haskell.org/yhc/web/jsdemos/Echo.html
+
|http://darcs.haskell.org/yhc/web/jsdemos/Echo.html
 
|- valign="top"
 
|- valign="top"
  +
!Haskell Source:
|'''Haskell Source:'''||http://darcs.haskell.org/yhc/web/jsdemos/Echo.hs http://darcs.haskell.org/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
+
|http://darcs.haskell.org/yhc/web/jsdemos/Echo.hs http://darcs.haskell.org/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
|'''Echo/Unicode'''
+
|'''"Echo/Unicode"'''
 
|- valign="top"
 
|- valign="top"
  +
!Description:
|'''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.
+
|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"
 
|- valign="top"
  +
!Features:
|'''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.
+
|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"
 
|- valign="top"
  +
!Demo URL:
|'''Demo URL:'''||http://darcs.haskell.org/yhc/web/jsdemos/EchoUnicode.html
+
|http://darcs.haskell.org/yhc/web/jsdemos/EchoUnicode.html
  +
|}
  +
----
  +
{|
 
|-
 
|-
  +
!Demo name:
|'''Echo/DOM/CPS'''
+
|'''"Echo/DOM/CPS"'''
 
|- valign="top"
 
|- valign="top"
  +
!Description:
|'''Description:'''||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.md.chalmers.se/Cs/Research/Functional/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.
+
|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.md.chalmers.se/Cs/Research/Functional/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.
 
|- valign="top"
 
|- valign="top"
  +
!Features:
|'''Features:'''||Utilization of the type-safe DOM Level1 interface:
+
|Utilization of the type-safe DOM Level1 interface:
 
* Demonstration of the CPS style
 
* Demonstration of the CPS style
 
* No unsafe direct access to Javascript objects needed: a library is now available
 
* No unsafe direct access to Javascript objects needed: a library is now available
 
|- valign="top"
 
|- valign="top"
  +
!Demo URL:
|'''Demo URL:'''||http://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.html
+
|http://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.html
 
|- valign="top"
 
|- valign="top"
  +
!Haskell Source:
|'''Haskell Source:'''||http://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.hs<br> http://darcs.haskell.org/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
+
|http://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.hs<br> http://darcs.haskell.org/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace
 
|}
 
|}
  +
----
 
   
 
--[[User:DimitryGolubovsky|DimitryGolubovsky]] November 17, 2007
 
--[[User:DimitryGolubovsky|DimitryGolubovsky]] November 17, 2007

Revision as of 08:52, 26 March 2008

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://darcs.haskell.org/yhc/web/jsdemos/HsWTKDemo.html
Stylesheet: http://darcs.haskell.org/yhc/web/jsdemos/HsWTK.css
Haskell Source: http://darcs.haskell.org/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://darcs.haskell.org/yhc/web/jsdemos/Echo.html
Haskell Source: http://darcs.haskell.org/yhc/web/jsdemos/Echo.hs http://darcs.haskell.org/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://darcs.haskell.org/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://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.html
Haskell Source: http://darcs.haskell.org/yhc/web/jsdemos/EchoCPS.hs
http://darcs.haskell.org/yhc/web/jsdemos/Roman.hs (C) Malcolm Wallace

--DimitryGolubovsky November 17, 2007