tag:blogger.com,1999:blog-375776152024-03-13T00:23:09.470+01:00Haskell and Web<center> Weblog about the <a href="http://learnyouahaskell.com/introduction#so-whats-haskell">Haskell programming language</a> & the Web.</center>memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.comBlogger75125tag:blogger.com,1999:blog-37577615.post-13884679900356449602014-11-20T19:49:00.002+01:002014-11-20T19:49:16.687+01:00A monad for reactive programming Part 2<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
Some time has passed since I published the <a href="https://www.fpcomplete.com/user/agocorona/a-monad-for-reactive-programming-part-1" style="color: #0088cc; text-decoration: none;">first part of this tutorial</a>. The time has been spent in achieving a deeper understanding of events and event processing. In this second part I solve the problems of the simple approach depicted at the end of the part 1.</div>
<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
The motivating example to solve is the same, a console application with a basic event scheduler, a monadic computation that has some statements which wait for different kinds of events. You can run the two examples here in the tutorial.</div>
<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
This tutorial also can be considered as the description of an event sourcing mechanism without inversion of control. A event sourcing application is basically a set of event handlers for each type of event with a central state. A functional reactive mechanism is a single event handler with event preprocessing on top. while a monadic reactive mechanism like this is a monadic computation that automatically generates a cascade of event handlers.</div>
<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
Besides monadic reactive, I will demonstrate more classical functional reactive behaviour using applicative combinators, and how to mix monadic, reactive and alternative to mimic the creation of new signals with thresholds etc.</div>
<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Merriweather; font-size: 16px; line-height: 1.7em; margin-bottom: 10px;">
The tutorial and running examples are in the <a href="https://www.fpcomplete.com/user/agocorona/monad-reactive-programming-2" target="_blank">School of Haskell</a></div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-90032288461280356152014-11-14T11:05:00.002+01:002014-11-14T13:27:35.257+01:00Browser programming: React.js as a solution for a problem that Haskell can solve in better ways<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="text-align: justify;">
This is what i wrote in <a href="http://www.reddit.com/r/haskell/comments/2m2d03/selfmemoizing_html_rendering_via_mutually/cm1ow5h" target="_blank">this Reddit thread</a>.</div>
</div>
<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="text-align: justify;">
<br /></div>
</div>
<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
IMHO <i>virtual-dom</i> as well as <i><a href="http://facebook.github.io/react/" target="_blank">React </a></i>tries to solve a problem specific of javascript: the lack of a intuitive, composable way to update the HTML-DOM tree. So it creates a composable intermediary, a lineal virtual-dom. Basically, it is string concatenation. When changed, the intermediary lineal description is rendered. But the rewrites and re-rendering are expensive, so they need to update only what is changed.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
That problem disappears when there is a way to write directly the HTML-DOM in a composable way, using a monoid or a monad. Then, to rewrite any branch, just go to the element and update it also in a composable way. That is what I want to detail below:</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
Basically, both virtual-dom and react use intermediary lineal images of the dom just to be able to do this:</div>
</div>
<pre style="margin: 10px; padding: 0px; text-align: start;"><code>div [atribute "width" 100] $ ("hello") <> div [attribute "height" 200] "whathever"
</code></pre>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
Since strings are composable in javascript as well as in any language. But trees are not.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
That composable syntax is impossible in javascript with the HTML DOM directly.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
But Haskell has a lot more tricks. It is possible to compose functions as monoids. these functions may be builders of DOM elements. these builder functions create dom elements, attributes etc using DOM primitives inside.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
That is what ahem.... what my perch library does.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
<a href="https://github.com/agocorona/haste-perch" rel="nofollow" style="color: #336699; text-decoration: none;">https://github.com/agocorona/haste-perch</a></div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
It updates directly the HTML-DOM in a composable way as if they were blaze-html elements IN the browser:</div>
</div>
<pre style="margin: 10px; padding: 0px; text-align: start;"><div style="text-align: justify;">
<span style="font-family: verdana, arial, helvetica, sans-serif;">div $ do</span></div>
<code><div style="text-align: justify;">
<span style="font-family: verdana, arial, helvetica, sans-serif;"> div ! atr "width" "100" $ "hello" </span></div>
<div style="text-align: justify;">
<span style="font-family: verdana, arial, helvetica, sans-serif;"> div ! atr "height" 200 $ "whathever"</span></div>
</code></pre>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
and so on. <code>div</code> here is a builder function. it can be composed this way, monadically or with a monoid syntax. Both are equivalent, like in the case of the blaze-html library. but while blaze-html concatenate strings, perch concatenate builder functions that create trees. In the above example, in creates a div node with two more divs inside.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
Do you want to update an element? modify it directly. Since it does not update an intermediary description, there is no need to detect differences in the intermediate description to avoid to render again the whole description. It simply does it in the DOM.</div>
</div>
<pre style="margin: 10px; padding: 0px; text-align: start;"><code>forElems ".classtochange" $ this ! width "300" ! atr "class" "changed"
</code></pre>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
The above expression is similar to a jquery modification. it is applied for all the elements that match.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
in lineal descriptions like the ones of virtual-dom or react each element is not directly addressable. To address the elements is as expensive as to sequentially rewrite the description with a new one. The need to detect differences is then a consequence of a lineal description. And the lineal description a consequence of the need of composability.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
But a set of monoidal combinators of functions that update the DOM are composable . And it is pure Haskell, no need to use Javascript libraries.</div>
</div>
</div>
<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="text-align: justify;">
<br /></div>
</div>
<h3 style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
Usage in Reactive Frameworks</h3>
<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="text-align: justify;">
<br /></div>
</div>
<div style="background-color: white; font-family: verdana, arial, helvetica, sans-serif; margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: justify;">
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
I have to say that the virtual-DOM-React approach is ideal for functional reactive frameworks like Elm and others, since them manage the page as a whole. Every signal may change the whole page. I´m not an expert and my knowledge of this is far from accurate, but it seems to me that there are no event scopes, since the events feed a single entry point that re-render the whole page, as far as I know. Or alternatively they modify placeholders in a static template. Without React , Elm and all the functional reactive frameworks were limited to the second option. With it, they can perform more dynamic DOM effects. without React, it was hard to create a responsive TODO application in a functional reactive framework.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
<a href="https://www.google.es/search?q=monadic+reactive&oq=monadic+reactive&aqs=chrome..69i57j0.3260j0j7&sourceid=chrome&es_sm=93&ie=UTF-8#q=monadic+functional+reactive+programming" rel="nofollow" style="color: #336699; text-decoration: none;">Monadic functional reactive</a> may be more promising, since the events can be catched and managed locally (and the DOM updates are local too) they don't affect the whole computation and the re-rendering of the entire page. As the paper is the Google search says: "In other (non monadic) FRP approaches, either the entire FRP expression is re-evaluated on each external stimulus, or impure techniques are used to prevent redundant re-computations". That is the problem that Monadic Reactive solves.</div>
</div>
<div style="margin-bottom: 5px; margin-top: 5px; padding: 0px; text-align: start;">
<div style="text-align: justify;">
I don´t know how to to slip here <a href="http://github.com/agocorona/hplayground" rel="nofollow" style="color: #336699; text-decoration: none;">hplayground</a> which is a monadic functional reactive framework for Browser applications. For this framework, Perch is perfect. But also is fine as such, with event handlers managed by perch itself.</div>
</div>
</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com10tag:blogger.com,1999:blog-37577615.post-58845909827775788812014-11-13T18:12:00.000+01:002014-11-13T18:25:29.112+01:00Haskell running in the #cordovajp phonegap framework for hybrid smartphone applications.<blockquote class="twitter-tweet" data-partner="tweetdeck">
<a href="https://twitter.com/hashtag/Haskell?src=hash">#Haskell</a> running in the <a href="https://twitter.com/hashtag/cordovajp?src=hash">#cordovajp</a> phonegap framework for hybrid smartphone applications. Details soon <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a> <a href="http://t.co/toKsSKnZ8r">pic.twitter.com/toKsSKnZ8r</a><br />
— Alberto G. Corona (@AGoCorona) <a href="https://twitter.com/AGoCorona/status/532890594730082304">November 13, 2014</a></blockquote>
<script async="" charset="utf-8" src="//platform.twitter.com/widgets.js"></script>
<br />
<pre class="line-pre" style="background-color: white; box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.7999992370605px; width: 753px;"><div class="line" id="file-cordova-hs-LC1" style="box-sizing: border-box;">
<pre class="line-pre" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.7999992370605px; width: 753px;"><div class="line" id="file-cordova-hs-LC1" style="box-sizing: border-box;">
<div style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.7999992370605px; width: 753px;">
<pre class="line-pre" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.7999992370605px; width: 753px;"><div class="line" id="file-cordova-hs-LC1" style="box-sizing: border-box;">
<span style="font-size: large;">The source code and the instructions are <a href="https://gist.github.com/agocorona/1e141788b4cbfaec5bfc" target="_blank">here</a></span><br />
<div>
</div>
</div>
</pre>
The code has been put in another place avoid the disastrous and ever embarrassing formatting nightmares of Blogger.com, <span style="line-height: 16.7999992370605px;">that does whatever it wants with my posts, that convert copying and pasting into a horror film, every keystroke is an adventure, any innocent tag insertion into a Derridian deconstruction, whose matches of his previews with the reality are pure coincidence.</span></div>
<pre class="line-pre" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; line-height: 16.7999992370605px; width: 753px;"></pre>
</div>
</pre>
</div>
</pre>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-18728233512636133652014-09-16T14:54:00.000+01:002015-09-03T12:30:50.499+01:00Mi vision for a single high level language for the web and the cloud<div style="text-align: justify;">
The question of either to write code server side or browser side is more than a question, it is a problem. Either way, you will end up rewriting code from one side to the other because you suddenly will realize that to add something to that functionality in the server, you need something from the client and vice versa, after some changes you will realize that your functionality in the client would run better in the server or the other way around, so you will rewrite code back and forth from the server to the client and viceversa.</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
The underlying problem</h2>
<div style="text-align: justify;">
The underlying problem is the lack of a high level language both for the Web and the cloud, that can run in the server and in the browser, so that no code rewrite is necessary for communication locally or remotely, so each piece of functionality can be migrated at installation time depending on the capabilities of each node. Or.. better, at runtime, depending on capabilities and load conditions, from the server to the client and back. It can be done. It is something that I have been after since I started coding Web applications. First I tried it to design such a system with javascript, but at that time nothing in the Web architecture were mature enough.</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
The Web</h2>
<div style="text-align: justify;">
<a href="https://www.google.es/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=0CEIQFjAD&url=http%3A%2F%2Fthemonadreader.files.wordpress.com%2F2014%2F04%2Fmflow.pdf&ei=DygYVPGmDsme7AagvYG4DQ&usg=AFQjCNFBvHDXrYpNmYbs95psKIJ8eZEkOg&sig2=s0n3TmBxju20MgjQnqrEWQ&bvm=bv.75097201,d.ZGU" target="_blank">MFlow </a>and <a href="https://github.com/agocorona/hplayground" target="_blank">hplayground </a>are a server and a client haskell Web frameworks respectively. <b>Both share the same syntax and semantics, that is, almost the same code</b> for the creation of pages and for the creation of dynamic effects in them. MFlow can perform almost all the page dynamic effects with or without ajax and javascript, using full page refresh when AJAX is not available . Hplayground can perform richer reactive, dynamic effects since all the code has been compiled to javascript.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In my roadmap I plan to create a hplayground module for MFlow, with a single modifier, call it "client", that will compile the MFlow code to javascript using hplayground libraries and will run it in the browser. Otherwise it will behave as any other MFlow page procedure. Later that process of segregation will be automated; There will be no "client" modifier and any presentation code can be translated to javascript and can run in the browser, depending on the capabilities of the browser, load conditions, bandwidth etc.</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="text-align: justify;">
Cloud:</h2>
<div style="text-align: justify;">
MFlow has the FlowM monad, that can perform tracking, backtracking and long running transactions. See this article:</div>
<div style="text-align: justify;">
<br /></div>
<div>
<h3 class="r" style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: medium; font-weight: normal; margin: 0px; overflow: hidden; padding: 0px; text-align: justify; text-overflow: ellipsis; white-space: nowrap;">
<a href="https://www.fpcomplete.com/school/to-infinity-and-beyond/pick-of-the-week/how-haskell-can-solve-the-integration-problem" style="color: #660099; cursor: pointer; text-decoration: none;">How Haskell can solve the <span style="font-weight: bold;">integration problem</span> - <span style="font-weight: bold;">FP Complete</span></a></h3>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
These effecta are very important for the creation of loosely coupled architectures where exceptional conditions are not only exceptional, they also may be a part of the flow. Conceptually a web application is a loosely coupled application with a server and a browser, where the client interrupt and send requests and responses in any order. To deal with that, the FlowM monad has these tracking, backtracking and state management effects. These are the very same effects necessary for dealing with communication failures, error conditions or transaction rollbacks from other MFlow nodes and/or databases without resorting to the spaghetti code of event handlers and a centralized updated state. Like in the case of web frameworks, spaghetization precludes the programming of cloud framework such is Cloud Haskell at a higher level.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In my roadmap is the creation of MFlow node communication for synchronization and inter-node data access, using the web first, and later cloud Haskell as communication means, so that clusters of MFlow nodes share the processing load and the data access load. At the end all the cloud distribution of resources will start in a single program in a single node. The distribution of data and procedures will be automatic. I will add a "remote" modifier to distribute MFlow procedures. Later this remote modifier will disappear and it will be automatic, just like in the case of the "client" modifier for the browser. But this time these application would not be focused in web applications but any kind of them.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This may sound too ambitious. In fact that was never my goal, but a goal of the developer community. I always found it desirable and realizable, but not by me alone. However I never imagined that I would realize it to the level that I've already done. I ever thought that this would be done by other people. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Who knows maybe I can see it realized. Maybe I find more people to join this vision. God will say.<br />
<br />
UPDATE 03/09/2015 instead of cloud haskell, I developped my own distributed architecture, that is higher level; Transient:<br />
<br />
http://github.com/agocorona/transient<br />
<br />
Transient is based on the hplaygroud monad for handling events reactively. An event can be a mouse click, but also the arrival of data through a socket. The MFlow web server and and navigation can be implemented on top of that so the dream is closer to reality.</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-28154078659855747502014-09-13T16:26:00.001+01:002014-09-13T16:26:20.601+01:00Spreadsheet-like program in the browser using loeb iteration and loop resolutionI finally did what I was trying to do: to add full spreadsheet like effects to <a href="http://github.com/agocorona/hplayground" target="_blank">hplayground</a> the haskell-javascript framework that uses the <a href="http://haste-lang.org/" target="_blank">haste compiler</a><div>
<br /><div>
See the example running:</div>
<div>
<br /></div>
<div>
<a href="http://tryplayg.herokuapp.com/try/spreadsheet.hs/edit">http://tryplayg.herokuapp.com/try/spreadsheet.hs/edit</a></div>
<div>
<br /></div>
<div>
I used the tryplayg IDE to develop the example and It works well. I have to improve it a lot however.</div>
<div>
<br /></div>
<div>
<div>
This program calculates speed, time and space. Each one depends on the other two. Each cell has two values: his current entered value and the expression which calculates it from other cell values/expressions. circularity is permitted.</div>
<div>
<br /></div>
<div>
The Cell recalculation code uses the famous <a href="http://blog.sigfpe.com/2006/11/from-l-theorem-to-spreadsheet.html" target="_blank">loeb expression</a> by Dan Piponi in the 2006. Until now by my knowledge there have'nt been any materialization of this formula on a real working spreadsheet. this one is close to it. Since loeb enters in a infinite loop when circular expressions are used, the program counts the loops and reduces complexity by progressively substituting formulas by cell values until the expression has no loops</div>
<div>
<br /></div>
<div>
This program is configured for immediate recalculation on cell change, but that can be adapted to allow the modification of more than one cell before recalculation by triggering it by means of a button.</div>
</div>
</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-23701462304619048962014-09-05T17:35:00.000+01:002014-09-05T17:36:23.545+01:00IDE for Haste projects<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 13px;">I finished an Elm-like IDE for Haste projects. <a href="http://haste-lang.org/" target="_blank">Haste</a> is a compiler from Haskell to Javascript. The software is at: </span><br />
<div style="background-color: white;">
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<a href="https://github.com/agocorona/tryhplay" style="color: #1155cc;" target="_blank">https://github.com/agocorona/<wbr></wbr>tryhplay</a></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
Running in a heroku instance with a simple example:</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<a href="http://tryplayg.herokuapp.com/try/console.hs/edit" style="color: #1155cc;" target="_blank">http://tryplayg.herokuapp.com/<wbr></wbr>try/console.hs/edit</a></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
Besides to edit-compile and run, it can also import , compile and run haste projects from git repositories (Although this, like the rest of the project is experimental).</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
I use it for my <a href="https://github.com/agocorona/hplayground" target="_blank">hplayground</a> framework but it can run any haste project.</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
Using playground is easy to translate console programs to the browser and have reactive effects</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
A simple example:</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<div>
<a href="http://tryplayg.herokuapp.com/try/fact.hs/edit" style="color: #1155cc;" target="_blank">http://tryplayg.herokuapp.com/<wbr></wbr>try/fact.hs/edit</a></div>
<div>
<br /></div>
<div>
the hello-haste example:</div>
<div>
<br /></div>
<div>
<a href="http://tryplayg.herokuapp.com/try/hello-haste.hs/edit" style="color: #1155cc;" target="_blank">http://tryplayg.herokuapp.com/<wbr></wbr>try/hello-haste.hs/edit</a></div>
<div>
<br /></div>
<div>
Or something more complicated: the todo application, from todoMVC.com written in Haste and hplayground:</div>
<div>
<br /></div>
<div>
<a href="http://tryplayg.herokuapp.com/try/todo.hs/edit" style="color: #1155cc;" target="_blank">http://tryplayg.herokuapp.com/<wbr></wbr>try/todo.hs/edit</a></div>
<div>
<br /></div>
<div>
rename the programs if you modify them. Follow the instructions to download the HTML generated, that include the Javascript generated. At this time there are no permission controls so it is more or less like a wiki, but heroku from time to time will reset the application.</div>
<div>
<br /></div>
<div>
It is a free instance on heroku so expect delays and request timeouts when many people access to the application. I do not know what will happen. Feedback welcome</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
My heroku instance is limited but It is easy to create your own instance in heroku. Follow the install instructions. At:</div>
</div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
<div>
<span style="color: #222222; font-family: arial, sans-serif; font-size: x-small;"><a href="https://github.com/agocorona/tryhplay/blob/master/README.md">https://github.com/agocorona/tryhplay/blob/master/README.md</a></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div style="color: #222222; font-family: arial, sans-serif; font-size: 13px;">
<br /></div>
</div>
</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-91500007008478316862014-08-08T11:16:00.002+01:002014-08-08T11:16:24.821+01:00A monad for reactive programming at SOH<div style="background-color: white; margin-bottom: 10px;">
<span style="color: #333333; font-family: Merriweather;"><span style="line-height: 27.200000762939453px;">Functional reactive programming has no notion of event scope. A functional, declarative, reactive computation is affected as a whole by a signal, and must re-start from the beginning in some way, since it is declarative. A monad can contain the scope of the signal, so part of the computation already done, upstream, do not change when a signal is injected at some level of the computation by an active component.</span></span></div>
<div style="background-color: white; margin-bottom: 10px;">
<span style="color: #333333; font-family: Merriweather;"><span style="line-height: 27.200000762939453px;"><br /></span></span></div>
<div style="background-color: white; margin-bottom: 10px;">
<span style="color: #333333; font-family: Merriweather;"><span style="line-height: 27.200000762939453px;">A monad can decompose the computation in a chain of event handlers virtually set up by the monadic computation when it is called by the top signal, that is, when it is run for the first time. This has many applications, not only in web programmin. I present a mook-up of a comercial application:</span></span></div>
<a href="https://www.fpcomplete.com/user/agocorona/a-monad-for-reactive-programming-part-1">A monad for reactive programming at SOH</a>memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-31878095037204404822014-08-07T17:04:00.001+01:002014-08-07T17:04:45.534+01:00Running MFlow applications on HerokuI updated this entry<br />
<br />
<a href="http://haskell-web.blogspot.com.es/2013/05/running-mflow-applications-on-heroku.html">http://haskell-web.blogspot.com.es/2013/05/running-mflow-applications-on-heroku.html</a><br />
<br />
Since the method no longer work since it produce timeouts with the modern version of some external libraries. Now the procedure uses anvil and works.memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-76961781876905133112014-07-29T15:43:00.004+01:002014-07-30T09:10:52.145+01:00New TODO application for the hplayground client side framework. Feedback welcome<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px;">
<a href="http://todomvc.com/">todoMVC.com</a> created a reference application for testing and comparing client side frameworks. </div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px;">
Well. I did the one for haplaygroud:</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px;">
Running:<br />
<a href="http://mflowdemo.herokuapp.com/todo.html" style="background: transparent; box-sizing: border-box; color: #4183c4; text-decoration: none;">http://mflowdemo.herokuapp.com/todo.html</a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px;">
The code:<br />
<a href="https://github.com/agocorona/hplay-todo" style="background: transparent; box-sizing: border-box; color: #4183c4; text-decoration: none;">https://github.com/agocorona/hplay-todo</a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px;">
You can compare this code with the one of other frameworks. Feedback welcome.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px; margin-top: 15px;">
The hplayground git site:<br />
<a href="https://github.com/agocorona/hplayground" style="background: transparent; box-sizing: border-box; color: #4183c4; text-decoration: none;">https://github.com/agocorona/hplayground</a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px; margin-top: 15px;">
Some little bugs remain.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-bottom: 15px; margin-top: 15px;">
hplayground is a haskell framework that compiles to JavaScript (or to HTML directly) using a Haskell to JavaScript compiler : haste.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 14px; line-height: 23.799999237060547px; margin-top: 15px;">
hplayground code has full reinversion of control. The code look like a console application with no event handlers. It is oriented towards rewrites of the HTML.DOM rather than to achieve dynamic behaviours by means of changing class attributes and hiding elements. therefore the dynamic effects, like edition of entries etc are done in such a way. </div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-78562025300806880232014-07-01T20:55:00.000+01:002014-07-01T21:27:14.301+01:00hplayground: write haskell code for the browser console-like and have reactive, window and spreadsheet effects for freeWell this is the time to report something and get some feedback.<br />
<br />
I have been trying to port the formlets concept to the client side with a lot of success. I think. The applicative and monadic code of the MFlow widgets works almost unchanged when compiled to Javacript with the haste compiler.<br />
<br />
I called it <a href="https://github.com/agocorona/playground">hplayground </a>since it is more marketable than <a href="https://github.com/agocorona/haskell-js-reactive-widgets" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" target="" title=""> Haskell-js-reactive-widgets</a> . And it seems to me something that convert the browser into a playground to essay different things. The DOM tree structure, the HTML formatting, the events, are not an impediment for making simple things simply. It helps making complicated things easy since all of them work in harmony.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU31ypOccaGsh00m3drSFL1Nylyx2ixaYHEGWLAwC0d6Uw4OEn94h4bZF7EliVy0Me8pUjIywJ9xiiuOQrIdH5hifqnQrWl87tCtegunlU3XBcX5wGvrIbH_0vd8Vmv5kGTXDUEQ/s1600/playground.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU31ypOccaGsh00m3drSFL1Nylyx2ixaYHEGWLAwC0d6Uw4OEn94h4bZF7EliVy0Me8pUjIywJ9xiiuOQrIdH5hifqnQrWl87tCtegunlU3XBcX5wGvrIbH_0vd8Vmv5kGTXDUEQ/s1600/playground.png" height="271" width="400" /></a></div>
<br />
The examples are alive here:<br />
<a href="http://mflowdemo.herokuapp.com/noscript/wiki/browserwidgets">http://mflowdemo.herokuapp.com/noscript/wiki/browserwidgets</a><br />
<br />
What i achieved? the possibility to create applications in the browser as fast as easy as console applications and have console, reactive, window-oriented and spreadsheet-like behaviours for free. The mix is a weird but powerful programming something. A kind of having your cake and eat it too.<br />
<br />
The problem with the current haskell/elm reactive-declarative developments in the client side is as follows: They all create static layouts with holes that will be modified declaratively expressing reactive dependencies. The result is that page content can not be modified, except the holes.<br />
<br />
I want everything, including the layout, to be modifiable by the events. and this means monadic code. And this means that the layout and the events must run across ifs, elses, case and branches of the code.<br />
<br />
The hplayground idea is to use applicative code for static layouts but also monadic code for dynamic updates The events propagate downstream within the monadic code. Whenever that a widget raises an exception, the rest of the monadic computation is triggered, generating new rendering. The events, the computation, the HTML.DOM modifications of the layout follows the same natural and intuitive path within the monadic computation.<br />
<br />
This is an static layout with to input boxes with a dynamic part at the end that show the results when the two input boxes validates:<br />
<br />
<pre style="box-sizing: border-box; overflow: auto;"><div class="line" id="LC39" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">sumtwonumbers</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">p</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"sum two numbers and append the result"</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span></div>
<div class="line" id="LC40" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">p</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><<<</span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC41" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">r</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- (<!-----><!-----></span><span class="o" style="box-sizing: border-box; font-weight: bold;">+</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><$></span> <span class="n" style="box-sizing: border-box;">inputInt</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Nothing</span> <span class="p" style="box-sizing: border-box;">`</span><span class="n" style="box-sizing: border-box;">raiseEvent</span><span class="p" style="box-sizing: border-box;">`</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">OnKeyUp</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><++</span> <span class="n" style="box-sizing: border-box;">br</span><!-----><!-----><!-----></div>
</pre>
<div class="line" id="LC43" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="o" style="box-sizing: border-box; font-weight: bold;"><*></span> <span class="n" style="box-sizing: border-box;">inputInt</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Nothing</span> <span class="p" style="box-sizing: border-box;">`</span><span class="n" style="box-sizing: border-box;">raiseEvent</span><span class="p" style="box-sizing: border-box;">`</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">OnKeyUp</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><++</span> <span class="n" style="box-sizing: border-box;">br</span></div>
<div class="line" id="LC45" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">p</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><<<</span> <span class="n" style="box-sizing: border-box;">fromStr</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"result: "</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">b</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">show</span> <span class="n" style="box-sizing: border-box;">r</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">return</span><span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span><span class="p" style="box-sizing: border-box;">)</span></div>
<div class="line" id="LC46" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
</div>
<div style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
<span class="s" style="box-sizing: border-box; color: #dd1144;">
</span></div>
<div>
<span class="s" style="box-sizing: border-box;"></span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">This is a combination of applicative (static) and monadic (dynamic) layout with reactive event handling. When one of the two fields receive a character, the result is updated. If some of the input boxes do not validate, the result line is deleted. It appears when the two boxes validate again.</span><br />
<span class="s" style="box-sizing: border-box;"><br /></span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;"><span class="n" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px; white-space: pre;">inputInt</span><span style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px; white-space: pre;"> :: Maybe Int -> Widget Int</span></span><br />
<span class="s" style="box-sizing: border-box;"><span style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px; white-space: pre;"><br /></span></span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">How that happens? raiseEvent attach an event handler to the input box. This event handler i re-executes the the current widget and the rest of the monadic computation down. This rest of the computation rewrite the HTML that generated previously, in this case, the result. So result is erased and rewritten when one of the two input boxes are modified.</span><br />
<span class="s" style="box-sizing: border-box;"><br /></span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
<span style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px; white-space: pre;">raiseEvent :: </span><span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="font-size: 12px; line-height: 18px;"> :: Widget a -> HasteEventType ->Widget a</span></span>
</span><br />
<span class="s" style="box-sizing: border-box;"><span style="color: #333333; font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;"><span style="font-size: 12px; line-height: 18px;"><br /></span></span></span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">the layout: 'br' 'p' and the input box etc are elements of the haste-perch library, described in the previous post. They are added to the active input elements by means of operators for enclosing (<<<) prepending (++>) and postpending (<++). </span><br />
<span class="s" style="box-sizing: border-box;"><br /></span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<$> and <*> are ordinary applicative combinators and (+) is the sum.<br />
<br /></div>
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
So events, layout and computation follow the same path. You can see a more complex example:<br />
<br /></div>
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px; overflow: auto;"><div class="line" id="LC50" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">recursivesum</span><span style="color: #333333;"> </span><span class="ow" style="box-sizing: border-box; color: #333333; font-weight: bold;">::</span><span style="color: #333333;"> </span><span style="color: #445588;"><b>Widget</b></span><span style="color: #333333;"> </span><span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span></div>
<div class="line" id="LC51" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">recursivesum</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">p</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"sum recursively n numbers. When enters 0, present the result"</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">sumr</span> <span class="mi" style="box-sizing: border-box; color: #009999;">0</span></div>
<div class="line" id="LC52" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">where</span></div>
<div class="line" id="LC53" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">sumr</span> <span class="n" style="box-sizing: border-box;">r</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span><span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC54" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">r'</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- <span class="n" style="box-sizing: border-box; font-weight: bold;">inputInt</span><span style="font-weight: bold;"> </span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Nothing</span><span style="font-weight: bold;"> </span><span class="p" style="box-sizing: border-box; font-weight: bold;">`</span><span class="n" style="box-sizing: border-box; font-weight: bold;">raiseEvent</span><span class="p" style="box-sizing: border-box; font-weight: bold;">`</span><span style="font-weight: bold;"> </span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">OnKeyUp</span><!-----><!-----><!-----></span></div>
<div class="line" id="LC55" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">if</span> <span class="n" style="box-sizing: border-box;">r'</span><span class="o" style="box-sizing: border-box; font-weight: bold;">==</span> <span class="mi" style="box-sizing: border-box; color: #009999;">0</span></div>
<div class="line" id="LC56" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">then</span> <span class="n" style="box-sizing: border-box;">br</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">fromStr</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"result: "</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">b</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">show</span> <span class="n" style="box-sizing: border-box;">r</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">empty</span></div>
<div class="line" id="LC57" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">else</span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC58" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">b</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">show</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="n" style="box-sizing: border-box;">r</span><span class="o" style="box-sizing: border-box; font-weight: bold;">+</span><span class="n" style="box-sizing: border-box;">r'</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">br</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">return</span> <span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span></div>
<div class="line" id="LC59" style="box-sizing: border-box; color: #333333; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">sumr</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">r</span><span class="o" style="box-sizing: border-box; font-weight: bold;">+</span><span class="n" style="box-sizing: border-box;">r'</span><span class="p" style="box-sizing: border-box;">)</span></div>
</pre>
</span></div>
<div style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
<br /></div>
<div>
<span class="s" style="box-sizing: border-box;"></span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">Here there is a input box. Initially it is empty so it does not validate and the computation stop there. If the user enter 0, it present the result. If not it call itself recursively, so it creates another input box and so on. Until 0 is entered and the current sum is presented again below the last input box. If you change an intermediate value in a input box above you can see that the following input boxes are deleted, since the event handler deletes the layout of the continuation and rewrite it. </span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">There is a version in the examples that remember the old entries using a session context.</span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
<span class="s" style="box-sizing: border-box;">This example has a fixed number of input boxes:</span></div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
</div>
<span class="s" style="box-sizing: border-box;">
</span>
<br />
<pre style="box-sizing: border-box; overflow: auto;"><div class="line" id="LC62" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="s" style="box-sizing: border-box;"><span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">sumfold</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">p</span> <span class="p" style="box-sizing: border-box;">(</span><span class="s" style="box-sizing: border-box; color: #dd1144;">"This widget sum "</span><span class="o" style="box-sizing: border-box; font-weight: bold;">++</span> <span class="n" style="box-sizing: border-box;">show</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++</span><span class="s" style="box-sizing: border-box; color: #dd1144;">" numbers and append the result using a fold"</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span></span></div>
<span class="s" style="box-sizing: border-box;">
<div class="line" id="LC63" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">p</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><<<</span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC64" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">r</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- foldl </span><span class="p" style="box-sizing: border-box;">(</span><span class="o" style="box-sizing: border-box; font-weight: bold;"><></span><span class="p" style="box-sizing: border-box;">)</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">return</span> <span class="mi" style="box-sizing: border-box; color: #009999;">0</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">.</span> <span class="n" style="box-sizing: border-box;">take</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="n" style="box-sizing: border-box;">repeat</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="n" style="box-sizing: border-box;">inputInt</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Nothing</span> <span class="p" style="box-sizing: border-box;">`</span><span class="n" style="box-sizing: border-box;">raiseEvent</span><span class="p" style="box-sizing: border-box;">`</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">OnKeyUp</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><++</span> <span class="n" style="box-sizing: border-box;">br</span><!-----><!-----><!-----></div>
</span></pre>
<span class="s" style="box-sizing: border-box;">
</span></div>
<div class="line" id="LC65" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">br</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">fromStr</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"result: "</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">b</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">show</span> <span class="n" style="box-sizing: border-box;">r</span><span class="p" style="box-sizing: border-box;">)</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">return</span> <span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span><span class="p" style="box-sizing: border-box;">)</span></div>
<div style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
<span class="p" style="box-sizing: border-box;">
</span></div>
<div style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
</div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">Since Widget a is a instance of monoid as long as a is a Monoid, any number of them can be folded.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">Graphics are possible also, no news here, since the canvas internal layout is managed by his own monad in Haste. And that is right. However if you look at the "function draw" example and the "gallery" example you can see that the canvas is erased and recreated when the input boxes or a timeout event arrives. The reactive effect of the function draw example is noteworthy.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">One more example: The pascal triangle:</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<pre style="box-sizing: border-box; overflow: auto;"><div class="line" id="LC135" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;">-- pascal triangle http://www.haskell.org/haskellwiki/Blow_your_mind</span></div>
<div class="line" id="LC136" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
</div>
<div class="line" id="LC137" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">pascal</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">iterate</span> <span class="p" style="box-sizing: border-box;">(</span><span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">\</span><span class="n" style="box-sizing: border-box;">row</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="n" style="box-sizing: border-box;">zipWith</span> <span class="p" style="box-sizing: border-box;">(</span><span class="o" style="box-sizing: border-box; font-weight: bold;">+</span><span class="p" style="box-sizing: border-box;">)</span> <span class="p" style="box-sizing: border-box;">([</span><span class="mi" style="box-sizing: border-box; color: #009999;">0</span><span class="p" style="box-sizing: border-box;">]</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++</span> <span class="n" style="box-sizing: border-box;">row</span><span class="p" style="box-sizing: border-box;">)</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">row</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++</span> <span class="p" style="box-sizing: border-box;">[</span><span class="mi" style="box-sizing: border-box; color: #009999;">0</span><span class="p" style="box-sizing: border-box;">]))</span> <span class="p" style="box-sizing: border-box;">[</span><span class="mi" style="box-sizing: border-box; color: #009999;">1</span><span class="p" style="box-sizing: border-box;">]</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">::</span> <span class="p" style="box-sizing: border-box;">[[</span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Int</span><span class="p" style="box-sizing: border-box;">]]</span></div>
<div class="line" id="LC138" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
</div>
<div class="line" id="LC139" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">showpascal</span> <span class="n" style="box-sizing: border-box;">n</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">p</span> <span class="o" style="box-sizing: border-box; font-weight: bold;"><<</span> <span class="p" style="box-sizing: border-box;">(</span><span class="s" style="box-sizing: border-box; color: #dd1144;">"Show "</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++</span> <span class="n" style="box-sizing: border-box;">show</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">++</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">" rows of the Pascal triangle "</span><span class="p" style="box-sizing: border-box;">)</span></div>
<div class="line" id="LC140" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">mconcat</span><span class="p" style="box-sizing: border-box;">[</span><span class="n" style="box-sizing: border-box;">p</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">!</span> <span class="n" style="box-sizing: border-box;">atr</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"style"</span> <span class="s" style="box-sizing: border-box; color: #dd1144;">"text-align:center"</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="n" style="box-sizing: border-box;">row</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">|</span> <span class="n" style="box-sizing: border-box;">row</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- take</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="n" style="box-sizing: border-box;">pascal</span><span class="p" style="box-sizing: border-box;">]</span><!-----><!-----><!-----></div>
</pre>
</div>
<div class="line" id="LC141" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; height: 18px; line-height: 18px; padding-left: 10px;">
<span class="o" style="box-sizing: border-box; font-weight: bold;">++></span> <span class="n" style="box-sizing: border-box;">empty</span> <span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;">-- the applicative empty === noWidget</span><br />
<span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;"><br /></span>
<span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;"><br /></span></div>
<div style="color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
<span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;">
</span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">Things are not yet finished. I have to create an MFlow application for people to play with the idea. I have to upload the last version of the examples to the page </span></span><br />
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><a href="http://mflowdemo.herokuapp.com/noscript/wiki/browserwidgets">http://mflowdemo.herokuapp.com/noscript/wiki/browserwidgets</a></span></span><br />
<span style="font-family: Times New Roman;"><br /></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">Where these examples can be seen in action</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">I have to manage mouse events. It probably will use the same semantics than the wtimeout call, used in the gallery example.</span></span><br />
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">Finally, for the updates of non local elements of the layout that not follow the default downstream flow of a monadic computation (think for example on something like a spreadsheet) Some of them can be done using Haste.DOM primitives , but I have to create high level abstractions like the cell concept. But I have not finished it yet.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">By the way, Haste works like a charm. It produces short efficient code. All the examples fit in 100k of javascript code.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">At this moment only text boxes and buttons work. I have to add the dropdowns option buttons and wlinks. so that full window like applications can be created. I just follow the path of higher resistance and leave the easy things for later.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">An finally, some day I will take time to make my presentations, my examples and my texts more readable and more pretty and at least not as dyslexic as they are, but God did not called me to go this path. Too busy programming. Blogger conspirates against me, but I have no clue about what happens with the layout of this page.</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span></div>
<div>
<span style="font-family: Times New Roman;"><span style="white-space: normal;"><br /></span></span>
<span style="font-family: Times New Roman;"><span style="white-space: normal;">To summarize, with little more effort that what you would employ in the creation of a console application and with the same structure, you can create a live dynamic application running in any browser.</span></span></div>
<div style="color: #dd1144; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;">
</div>
<br />memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-66657387415090790612014-06-06T10:58:00.000+01:002014-07-02T07:55:24.660+01:00Taming the HTML DOM with monads and monoids<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
Haste is a compiler that generates Javascript code from Haskell.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
<a href="https://github.com/valderman/haste-compiler" style="box-sizing: border-box; color: #4183c4; text-decoration: none;">https://github.com/valderman/haste-compiler</a></div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
The Haste.DOM module define a thin layer over the JavaScript DOM. That makes the creation and manipulation of DOM elements as painful as in JavaScript. The reason is because to add an element it is necessary two steps: to create the element and get the reference to that elemen, and to append the element as child of the parent. This linking of references by hand is what makes the creation of dynamic HTML hard, tedious and inelegant.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
That is why all the Haskell-Javascript compilers have static HTML demos most of the time, and they concentrate in the creation of graphics, that CAN be programmed in a more pleasant way.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
This package makes the creation of DOM elements easy with a syntax similar to other haskell HTML generators, using monoids and monads, such is the case of the package blaze-html.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
This is an example. <code style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; margin: 0px; padding: 0px;">withElem</code> is a Haste.DOM call that give the DOM object whose id is "idelem", that has been created "by hand" in Main.hs. The builder that I created (see the link below) takes this element and add content by defining a hierarchy within the `JSBuilder` monad:</div>
<pre style="background-color: #f8f8f8; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 13px; line-height: 19px; margin-bottom: 15px; margin-top: 15px; overflow: auto; padding: 6px 10px; word-wrap: normal;"><code style="background: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: none; box-sizing: border-box; display: inline; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: inherit; margin: 0px; padding: 0px; word-wrap: normal;"> main= do
withElem "idelem" . build $ do
div $ do
div $ do
p "hello"
nelem "p" `attr` ("style","color:red") `child` "world"
return ()
div cont= nelem "div" `child` cont
p cont = nelem "p" `child` cont
</code></pre>
<div style="box-sizing: border-box; margin-bottom: 15px; margin-top: 15px;">
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
`child` and `nelem` are defined in the builder too.</div>
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
<br /></div>
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
No element references have to be managed by the programmer unlike in the case of the plain DOM interface. Try to do it using plain DOM calls.</div>
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
<br /></div>
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
The output in the browser is:</div>
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
NOTE: blogger is sooo ugly . Execute it and look at the HTML code for yourself.</div>
</div>
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">The HTML rendering is:</span><br />
<div style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
hello</div>
<div style="color: red; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">
world</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
How it works? The basic element is a `builder ` data type that has a "hole" parameter and a IO action which creates the element. The hole contains the parent (Elem) of the element being created.<br />
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC21" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">newtype</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilderM</span> <span class="n" style="box-sizing: border-box;">a</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span><span class="p" style="box-sizing: border-box;">{</span><span class="n" style="box-sizing: border-box;">build</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">::</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Elem</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">IO</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Elem</span><span class="p" style="box-sizing: border-box;">}</span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">deriving</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Typeable</span></div>
<div class="line" id="LC22" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
</div>
<div class="line" id="LC23" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">type</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilderM</span> <span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span></div>
<div>
</div>
<div>
</div>
</pre>
The phanton type <span style="font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;">'a' </span><span style="font-size: 15px;">is in order make a valid monad instance of </span><span style="color: #445588; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; font-weight: bold; line-height: 18px; white-space: pre;">JSBuilderM </span><span style="font-size: 15px;">with the appropriate kind. Nothing more.</span><br />
<span style="font-size: 15px;"><br /></span>
Upon created, the elem is added to the parent and return itself as parent of the next elements. That is the creation of an element:<br />
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC65" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">nelem</span> <span class="n" style="box-sizing: border-box;">s</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">\</span><span class="n" style="box-sizing: border-box;">e</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span><span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC66" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">e'</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- <span class="n" style="box-sizing: border-box;">newElem</span> <span class="n" style="box-sizing: border-box;">s</span></span></div>
<div class="line" id="LC67" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">addChild</span> <span class="n" style="box-sizing: border-box;">e'</span> <span class="n" style="box-sizing: border-box;">e</span></div>
<div class="line" id="LC68" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">return</span> <span class="n" style="box-sizing: border-box;">e'</span></div>
<div>
<span class="n" style="box-sizing: border-box;">
</span></div>
</pre>
<span style="font-size: 15px;"><br /></span>
<span style="font-size: 15px;">To append two elements, it executes the build-link procedure defined for each element to the parent, and return the parent node:</span><br />
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC26" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">instance</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">Monoid</span> <span class="p" style="box-sizing: border-box;">(</span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilderM</span> <span class="n" style="box-sizing: border-box;">a</span><span class="p" style="box-sizing: border-box;">)</span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">where</span></div>
<div class="line" id="LC27" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">mappend</span> <span class="n" style="box-sizing: border-box;">mx</span> <span class="n" style="box-sizing: border-box;">my</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">\</span><span class="n" style="box-sizing: border-box;">e</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC28" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">build</span> <span class="n" style="box-sizing: border-box;">mx</span> <span class="n" style="box-sizing: border-box;">e</span></div>
<div class="line" id="LC29" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">build</span> <span class="n" style="box-sizing: border-box;">my</span> <span class="n" style="box-sizing: border-box;">e</span></div>
<div class="line" id="LC30" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">return</span> <span class="n" style="box-sizing: border-box;">e</span></div>
<div class="line" id="LC31" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">mempty</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="n" style="box-sizing: border-box;">return</span></div>
</pre>
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC33" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
</div>
</pre>
</div>
<div style="box-sizing: border-box; color: #333333; margin-top: 15px;">
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;">The expression:</span><br />
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<span class="n" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;">build</span><span style="font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;"> </span><span class="n" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;">mx</span><span style="font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;"> </span><span class="n" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;">e</span><br />
<span class="n" style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12.222222328186035px; line-height: 18px; white-space: pre;"><br /></span>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;">Executes the IO computation for the creation of the element/elements included (it may be a sub-tree). </span><br />
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;">To add a child, the parent's computation is executed, the chid is converted into a builder (using a ToElem instance) and the builder is executed taking the parent as parameter. Finally the parent is returned</span><br />
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC41" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">child</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">::</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">ToElem</span> <span class="n" style="box-sizing: border-box;">a</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=></span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="n" style="box-sizing: border-box;">a</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span></div>
<div class="line" id="LC42" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">child</span> <span class="n" style="box-sizing: border-box;">me</span> <span class="n" style="box-sizing: border-box;">ch</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">\</span><span class="n" style="box-sizing: border-box;">e'</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC43" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">e</span> <<span class="ow" style="box-sizing: border-box; font-weight: bold;">- <span class="n" style="box-sizing: border-box;">build</span> <span class="n" style="box-sizing: border-box;">me</span> <span class="n" style="box-sizing: border-box;">e'</span></span></div>
<div class="line" id="LC44" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">let</span> <span class="n" style="box-sizing: border-box;">t</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="n" style="box-sizing: border-box;">toElem</span> <span class="n" style="box-sizing: border-box;">ch</span></div>
<div class="line" id="LC45" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
.<span class="n" style="box-sizing: border-box;">build</span> <span class="n" style="box-sizing: border-box;">t</span> <span class="n" style="box-sizing: border-box;">e</span></div>
<div class="line" id="LC46" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">return</span> <span class="n" style="box-sizing: border-box;">e</span></div>
</pre>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;">Similarly, to add an attribute to an elem:</span><br />
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Monaco, Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC59" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">attr</span> <span class="n" style="box-sizing: border-box;">tag</span> <span class="p" style="box-sizing: border-box;">(</span><span class="n" style="box-sizing: border-box;">n</span><span class="p" style="box-sizing: border-box;">,</span> <span class="n" style="box-sizing: border-box;">v</span><span class="p" style="box-sizing: border-box;">)</span><span class="ow" style="box-sizing: border-box; font-weight: bold;">=</span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">JSBuilder</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">$</span> <span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">\</span><span class="n" style="box-sizing: border-box;">e</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do</span></div>
<div class="line" id="LC60" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">tag'</span> $lt;<span class="ow" style="box-sizing: border-box; font-weight: bold;">- <span class="n" style="box-sizing: border-box;">build</span> <span class="n" style="box-sizing: border-box;">tag</span> <span class="n" style="box-sizing: border-box;">e</span></span></div>
<div class="line" id="LC61" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">setAttr</span> <span class="n" style="box-sizing: border-box;">tag'</span> <span class="n" style="box-sizing: border-box;">n</span> <span class="n" style="box-sizing: border-box;">v</span></div>
<div class="line" id="LC62" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<span class="n" style="box-sizing: border-box;">return</span> <span class="n" style="box-sizing: border-box;">tag'</span></div>
</pre>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15.555556297302246px; line-height: 25.5px;"><br /></span>
<span style="font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px;">The Monad instance is there in order to use the do notation. This add a new level of syntax, in the style of the package blaze-html. This monad invokes the same appending mechanism.</span></div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
This makes the creation of dynamic Web apps in the browser with texts and formatting far more easy, as a seamless declarative sequence with the shape of the DOM three being created, rather than as a imperative sequence full of seams.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
The equivalent monoid expression can also be used, by concatenating elements with the operator <> or mappend<br />
<br />
I guess this technique can be generalized for the creation of any tree data structure and any kind of tree management primitives.</div>
<div style="box-sizing: border-box; color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif; font-size: 15px; line-height: 25.5px; margin-bottom: 15px; margin-top: 15px;">
The code and how it works, the demo etc is here:</div>
<div style="box-sizing: border-box; margin-bottom: 15px; margin-top: 15px;">
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;">https://github.com/agocorona/haskell-js-html-builder</span></span><br />
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;"><br /></span></span>
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;">UPDATE:</span></span><br />
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;">this software is now called "perch" and is published in the hackage repository. It support now the same syntax than blaze-html including attribute (!) operators etc.</span></span><br />
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;"><br /></span></span>
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;">https://hackage.haskell.org/package/haste-perch</span></span><br />
<span style="color: #333333; font-family: Helvetica, arial, freesans, clean, sans-serif;"><span style="line-height: 25.5px;"><br /></span></span></div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-58309036961271475542014-05-30T11:44:00.001+01:002014-05-30T11:59:55.296+01:00Separation of concerns by the problem domain, not by tecnology - Composable caching<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
The "separation of concern" -as is understood by MVC Web frameworks- does not separate concerns really. A separation of concern forced by technological problems rather than being separated by components of the problem domain is like saying that I live better as an slave because I have no need to be concerned by how good or bad the master behave. Caching is an example of this contradiction.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
The MVC model forces his own separation of concern and it is inherently non composable. It does not allow to create self contained elements -with M V and C components inside- that can be composed to create applications. That means that it can not separate the concerns in terms of application functionalities: login, payment, content management, lazy loading, auto-completion widgets etc. As well as other functionalities specific of the individual application. The separation is dictated from below. That is because the technologies involved: event-driven graphical presentation, transactional data management and business logic are not yet fully integrated. See: <a href="http://haskell-web.blogspot.com.es/2014/04/towards-deeper-integration-web-language.html">Towards a deeper integration: A Web language</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
Concerning caching, A HTTP guru, probably in other department does not know for how long your particular data is valid . Neither you know if the HTTP guru will cache your fresh data in order to avoid loading the server, so you will add a random string to your data to avoid caching. In any case, there is a opportunity lost for optimizing the load of the server without impairing the interaction.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
Now the new composable caching policies of MFlow permits the use of aggressive caching policies even for highly dynamic pages, since expressing cache directives is in the hands of the programmer of each particular widget. </div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
What if you, the programmer of a widget can say to the page: "this widget present data that can be cached for 200 seconds, no matter if it is part of a page or if its data is sent trough Ajax". Or: "the user has logged-in so this page must be private, no matter the policies of the rest of the widgets".</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
What if the page can get all the cache policies of all the widgets and insert the most restrictive ones in the HTTP header?</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
Then we would have a true separation of concern without impairing synergies.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
If the widget is refreshed using ajax, only the individual cache policy of the widget is taken into account. For example: I´m logged here as editor, so the login widget detect this condition and mark the page as private. But If I click an autorefreshed widget which is not marked as private and have a maxAge directive, the menu options on the left, for example, then the menus can be cached within network proxies and CDNs, so other users can make use of these cached resources without compromising my privacy.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">Going this way, more synergies appear in unsuspected ways; What is the killer application of the JavasCript frameworks? To present data sets without repeated accesses to the server using the new HTML5 cache</span>. Now this can be done by caching AJAX responses in the good old HTTP cache, and make it work in any browser without explicit JavaScript programming.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-align: justify; word-wrap: break-word;">
<br /></div>
<div style="text-align: justify; word-wrap: break-word;">
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">
Because blogger is almost impossible to tame for me. I leave a link to the full article about composable caching in the MFlow demo site:</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">
<br /></div>
<span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;"><span style="font-size: 14px;"><a href="http://mflowdemo.herokuapp.com/noscript/wiki/cachingdfield">http://mflowdemo.herokuapp.com/noscript/wiki/cachingdfield</a></span></span></div>
<pre style="white-space: pre-wrap; word-wrap: break-word;"><pre style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 18px;"><div class="line" id="LC120" style="box-sizing: border-box; height: 18px; padding-left: 10px;">
<div style="color: black; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; line-height: normal; white-space: normal;">
<div>
<pre style="white-space: pre-wrap; word-wrap: break-word;"><span class="n" style="box-sizing: border-box;">
</span></pre>
</div>
</div>
<span class="n" style="box-sizing: border-box;">
</span></div>
</pre>
</pre>
<br />
<div style="text-align: justify;">
<span class="webkit-html-tag"><span style="font-family: arial; font-size: 14.545454025268555px;"><br /></span></span></div>
<div style="text-align: justify;">
<span class="webkit-html-tag"><span style="font-family: arial; font-size: 14.545454025268555px;">See also: </span></span><a href="http://localhost/noscript/cachedataset" style="text-decoration: none;" target="" title="">Navigating an (infinite) dataset</a> </div>
<div>
<br /></div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-76953999980940236672014-04-04T09:16:00.001+01:002014-04-04T13:15:06.589+01:00Towards a deeper integration: A Web language<div style="text-align: justify;">
When I wrote the article "<a href="https://www.fpcomplete.com/business/blog/guest-post-solve-integration-problem/">How to solve the integration problem</a>", in which I assimilate web development to a general integration problem, I was not fully conscious of how true it was. Web development is becoming increasingly a problem of integration of different technologies, languages paradigms and applications. Consciously or unconsciously web developers view web applications as a problem of integration. as essentially the development and integration of two or three independent applications: one in the browser, other in the server and maybe another in the database, with a dozen configurations that glue these things together.<br />
<br />
That implicitly precludes the effort in the search for a higher paradigm that can be found by a deeper integration. That leaves essentially unresolved the problem of creating a true Web framework: A Web language. A framework in which the fundamental building block has data navigation presentation and storage and whatever other thing necessary inside itself. This building block that has all the components integrated, may be composed to build true web applications.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The situation is similar to the time when there were only batch systems. There was no unification of input, processing and output. the programmer created a job in a set of punched cards. The output of he job was sent to a printer. There were no interactive input-output. there were a input program, a processing program and a printing program. The applications ran essentially in the same way as a stateless web service work.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Then, interaction was added. both input and output streams were intermixed. state was added. Each programming component may alternate repeated input and output interactions. When there were previously only batch processes, then there were development environments, shells, games etc. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The building block for console applications had a higher level than the one of previous batch developments. The programmer managed abstractions in terms of the problem not in terms of the phase in the process in which the batch was executing for the hardware needs. That was because a new composable piece was found: the IO procedure, that combined input and output. The IO calls were a product on this revolution. that was a true revolution since it was an inversion of control where the program was in control of the flow. And a new kind of application was born: the interactive console application.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
But essentially the IO procedure was the combination of small batch programs: the OS and library calls. We don´t think on these small pieces as programs. we are so accustomed to work with pieces at a higher level that we do not even consider that. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Can we do the same for the Web?. One may say that this new de-inversion of control will produce problems of scalability, state handling etc. All this is true. But they are the very same problem that the Operating systems had when switched from batch to interactive applications: the batch systems did not leave state behind. They were fine and reliable. But people though that batch systems were not enough.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Can we do the same for the Web?. Unlike console applications. In Web applications the user must be in control, not the program. But the programmer must feel that he is in control of the flow.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
That is not only possible, but highly desirable. If the fused building block is composable, we would have the Rosetta Stone of integration, a new unified language upon which to talk at a higher level with the machines for building web applications and since web applications are a particular kind of application integration, we can extend it to any kind of integration problem, as I mentioned in the article above.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Furthermore, if the building block and the composition make use of well known ideas then the task of making that language understandable becomes far more easy. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
And now the marketing part. Excuse the bombastic tone, required in any marketing activity:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In the article mentioned above, I claim that MFlow do it. <a href="https://www.fpcomplete.com/user/agocorona/MFlowDSL">It is a Web language</a>. The MFlow building blocks are the widgets and the flow elements, (flowlets). A widget is an applicative or monadic piece of code with a parser of request parameters and a writer of HTML code. It combines the creation of rendering, request parsing, processing and session management among other in a single atomic composable element. In the other side, a flowlet manage reusable and composable flows of pages, with state management.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
People that know how to program monadic parsers will find natural how the MFlow monadic widgets works. People that know how to use formlets will find natural how applicative widgets behave. If an user know how to create imperative code, he can create page navigations.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
And the deep fusion of elements will give the opportunity to create easier solutions to known problems.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Soon I will add composable caching directives to MFlow, where a widget can express its own HTTP caching needs to the page, and I will show an example that uses this for caching javascript programs generated in the server by the haskell code to navigate a dataset without repeated accesses to the server.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Stay tuned.</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-34613214880709062632014-03-03T16:54:00.000+01:002014-03-04T07:59:38.697+01:00Single page apps with better than HTML5 storage using MFlow<i>See this article without the extra newlines introduced automatically by blogger</i><br />
<br />
<a href="http://mflowdemo.herokuapp.com/noscript/wiki/caching">http://mflowdemo.herokuapp.com/noscript/wiki/caching</a><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;"><br /></span>
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">In the latest version of MFlow, the autorefreshed widgets (the ones that use </span><a href="http://hackage.haskell.org/package/MFlow/docs/MFlow-Forms-Widgets.html#v:autoRefresh" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-decoration: none;" target="" title="">autRefresh</a><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">, </span><a href="http://hackage.haskell.org/package/MFlow/docs/MFlow-Forms-Widgets.html#v:appendUpdate" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-decoration: none;" target="" title="">appendUpdate </a><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">and </span><a href="http://hackage.haskell.org/package/MFlow/docs/MFlow-Forms-Widgets.html#v:prependUpdate" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-decoration: none;" target="" title="">prependUpdate</a><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">) can be cached. The advantage is that there are no spurious round-trips to the server to get fragments of pages that already have been sent. </span><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;"><br /></span>
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif;"><span style="font-size: 14px;">The goal is to avoid to access the server except whenever a heavy front-end framework would have the need to do it: when there are something new to get from the server.</span></span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">While JavaScript frameworks rely on heavy Javascript programming using the lattest HTML5 API storage facilities, MFlow relies on HTML fragments, retrieved using GET queries. They are stored in the browser HTTP cache. The HTTP caching works for you, The amount of programming is reduced drastically in relation with JavaScript frameworks. and the effect is compatible with all browsers.</span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">See for example this piece:</span><br />
<br />
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC85" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
showProducts= autoRefresh $</div>
<div class="line" id="LC85" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
<span class="kr" style="box-sizing: border-box; font-weight: bold;">do </span><span style="color: #333333;"> absLink </span><span style="color: #445588;">IPad </span><span class="o" style="box-sizing: border-box; font-weight: bold;"><<</span><span style="color: #333333;"> </span><span class="n" style="box-sizing: border-box;">b</span><span style="color: #333333;"> </span><span class="s" style="box-sizing: border-box; color: #dd1144;">"See Ipad models"</span></div>
<div class="line" id="LC87" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
showModel IPad</div>
<div class="line" id="LC88" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
</div>
<div class="line" id="LC88" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
<|> <span class="kr" style="box-sizing: border-box; font-weight: bold;">do </span><span style="color: #333333;"> absLink </span><span style="color: #445588;">IPod </span><span class="o" style="box-sizing: border-box; font-weight: bold;"><<</span><span style="color: #333333;"> </span><span class="n" style="box-sizing: border-box;">b</span><span style="color: #333333;"> </span><span class="s" style="box-sizing: border-box; color: #dd1144;">"See Ipad models"</span></div>
<pre style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Courier, monospace;"><div class="line" id="LC87" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
showModel IPod</div>
</pre>
<div class="line" id="LC91" style="box-sizing: border-box; color: #333333; padding-left: 10px;">
</div>
</pre>
<br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">Shows initially two links to two products. Since it is autoRefreshed, the fragment refresh itself when one of the links is pressed. When the user press the first of the links, by the definition of the Monad instance (see </span><a href="http://haskell-web.blogspot.com.es/2013/06/the-promising-land-of-monadic-formlets.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-decoration: none;" target="" title="">this</a><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">) the code that follows it is executed, so the rendering of the model appears. </span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">When the other link is pressed, the rendering of the second model appears, and the first collapses. (see the </span><a href="http://mflowdemo.herokuapp.com/noscript/wiki/links" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; text-decoration: none;" target="" title="">links </a><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">section of the wiki) . </span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">When the first link is pressed again, since the former was a GET request, if it is cached by the appropriate directives, there will not be a call again to the server. The fragment will be read from the browser's HTTP cache.</span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">That is how MFlow can perform the caching that the Javascript frameworks do with heavy HTML5 API programming</span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">MFlow has the </span><i style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">setHttpHeader </i><span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">call that, as the name tells, set the HTTP header directives. </span><br />
<br />
<pre style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: 18px;"><div class="line" id="LC689" style="box-sizing: border-box; padding-left: 10px;">
<span class="nf" style="box-sizing: border-box; color: #990000; font-weight: bold;">setHttpHeader</span> <span class="ow" style="box-sizing: border-box; font-weight: bold;">::</span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">MonadState</span> <span class="p" style="box-sizing: border-box;">(</span><span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">MFlowState</span> <span class="n" style="box-sizing: border-box;">view</span><span class="p" style="box-sizing: border-box;">)</span> <span class="n" style="box-sizing: border-box;">m</span></div>
<div class="line" id="LC690" style="box-sizing: border-box; padding-left: 10px;">
<span class="ow" style="box-sizing: border-box; font-weight: bold;">=></span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">ByteString</span> <span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;">-- ^ name</span></div>
<div class="line" id="LC691" style="box-sizing: border-box; padding-left: 10px;">
<span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="kt" style="box-sizing: border-box; color: #445588; font-weight: bold;">ByteString</span> <span class="c1" style="box-sizing: border-box; color: #999988; font-style: italic;">-- ^ value</span></div>
<div class="line" id="LC692" style="box-sizing: border-box; padding-left: 10px;">
<span class="ow" style="box-sizing: border-box; font-weight: bold;">-></span> <span class="n" style="box-sizing: border-box;">m</span> <span class="nb" style="box-sizing: border-box; color: #0086b3;">()</span></div>
</pre>
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">It is session-wide, so if you can put it at the beginning of the session. You can change it afterwards whereever you like. </span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">For example, this site now has a directive:</span><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<i style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;"> setHttpHeader "Cache-Control" "public, max-age=300"</i><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">This caching permits the options on the cascade menu on the demo to be filled without invoking repeated roundtrips to the server.</span><br />
<br />
<a href="http://mflowdemo.herokuapp.com/">http://mflowdemo.herokuapp.com</a><br />
<br style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;" />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 14px;">More fine control on HTTP caching will be developed. A component-based framework like this can mix pieces with different inherent caching needs: A widget that show private information inside a general container widget with less restrictive policy must respect the more restrictive directive automatically. </span>memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-4576701275342751762014-02-22T07:38:00.001+01:002014-02-24T17:41:09.016+01:00Parsec-like expressions to read web service parameters and generate the responseA haskell formlet is the combination of a parameter parser plus a writer to generate HTTP output<br />
<br />
I use this similarity to create parsec-like combinators that use the formlet monad in MFlow (the View monad) to parse the web service parameters and to generate the output.<br />
<br />
<br />
This service below implements a service that sum or multiply two Int-egers.<br />
<br />
<pre style="box-sizing: border-box;"><div class="line" id="LC40" style="box-sizing: border-box; padding-left: 10px;">
<pre style="box-sizing: border-box;"><div class="line" id="LC40" style="box-sizing: border-box; padding-left: 10px;">
<pre style="box-sizing: border-box;"><div class="line" id="LC40" style="box-sizing: border-box; padding-left: 10px;">
<span style="color: #990000; font-family: Consolas, Liberation Mono, Courier, monospace;"><span style="font-size: 12px; line-height: 18px;"><b>main = runNavigation "apiparser" . step . asks $
do rest "sum" ; disp $ (+) <$> wint "t1" <*> wint "t2"
<|> do rest "prod" ; disp $ (*) <$> wint "t1" <*> wint "t2"
<?> do -- blaze Html
h1 << "ERROR. API usage:"
h3 << "http://server/api/sum?t1=[Int]&t2=[Int]"
h3 << "http://server/api/prod?t1=[Int]&t2=[Int]"
where
asks w= ask $ w >> stop</b></span></span></div>
</pre>
</div>
</pre>
</div>
<div class="line" id="LC48" style="box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Courier, monospace; font-size: 12px; line-height: 18px; padding-left: 10px;">
<div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal; white-space: normal;">
See a more complete explanation and working examples here:<br />
<a href="http://mflowdemo.herokuapp.com/noscript/wiki/webservices">http://mflowdemo.herokuapp.com/noscript/wiki/webservices</a></div>
</div>
<div class="line" id="LC48" style="box-sizing: border-box; padding-left: 10px;">
</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
By the way:</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
</div>
<div style="font-family: 'Times New Roman'; white-space: normal;">
The blogger editing system is the ugliest and unfriendly thing invented by mankind. It is not worth being a Google product. The feedback link does not work.</div>
<div>
</div>
</pre>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-28097456867349221832014-02-13T09:32:00.001+01:002014-02-13T17:57:04.587+01:00World's longest working applicative and monadic combinator expression everat: <a href="http://mflowdemo.herokuapp.com/noscript/wiki/expressionever">http://mflowdemo.herokuapp.com/noscript/wiki/expressionever</a>memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-73798927993852798802014-01-17T16:26:00.001+01:002014-01-20T11:12:27.538+01:00On the importance of avoiding success... to have enduring success; The J2EE caseThere was a time -at the beginning- in which Java was an interesting language. It was possible to download the libraries at run time. It was a C++ for internet. There were things like ObjectSpace Voyager, that fifteen years ago embraced cloud computing (agent computing at that time) with movable code across the internet.<br />
<br />
But shortly after, Java was hijacked by maniacs of databases and database-centric developments. That crap called J2EE was born, with their Cobol-istic names and their unnecessary complications of dependency injection, their clustering by manual configuration and by their infinite chains of beans repeating essentially the same code, in endless communications by RMI to the host next to it in the LAN to read a simple register of the database. That poor copy of Microsoft DNA has dominated java development in the enterprise until today. In the meantime, other standard for web programming, web services and so on, big, complicated and with lack of innovation have been developed under the Java platform.<br />
<br />
All these business problems that J2EE tried to solve, could have been solved with ObjectSpace Vogager with a tenth of the code and with a fraction of the infrastructure necessary under that J2EE gold fever, but the businessmen and the innovators where in the hands of Software development departments, and both could not communicate. The software departments seek power and size, and that means bloated code, a lot of subcontracted people, buzzwords and a platform with which any mediocrity could call himself a "guru" or an "architect", and legions of configurators, maintainers, prescriptors and so on. And that was generously given by J2EE.<br />
<br />
I´m developing clustering and fail-over functionalities for MFlow using cloud haskell. And immediately I remembered that precious gem that was ObjectSpace Voyager. It was an agent-based java platform that was unbelievably powerful... except that it did not worshiped SQL databases. And <a href="https://www.google.es/search?q=objectspace+voyager+applications&oq=objectspace+Voyager&aqs=chrome.0.69i59l2j0j69i60.14517j0j4&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8#q=objectspace+voyager"> these are the few</a> references that I got. I notices that his creator, <a href="http://grahamglass.blogs.com/about.html">Graham Glass</a>, resigned as CEO and chief developer of the company at the peak of the popularity when the short-term oriented people in his company voted to join the B2B bandwagon -that was in fashion at that time- instead of continuing ObjectSpace as a company devoted to develop a general network business platform. The company went bankrupt the next year.<br />
<br />
The rest is history. Sun created the J2EE crap. BEA-Weblogic made a lot of money selling his crap J2EE Application server to software departments willing to eat money and resources from the rest of the company, SUN did the same with their overpriced servers.... And finally all of this went where it belonged from the beginning: to the One that J2EE and development deparments worshipped: the SQL database. Oracle took over.<br />
<br />
Oracle will go to death. And that will be the end of that nightmarish cultic gnostic religion.<br />
<br />
Let's start again, but learning the lessons from the pastmemetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-551946978569454762013-12-22T19:53:00.001+01:002013-12-22T19:53:48.310+01:00How Haskell can solve the integration problemWill show how long running tasks, Web apps, workflows, EAI Orchestration and BPM applications share the same underlying problem: The "integration problem", that only haskell can solve with more simplicity, generality and maintainability<br />
<br />
Creating a single application in the imperative style is easy and intuitive, because the programmer is in control of the sequence of things to do. But when it comes the time to integrate two or more autonomous entities that send events at any time in its own sequence then is when the programmer is not in control, so a different programming model is necessary. Such problem happens when trying to integrate the users with backoffice applications via web applications, but also when it is necessary to integrate two or more backoffice applications, company departments, web sites, web services etc.<br />
<br />
The standard model that solves this inversion of control problem has various names but esenstially is the same architecture with different names: finite state machine, state-transition system, a state machine system or a event handling model. That is the architecture of the main web frameworks, Enterprise Application Integration (EAI) frameworks, Orchestration frameworks, Workflow frameworks, Service Oriented Architecture (SOA) frameworks and Business Process Management (BPM) frameworks, that solve respectively, the individual above mentioned integration problems.<br />
<br />
See the tutorial at<br />
<br />
https://www.fpcomplete.com/user/agocorona/how-haskell-can-solve-the-integration-problem<br />
<br />
With a practical example.memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-31100325360968382482013-11-15T20:19:00.000+01:002013-11-15T20:19:06.697+01:0010+ things that you can do with MFlow and you can't with your Web framework<ol style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
<li><span style="white-space: pre-wrap;">Create test, integrate and install your logic <b>without concern for layout</b>. Edit your forms, widgets, style and content <b>at run time. </b></span></li>
<li><span style="white-space: pre-wrap;">Convert your application from single page to multiple page and back with little code modifications</span></li>
<li><span style="white-space: pre-wrap;">Make forms</span><span style="white-space: pre-wrap;"> that change their questions depending on your answers.</span></li>
<li><span style="white-space: pre-wrap;">Make a cascade menu with dynamic options programmatically in a single procedure</span></li>
<li><span style="white-space: pre-wrap;">Make an element of a page to refresh itself by adding a single statement</span></li>
<li><span style="white-space: pre-wrap;">Make an element to push its content with a simple modifier</span></li>
<li><span style="white-space: pre-wrap;">Press back as many times as you like by default</span></li>
<li><span style="white-space: pre-wrap;">Write a payment flow with some pages and seamlessly drop it whenever you need it</span></li>
<li><span style="white-space: pre-wrap;"><b>Write an active page element </b>with his own server code, JS, CSS <b>in a single procedure</b> and </span><span style="white-space: pre-wrap;"> seamlessly drop it whenever you need it</span></li>
<li><span style="white-space: pre-wrap;">Write your routes and control logic as in a console application. <b>No spaguetty callback code</b> </span></li>
<li><span style="white-space: pre-wrap;">Transparently store and retrieve session data for as long as you wish</span></li>
<li><span style="white-space: pre-wrap;">Make all of this without writing a single line of javaScript code. Although you can add it.</span></li>
<li><span style="white-space: pre-wrap;">Make all of this in a type safe way. <b>If your app compiles, it works</b>.</span></li>
<li><span style="white-space: pre-wrap;">Make (almost) all of this work with or without javascript activated.</span></li>
<li><span style="white-space: pre-wrap;">Make all of this in an architecture that is horizontally scalable (although not implemented such scalabiltiy yet)</span></li>
</ol>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
<span style="white-space: pre-wrap;"><br /></span></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
<a href="https://www.fpcomplete.com/user/agocorona/MFlow-tutoria" target="" title="">Quick Start</a> : Basics for understanding and using MFlow</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
<a href="https://www.fpcomplete.com/user/agocorona/MFlowDSL" target="" title="">Quick Start 2</a> : how to modify an application to add dynamic effects: implicit ajax, push etc.</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
<br /></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: small;">
MFlow site: http://mflowdemo.herokuapp.com</div>
<div>
<br /></div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-51434358994804611732013-11-11T18:21:00.001+01:002013-11-11T22:42:30.235+01:00Learning from the Haskell compiler<div style="text-align: justify;">
Haskell programming is naturally one level of abstraction above other languages either functional or not. It is not the functional paradigm. It is the type inference and, specially, the category theoretical grounds in which the language is based, for which functional and imperative paradigms are particular cases. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The extra level of abstraction means that you are one level up in the tree of possibilities. For example, you can define the very meaning of a sequence of statements in a Monad Instance. That, in other languages is fixed. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
That means that you have a extra level of things to learn and explore. For example I created a DSL for web applications time ago and still I´m learning my own language. Sometimes my programs type check, but they do not perform what I was expecting, But it does other interesting thing. The code was a product of my own misunderstanding or my lack of concentration, but the type checker say: its valid, let´s run it. Then I check it again and voila, when I examine the program I discover a new usage of the same elements I defined that I never though previously possible.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sometimes the error messages tell me new instances of things that I would never though about. Some of them seem crazy, but after a second though, I find that is not as crazy as it seems but, sometimes I´m not willing to accept yet another extra level of abstraction that my compiler is suggesting as result of an error. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
For beginners this flood of information is confusing,as well as for expert programmers they just want their job done, but thanks in part to this interaction I´m here talking about abstract web combinators when what I initially needed from Haskell was the fsstest way to see "hello world" in a web browser.</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-55233593563190271502013-11-02T10:56:00.000+01:002013-11-09T14:07:43.839+01:00More composable elements for single page development: witerate and dField<span style="color: #222222; font-family: courier new; font-size: 13px; line-height: 17.99715805053711px; text-align: justify;">witerate</span><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 17.99715805053711px; text-align: justify;">, is </span><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 17.99715805053711px; text-align: justify;">a new primitive that permits to iterate the presentation of data and/or input fields and widgets within an web page that does not change. The placeholders are created with <span style="font-family: courier new;">dField</span>. Both are widget modifiers: The latter gets a widget and create a placeholder in the page that is updated via ajax. The content of the update is the rendering of the widget at each iteration. The former gets a widget which contains </span><span style="color: #222222; font-family: courier new; font-size: 13px; line-height: 17.99715805053711px; text-align: justify;">dField </span><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 17.99715805053711px; text-align: justify;">elements and permit the iteration. Whenever a link or a form within the witerate widget is activated, the result is the placeholders filled with the new html content. This content can be data, a input field, a link or a widget. No navigation happens.<br /><br /><b>This permits even faster updates </b>than <span style="font-family: courier new;">autoRefresh</span>. since the latter refresh the whole widget and it does not permits modifications of the layout at runtime. When <span style="font-family: courier new;">edTemplate </span>or template is used on top of <span style="font-family: courier new;">witerate</span>, the result is editable at runtime, and the span placeholders generated, that are updated via ajax can be relocated within the layout of the template.<br /><br />Additionally, contrary to some javascript frameworks, the pages generated with this mechanism are searchable by web crawlers.<br /><br />This example below, taken from the runtime templates example, shows how template, witerate and dField work together. The example iterates the presentation of a list of results fby displaying four of them each time. The list can be navigated forward and backward. (see the example running and the full source code <a href="http://mflowdemo.herokuapp.com/noscript/templates/runtimetemplates/listnames/templ" target="" title="">here</a>).</span><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;"><span style="color: #222222;"><span style="line-height: 17.99715805053711px;"><br /></span></span>These are two pages of the example with the templates beind edited at runtime. The first present results and the second is an input form managed the same way. Since the pages are not refreshed, this permits very fast input and presentation of results.</span><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;"><br /></span>
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">The full post explaining everything is here:</span><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;"><br /></span>
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;"><a href="http://mflowdemo.herokuapp.com/noscript/wiki/singlepage.html">http://mflowdemo.herokuapp.com/noscript/wiki/singlepage.html</a></span><br />
<span style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;"><br /></span>
<br />
<pre style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif;"><img align="none" alt="" src="http://mflowdemo.herokuapp.com/wysiwyg.png" /></pre>
<pre style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif;"></pre>
<pre></pre>
<pre style="color: black; line-height: normal; text-align: start;"><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px; text-align: justify; white-space: normal;"><pre style="color: black; line-height: normal; text-align: start;"><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px; text-align: justify; white-space: normal;"><pre style="color: black; line-height: normal; text-align: start;"><span style="color: #222222; font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 12.727272033691406px; line-height: 17.99715805053711px; text-align: justify; white-space: normal;"><img align="none" alt="" src="http://mflowdemo.herokuapp.com/enterallnames.png" style="color: black; font-size: 12.727272033691406px; line-height: normal; text-align: start;" /></span></pre>
</span></pre>
</span><span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;"><pre style="color: black; line-height: normal; text-align: start;"><span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">
</span></pre>
<pre style="color: black; line-height: normal; text-align: start;"><span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">
</span></pre>
See the page and the full source code <a href="http://mflowdemo.herokuapp.com/noscript/templates/runtimetemplates/newname" target="" title="">here</a></span></pre>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-30818491253101086692013-10-31T23:30:00.001+01:002013-11-05T11:03:56.949+01:00About client-side frameworks<br />
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html">Before any consideration about either client-side or server side framworks are good for one or other user case, you, as a programmer has to answer a simple question: is the Web browser a good development, integration, test and exploitation platform? My response is: No.</span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html">
</span>
<br />
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><br /></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html">
<span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"></span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">I love JavaScript. I programmed AJAX applications using hidden frames 13 ago, before this technology had a name. I regularly used client side technologies for editing documents, for example, Google Docs. But what makes great Google docs is the server integration of many client and server side developments. </span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"><br /></span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">You finally must integrate different aspects of your applications: user data, different client-side applications , snippets to compose workflows and you have to decide where you integrate all of this. Either you integrate it in the server of in the client. if you do it in the client, you hardly will do multi-user stuff. you will not have a type safe, fast, multi-threaded environment under your control. You are restricted to the single threaded, single user javaScript environment. if you use some framework above that you still are restricted to the limitations of the JavaScript virtual machine and development environment. </span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"><br /></span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">There are lots of client side frameworks that promise a declarative extension of HTML, but if you look at <a href="http://angularjs.org/">AngularJS</a>, you will see a lot of JavaScript code, with all the big complexities of big server side frameworks, but, looking at the examples, these frameworks are devoted to present server data, in which they add little additional advantages, except perhaps less server-client traffic. A server side framework can do it as well with adequate use of AJAX, (see <a href="http://mflowdemo.herokuapp.com/wiki/singlepage.html" target="" title="">this</a>)</span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<br />
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"><br /></span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</span></span>
<div style="text-align: justify;">
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"><span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">To summarize you have the problems of two tier architectures, the thick client problem aggravated with less power of the sandboxed environment of the web browser. Until you load all the client framework, the first page display can experiment delays. Although this could not be a problem in intranet environment where two tiered architectures have been good for a limited number of users, that is specially critical in applications with a casual usage pattern, such are all Web applications. The dynamic HTML is not searchable. You must see how </span><a href="https://blog.twitter.com/2012/improving-performance-twittercom">Twitter </a>had to revert to the server side.</span></span></div>
<span class=" nicEdit-selected" id="c2-wiki/aboutserversideframeworksbody.html"><span class=" " id="c3-wiki/About client-Side frameworksbody.html" style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
<div style="text-align: justify;">
<br /></div>
</span><div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">You may think that a server with application logic and a MVC event driven logic in the middle tier, can solve the problem, but, simple speaking, the business applications are not stateless. Neither you can store the state in the client allways. Have you seen a flowchart?, a user requirement document? all of them are filled with steps. Specially in a corporate environment, where it is necessary to integrate different software elements, departments, databases etc, much of the integration of different modules with the corresponding interfaces must be trough an stateful application that present different interfaces.</span></div>
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<br /></div>
<span class=" " style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;"><span style="text-align: justify;">The question is not either client or server side. </span><span style="text-align: justify;">Both parts must believe that they are the center of the development. the user too. When you are programming in the client, you must think client centric. when you are in the server, you have to feel server centric. </span><span style="text-align: justify;"><span style="font-family: rebuchet MS, Helvetica, Arial, Verdana, sans-serif;">The intelligent way is make everyone: The user, the front-end programmer, the back-end programmer, the integrator, to feel that they are the center of the development. <br /><br />And the development process in which each one works at the highest level of productivity and abstraction is when you can package server and javascript functionalities that work together in easily pluggable, self contained widgets for the user interface. With these widgets, let the application programmer to compose single-page applications and finally with these single-page applications, integrate them in stateful workflows that accomplish the whole user case. That is the aim of <a href="http://mflowdemo.herokuapp.com/">MFlow</a>.</span></span></span></span>
<br />
<div style="float: right; overflow: auto; width: 773.5px;">
<span class=" nicEdit-selected"></span><br />
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px;">
</div>
<span class=" nicEdit-selected">
</span>
<br />
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<span class=" nicEdit-selected"><span class=" "><br /></span></span></div>
<span class=" nicEdit-selected">
</span>
<br />
<div style="font-family: 'rebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; text-align: justify;">
<span class=" nicEdit-selected"><br /></span></div>
<span class=" nicEdit-selected">
</span></div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-45411286101160145752013-10-17T09:55:00.002+01:002013-10-21T10:13:14.274+01:00Change the content & layout of an active page with WYSIWYG at runtime?<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
It is possible modify the layout of the active components at run-time. This means that no longer is necessary to code a layout for a formulary, or for the arrangement of different widgets. </div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
Just create them without layout, and later the people in charge of the layout and styles will arrange the layout and the texts when the application is already tested. Then the layout never pollutes the code, and it may be decoupled also in time. </div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
The layout can be edited in a more powerful editor and inserted again and so on. As long as the designer do not modify the tags of forms and links created by the application, everithing goes fine. It can insert wathever content, formatting, apply styles etc.</div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
The validation errors in the formularies must be presented via Javascript however. The example uses a simple javascript alert to present an error when the message entered in the form field exceed a certain length</div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<a href="http://mflowdemo.herokuapp.com/noscript/templates/runtimetemplates">http://mflowdemo.herokuapp.com/noscript/templates/runtimetemplates</a></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;">The example list the names entered in a input form, but at the same time it permits the edition of the three pages: The first page has links. There is a page with a form for entering a new name and the content of a list of results.It uses </span><span style="font-family: courier new;">edTemplate </span><span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;">and </span><span style="font-family: courier new;">edTemplateList</span><span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif;">, two new primitives for template edition.</span></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px; text-align: justify;">
Log in as edituser/edituser to edit the pages using the login option. Log out to see the resulting layout. The edited layour has additional information about how it works.</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-25351943660945113392013-10-17T09:14:00.002+01:002013-10-22T12:01:00.071+01:00A cascade menu coded in pure applicative & monadic haskell?Now the <a href="http://mflowdemo.herokuapp.com/">mflow demo</a> has a cascade menu.<br />
<ul style="background-color: #eeeeee; font-family: 'Trebuchet MS', Helvetica, Arial, Verdana, sans-serif; font-size: 10px;">
<li><a href="http://mflowdemo.herokuapp.com/noscript/databasesamples"><b>Database examples</b></a> with different backends<ul>
<li><a class="_noAutoRefresh" href="http://mflowdemo.herokuapp.com/noscript/databasesamples/mflowpersist"><b>Persistent</b></a><b> illustrates the use of MFlow with </b><a href="http://www.yesodweb.com/book/persistent">Persistent</a>(In this example sqlite backend is used) <a href="http://haskell-web.blogspot.com.es/2013/08/mflow-using-persistent-with-sqlite.html"><i>(article)</i></a></li>
<li><a class="_noAutoRefresh" href="http://mflowdemo.herokuapp.com/noscript/databasesamples/database"><b>Database</b></a><b> Create, Store and retrieve lines of text from Amazon SimpleDB storage </b><a href="http://haskell-web.blogspot.com.es/2013/08/using-amazon-web-services-with-tcache.html"><i>(article)</i></a></li>
</ul>
</li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/pushsamples"><b>Push Samples</b></a> using long polling</li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/errortraces"><b>Error Traces</b></a></li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/flows"><b>Different kinds of flows</b></a></li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/basicwidgets"><b>Basic Widgets</b></a></li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/monadicwidgets"><b>Monadic widgets, actions and callbacks</b></a> autoRefresh, page flows, dialogs etc</li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/dynamicwidgets"><b>Dynamic Widgets</b></a> Widgets with Ajax and containers of other widgets</li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/templates"><b>Runtime templates</b></a> Templates and content management modifiable at runtime</li>
<li><a href="http://mflowdemo.herokuapp.com/noscript/loginlogout"><b>Login/logout</b></a></li>
</ul>
The menu works as any cascade menu, but it does not use explicit javascript to display and hide the branches when clicked. It uses pure haskell with applicative and monadic combinators.<br />
<br />
It uses the behaviour of the monad instance of the MFlow <a href="http://haskell-web.blogspot.com.es/2013/06/the-promising-land-of-monadic-formlets.html"> formlets</a>. But in this case it uses links instead of forms elements.<br />
<br />
Here is the code of two branches of the cascade menu:<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">absLink ref = wcached (show ref) 0 . wlink ref</span><br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">mainMenu ∷ View Html IO Options</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">mainMenu= autoRefresh $</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> ul <<< li <<< <b>do</b></span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> absLink DatabaseSamples << b "Database examples"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ " with different backends"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> ul <<<</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> (li <<< (absLink MFlowPersist << b "Persistent") <! noAutoRefresh</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ do -- blaze-html monad</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> b " illustrates the use of MFlow with "</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> a "Persistent" ! href yesodweb</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> " (In this example sqlite backend is used) "</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> article persistentarticle</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <|> li <<< (absLink Database << b "Database") <! noAutoRefresh</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ b " Create, Store and retrieve lines of text from Amazon SimpleDB \</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> λ storage "</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <> article amazonarticle)</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <|> li <<< <b>do</b></span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> absLink PushSamples << b "Push Samples"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ " using long polling"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> ul <<<</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> (li <<< (absLink Push << b "Push example") <! noAutoRefresh</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ b " A push widget in append mode receives input from \</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> λa text box with autorefresh"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <> article pushl</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> </span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <|> li <<< (absLink PushDec << b "A push counter") <! noAutoRefresh</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <++ b " Show a countdown. Then goes to the main menu"</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <> article pushdec)</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"> <|> li <<< <b>do</b></span><br />
......<br />
<br />
It works as follows:<br />
<br />
The menu is a set of links composed by applicative alternative (<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><|>)</span> operators. each operator contains a do sequence so according with the <a href="http://haskell-web.blogspot.com.es/2013/06/the-promising-land-of-monadic-formlets.html">monad instance</a>, the sequence executes as long as the previous lines of the sequence are validated by the user input, so when the first link in the <span style="font-family: Courier New, Courier, monospace;">do </span>sequence is clicked, the next sentence can be executed. So when the top level link is clicked, what appears is a second level of links composed again with the (<|>) operator. They are the terminal branches in this case. (the process can go down further with a new level, if it is necessary). The final branches are absolute links with the <span style="font-family: Courier New, Courier, monospace; font-size: x-small;">class= _noAutoRefresh</span> attribute. This tell <span style="font-family: Courier New, Courier, monospace; font-size: x-small;">autoRefresh </span>to escape from local auto-refreshing and permit a page navigation when this link is pressed.<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">autoRefresh </span>install the javascript and server flags necessary for auto-refreshing the menu without refreshing the whole page. <br />
<br />
The operator (<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><<<)</span> encloses the HTML of a widget within anoter HTML tag. In this case the tags UL and LI encloses the links.<br />
<br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;">absLink </span>is a cached wlink and thus has a fixed path. this absolute link is convenient since the code backtrack when a menu item is cliked from any option (see <a href="http://haskell-web.blogspot.com.es/2013/08/how-to-handle-menus-and-other.html">this article</a>).<br />
<br />
(<++) append HTML code to a widget.<br />
<br />
The behaviour can be improved, for example,if instead of collapsing each branch when a new branch is open, to maintain any number of branches open, just add its own autoRefresh for each branch instead of a general autoRefresh.<br />
<br />
<br />
One additional NOTE about this code: There is a round-trip to the server each time an option is pressed, but for once, this permits the presentation of mutable data which is arranged in three-like structures, not only static menus. In the other side, the server code that respond the requests is ready waiting and with all the context in place, no lookups, typical of MVC frameworks are necessary, so the response has a very short latency, about 5 ms latency in the server, according with my heroku box. Here are the typical response parameters for the menu refresh:<br />
<br />
connect=1ms service=5ms status=200 bytes=2862memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0tag:blogger.com,1999:blog-37577615.post-80449405208932748802013-10-02T11:00:00.001+01:002013-10-02T12:46:59.071+01:00What I have been doing: Runtime templates and Content Management<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Hi,</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
There are two exciting things that I´m being doing lately: Content management has been improved a lot. Now the editors can edit large texts at runtime and see the result instantly. They have an edition panel with all the ordinary functionalities including uploading and linking images, edition of raw HTML and so on. Different users can have permissions for different sections. See the content of the home page of the <a href="http://mflowdemo.herokuapp.com/">MFlow demos</a>. It has been created with this content management facility at runtime. The <a href="http://mflowdemo.herokuapp.com/noscript/textedit">content management demo</a> shows how it works.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
After you have logged with the right user, to edit the text click on them. immediately, the panel above is activated and the content can be edited. At the end, clicking the save button, the edition facility and the panel disappear and the editor see the exact layout of the page. To edit it again, just refresh the page. The content is published immediately. for the public. The content is saved in the texts folder.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Very related with this, but more exciting and powerful, is the possibility to modify the layout of the active components at run-time. This means that no longer is necessary to define a layout before compilation for a formulary, or for the arrangement of different widgets. Just create them without layout, and later the stylist will arrange the layout and the texts when the application is already tested. Then the layout never pollutes the code, and it may be decoupled also in time. he layout can be edited in a more powerful editor and inserted again and so on. As long as the designer do not modify the tags of forms and links created by the application, everithing goes fine. It can insert wathever content, formatting, apply styles etc.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
This does not end here. There may be more than one layout,with more or less text, advertising etc depending o the device. For example, a slim layout for mobile phones, other more heavy for PCs etc. This is something that I´m just developing now. T</div>
memetic warriorhttp://www.blogger.com/profile/11962281728014883353noreply@blogger.com0