diff options
| author |  Adam Chlipala <adamc@hcoop.net> | 2009-03-10 11:18:01 -0400 |
|---|---|---|
| committer | Adam Chlipala <adamc@hcoop.net> | 2009-03-10 11:18:01 -0400 |
| commit | 998ec0f6506d8b7065fbe277c253188b38bcac7c (patch) | |
| tree | 99e4bdad36025df9b3bd37c782f9dd36f052307a /demo | |
| parent | 36b92359be479b92b5adcbdc669576e61d01f74a (diff) | |
React demo
Diffstat (limited to 'demo')
| -rw-r--r-- | demo/prose | 6 | ||||
| -rw-r--r-- | demo/react.ur | 6 | ||||
| -rw-r--r-- | demo/react.urp | 2 | ||||
| -rw-r--r-- | demo/react.urs | 1 |
4 files changed, 15 insertions, 0 deletions
@@ -191,3 +191,9 @@ alert.urp <p>Ur/Web makes it easy to write code whose execution should be distributed between the web server and client web browsers. Server-side code is compiled to efficient native code, and client-side code is compiled to JavaScript. Ur/Web programmers don't need to worry about these details, because the language and standard library provide a uniform ML-like interface for the whole process.</p> <p>Here's an example of a button that, when clicked, opens an alert dialog on the client.</p> + +react.urp + +<p>Most client-side JavaScript programs modify page contents imperatively, but Ur/Web is based on functional-reactive programming instead. Programs allocate data sources and then describe the page as a pure function of those data sources. When the sources change, the page changes automatically.</p> + +<p>Here's an example where a button modifies a data source that affects some text on the page. The affected portion of the page is indicated with the pseudo-HTML tag <tt>dyn</tt>, whose <tt>signal</tt> attribute specifies one of these pure functions over mutable sources. A source containing data of type <tt>t</tt> has type <tt>source t</tt> and is created with the <tt>source</tt> operation within the <tt>transaction</tt> monad. Functions over sources are represented in the monad <tt>signal</tt>. Like in Haskell, we overload monad notations, so that the same return and bind operators can be used to write signals and transactions. The <tt>signal</tt> function coerces a source to a signal.</p> diff --git a/demo/react.ur b/demo/react.ur new file mode 100644 index 00000000..0c460478 --- /dev/null +++ b/demo/react.ur @@ -0,0 +1,6 @@ +fun main () = + s <- source "You didn't click it yet."; + return <xml><body> + <button value="Click me!" onclick={set s "Now you clicked it."}/><br/> + <dyn signal={v <- signal s; return <xml>{[v]}</xml>}/> + </body></xml> diff --git a/demo/react.urp b/demo/react.urp new file mode 100644 index 00000000..80ed64e1 --- /dev/null +++ b/demo/react.urp @@ -0,0 +1,2 @@ + +react diff --git a/demo/react.urs b/demo/react.urs new file mode 100644 index 00000000..6ac44e0b --- /dev/null +++ b/demo/react.urs @@ -0,0 +1 @@ +val main : unit -> transaction page |