Friday, July 26, 2013

Maxwell Smart push counter

To illustrate the push functionality the previous example is confusing since it seems to be a request response interaction with a web browser, but it is not, since the text box send to the server a string, it is stored in a variable, the push widget detect the update of the variable and send it back in a separate message, different that the reception message. In fact various unrelated push widgets can be updated using this asynchronous mechanism   simultaneously in the same page.

So I created another push example theoretically more simple.

http://mflowdemo.herokuapp.com/noscript/pushdec

It is a countdown after which the page will navigate back to the main menu. In this case the widget generates its own output by decreasing the variable. It also illustrates the use of Hamlet.

Note that

 - push has a new parameter that is the delay for a new ajax request when the previous connection has been lost.

- The last push after 0, send a script that forces a navigation to the menu. And then kill itself.

pushDecrease= do
 tv ←  liftIO $ newTVarIO 10
 page $ 
  [shamlet|
   <div>
       <h2> Maxwell Smart push counter
       <p> This example shows a reverse counter
       <p> To avoid unnecessary load, the push process will be killed when reaching 0
       <p> The last push message will be an script that will redirect to the menu"
       <h3> This message will be autodestroyed within ‥

  |] ++>  counter tv <++  b << "seconds" 
 where

 counter tv = push Html 0 $ do
      setTimeouts 100 0     -- kill  the thread if the user navigate away
      n ←  atomic $ readTVar tv
      if (n≡ -1) 
        then  do
          script << "window.location='/'" ++> noWidget
          liftIO $ myThreadId ↠ killThread 
        else do
          atomic $ writeTVar tv $ n - 1
          liftIO $ threadDelay 1000000
          h1 << (show n) ++> noWidget

atomic= liftIO . atomically

.....

Ops.. No.

killThread is never called since noWidget return an invalid formlet value, so the next statements are not executed in the View monad (See: The promising land of monadic formlets). 

That kill is in order to drop the process immediately, but otherwise, the timeout of setTimeouts would do the same job. Since the delay between push sends is one second, by shortening the timeout from 100 to two seconds will do the same job.  So the killthread line can be eliminated.


Wednesday, July 24, 2013

New push mode, to present data in real time. in MFlow

Another milestone completed in MFlow.  The new asynchronous widgets can display server information at the moment that they appear. And thanks to Software Transactional Memory this may be immediately.

The new primitive, push, like autoRefresh,  is a modifier of a widget behavior. In this case push  will execute the widget and present the output again and again using ajax internally. This is an example:

http://mflowdemo.herokuapp.com/noscript/push


 
 
The image is not very exciting. I will try to add another better. In this example the push widget is above the text box.
 
The code is as follows:
 
pushSample=  do
  tv ←  liftIO $ newTVarIO $ Just "The content will be appended here"
  page $   h2 << "Push example"
       ++> p << "The content of the text box will be appended to the push widget below."
       ++> p << "A push widget can have links and form fields."
       ++> p << "Since they are asynchronous the communucation must be trough..."
       ++> p << "The input box is configured with autoRefresh"
       ++> hr

       ++> pageFlow "push" (push Append (disp tv) <** input tv)
       **> br
       ++> br
       ++> wlink () << b << "exit"

  where
  -- the widget being pushed:
  disp tv= do
      setTimeouts 100 0
      line ←  tget tv
      liftIO $ when (line ≡ "kill") $ myThreadId ↠ killThread
      p <<  line ++> noWidget

  -- The input box
  input tv= autoRefresh $ do
      line ←  getString Nothing <** submitButton "Enter"
      tput tv line


  tput tv x = atomic $ writeTVar  tv ( Just x)

  tget tv= atomic $ do
      mr ←  readTVar tv
      case mr of
         Nothing → retry
         Just r → do
          writeTVar tv Nothing
          return r

atomic= liftIO . atomically

There are still some minor issues with this widget, but I expect to fix them soon. As you can see, the push widget retry when Nothing is available in the TVar. When the input widget tput's something in the variable, it is read, emptied and returned to be displayed. The other widgets of the  page must be configured with autorefresh, unless we want to navigate away from the page. This is why the text input box and the button are under autoRefresh, but the exit link is not.

Tuesday, July 16, 2013

Automatic error trace generation in MFlow

To have  the trace of an unexpected error is very important in Web development. Specially when the error has been produced in exploitation. There is no way to make tests in a exploitation environment, so the error message is the only information available to fix it as soon as possible.

Now MFlow permits the creation of execution traces. Not just call traces, but execution traces, whenever an error happens. It uses the package monadloc from Pepe Iborra, used to produce stack traces in his package control-monad-exception. 

Using MonadLoc, MFlow can produce entire traces instead of call stacks because his backtracking mechanism permits to  run back the execution up to the beginning in case of an exception following the exact execution steps in reverse order. In this back-execution is when the trace is generated. When running normally, the tracing machinery does not affect the performance.

This is an example of what it is necessary in order to have execution traces in case of error.  It is necessary to install the monadloc-pp and monadloc packages that install the monadloc preprocessor and the monadloc class respectively. There are two according changes in the user programs, the preprocessor directive and to include  the Control.Monad.Loc module (in big letters):



This program has an intended error at line 33

  1. {-# OPTIONS -F -pgmF MonadLoc #-}
  2. module TestREST where
  3. import MFlow.Wai.Blaze.Html.All
  4. import Data.Monoid
  5. import Data.String
  6. import Control.Monad.Loc
  7.  
  8.  
  9.  
  10.  
  11. main= runNavigation "" $ transientNav testREST
  12.  
  13.  
  14. testREST= do
  15.   setTimeouts 120 0
  16.   liftIO $ print "start/restart"
  17.  
  18.   setHeader header1
  19.  
  20.   option ←  page $   wlink "a" << p << "letters " <++ p << "or"
  21.                  <|> wlink "1" << p << "numbers"
  22.  
  23.   case option of
  24.     "1" → do
  25.           page $ wlink "2" << cont "1"
  26.           page $ wlink "3" << cont "2"
  27.           page $ wlink "4" << cont "3"
  28.           page $ wlink ()  <<  "menu"
  29.  
  30.     "a" → do
  31.           page $ wlink "b" << cont "a"
  32.           page $ wlink "c" << cont "b"
  33.           page $ undefined -- wlink "d" << cont "c"
  34.           page $ wlink ()  <<  "menu"
  35.  
  36.  
  37. cont x= p << "page for"
  38.         <> b << x
  39.         <> p << "goto next page"


If we navigate to execute this line with the web browser, the error produced in the console, in the file "errlog" (and in the Web browser if you are logged as administrator) is:

---------------------ERROR-------------------------
TIME=Tue Jul 16 11:52:16 Hora de verano romance 2013

TRACE (error in the last line):

testREST, TestREST(Demos\TestREST.hs): (14, 11)
testREST, TestREST(Demos\TestREST.hs): (20, 3)
testREST, TestREST(Demos\TestREST.hs): (23, 3)
testREST, TestREST(Demos\TestREST.hs): (30, 12)
testREST, TestREST(Demos\TestREST.hs): (31, 11)
testREST, TestREST(Demos\TestREST.hs): (32, 11)
testREST, TestREST(Demos\TestREST.hs): (33, 11)
exception: Prelude.undefined

USER= admin

VERB= navigation

REQUEST:
[("cookieuser","admin"),("flow","1373963274"),("Host","localhost"),("Connection","keep-alive"),("Cache-Control","max-age=0"),("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8"),("User-Agent","Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.72 Safari/537.36"),("Accept-Encoding","gzip,deflate,sdch"),("Accept-Language","es-ES,es;q=0.8,en-US;q=0.6"),("Cookie","flow=1373963274; cookieuser=admin")]
 
 
Fine, Isn´t? Note that it is not a call stack, but a true execution trace.
 
If we comment out both lines the error produced is:
 
---------------------ERROR-------------------------
TIME=Tue Jul 16 12:57:04 Hora de verano romance 2013


Prelude.undefined

USER= admin

VERB= navigation

REQUEST:
...
 


How I did that?

Essentially the monadLoc instance permits to add information to a monad about the line number that it is executing now.  I attach in this instance an exception handler to each bind operation so that when a noncaugh exception reaches the handler, it add this line number to  mfTrace, a list of  strings within the internal state monad. Then it trigger a failure that initiates the backtracking (see fail back monad) each step back detect the exception condition because mfTrace is not empty. then each of these steps add its own line to the mfTrace until the execution goes back to the init, were instead of restarting the execution forward, generate a error exception with all the content of mfTrace.

This is the instance:
instance  MonadLoc (FlowM v IO) where
    withLoc loc f = FlowM . BackT $ do
       withLoc loc $ do
            s ←  get
            (r,s') ←  lift $ do
                       (r,s') ←  runWithState f s  `CE.catch` (handler1  loc s)

                       case mfTrace s' of
                            Nothing     →  return (r,s')
                            Just  trace →  return(r, s'{mfTrace= Just( loc:trace)})
            put s'
            return r
       where

       handler1 loc s (e ∷  SomeException)=
        return (GoBack, s{mfTrace= Just ["exception: " ⊕show e]}) 



This is for the MFlow monad. For the View monad, used for in-page flows, the validation fails and mfTrace is filled with the error line, which trigger the backtracking in the MFlow monad.

The code of that last version with traces is not yet in Hackage. In github is at:

 
The fail-back monad is evolving to a supervisor monad that can execute tests, produce error traces , manage exceptional conditions, undo transactions and so on. I have to abstract out this monad from MFlow and make it available as a separate package.

In the next post I promise to talk about it.

I need people interested in MFlow to collaborate !!!!

Thursday, July 11, 2013

The Web Navigation Monad

The MFlow app server can express routes within normal Haskell monadic code. The FlowM monad backtrack and goes forward to track the URL of any page within the monadic flow.

To make a web application program more close to a plain console application, I created runNavigation, that get the port from the first execution parameter. If not, it read it from the PORT environment variable. If it does not exist, it uses the por 80.

runNavigation executes a persistent navigation (whose state is logged and later recovered when the process has a timeout).  If the flow is not persistent, it must be prefixed with transientNav.

The result is a more close visualization of what the FlowM monad is: a navigation monad.

This example has two routes (letters and numbers). Each one has a simple sucession of pages. The user can navigate forward and backward, introduce any url and the program will track the proper page to respond.

I installed it on Heroku:

http://mflowdemo.herokuapp.com/noscript/restnav

This page for example, points to the second page of the numbers:

http://mflowdemo.herokuapp.com/noscript/restnav/1/2

Notice the restful URLs generated, that can be entered in the address box at any time.

When the flow finish, it goes to the beginning again.

From numbers it is possible to have a link to any letter by means of a HTML link, instead of a wlink. (wlinks return results to the flow where they are in)


main= runNavigation "" $ transientNav $ do

  liftIO $ print "start/restart"

  setHeader $ html . body

  option <- ask  $   wlink "a"  << p << "letters"
                 <|> wlink "1" << p << "numbers"

  case option of
    "1" -> do
          page $ wlink "2" << pagefor "1"
          page $ wlink "3" << pagefor "2"
          page $ wlink "4" << pagefor "3"
          page $ wlink ()  <<  "menu"
    "a" -> do
          page $ wlink "b" << pagefor "a"
          page $ wlink "c" << pagefor "b"
          page $ wlink "d" << pagefor "c"
          page $ wlink ()  <<  "menu"

pagefor x= p << "page for"
        <> b << x
        <> p << "goto next page"



page is a synonym of ask

It is a navigation of 9 pages within the main procedure. The application is stateless, since the GET URLs have ever the same response. There is no state. It is, simply, a navigation.




Wednesday, June 26, 2013

And finally... Widget auto refreshing

In the previous post I said:

Dinamic formlets are composable in MFlow ... But the entire page must be refreshed to achieve dynamic behavior. The next step is to try to avoid the need to refreshing the entire page by using ajax to refresh just the widget that has changed. ...


Now I did it with

autoRefresh :: View format monad result -> View format monad result

autoRefresh capture the form submissions and the links of the enclosed widget and send them via AJAX. The response is the new presentation of the widget, that is updated. No navigation occur. So a widget with autoRefresh can be used in heavyweight pages. If AJAX or javascript is not available, the widget is refreshed normally, via a new page.


This example, from https://github.com/agocorona/MFlow/blob/head/Demos/demos.blaze.hs :

combination = ask $
     p << "Login widget (use admin/admin)" ++> autoRefresh(pageFlow "r" wlogin)  <++ hr
     **> p << "Counter widget" ++> autoRefresh (pageFlow "c" (counterWidget 0))  <++ hr
     **> p << "Dynamic form widget" ++> autoRefresh(pageFlow "f" formWidget) <++ hr
     **> wlink () << b << "exit"


Has three active widgets (monadic formlets) with autoRefresh : A login widget, a counter and the dynamic form. They are examples  defined in the previous posts. Each of these widgets express his own flow within the page.

Thursday, June 20, 2013

The promising land of monadic formlets. Or: "Look ma! no JavaScript!"



Formlets are about applicative instances, but what about monadic instances? What a Monad instance of formlets means? I recently experimented with this and the results are very interesting -and powerful-. It mixes the best of web forms, with the flexibility of console applications.

???!!!!!!

What I mean with that? There are two fundamental questions for usability and high level programming of user interfaces.  Here are with my responses:

  1. What is the best interface? A dynamic, window-oriented or document oriented interface for some applications  and optional console-style presentation and interaction for others
  2. What is the most intuitive way of programming interfaces? The sequential style of console applications.

What if I say that monadic formlets have the potential to realize the two (or three) whishes with no compromises?
 
Let´s look at an example. There is a video of the execution below. Although this example is for the formlets of the MFlow framework , it can be ported to other formlet implementations. The MFLow formlets includes operators for web formatting that is not supported in other formlets implementations. Static HTML templating don´t work well with monadic formlets, so it is important to include the formatting as a part of the computation:

formWidget= wform $ do
      (n,s) <- (,) <$> p << "Who are you?"
                   ++> getString Nothing  <! hint "name"     <++ br
                   <*> getString Nothing  <! hint "surname"  <++ br
                   <** submitButton "ok" <++ br
                   
      flag <- b << "Do you " ++> getRadio[radiob "work?",radiob "study?"] <++ br
      
      r<-case flag of
         "work?" -> pageFlow "l"
                     $ Left  <$> b << "do you enjoy your work? "
                             ++> getBool True "yes" "no" 
                             <** submitButton "ok"  <++ br
                             
         "study?"-> pageFlow "r"
                     $ Right <$> b << "do you study in "
                             ++> getRadio[radiob "University"
                                         ,radiob "High School"]
      u <-  getCurrentUser                                     
      p << ("You are "++n++" "++s) ++>
       p << ("And your user is: "++ u) ++>
       case r of
         Left fl ->   p << ("You work and it is " ++ show fl ++ " that you enjoy your work")
                        ++> noWidget

         Right stu -> p << ("You study at the " ++ stu)
                        ++> noWidget


hint s= [("placeholder",s)]
onClickSubmit= [("onclick","this.form.submit()")]
radiob s n= text s ++&gt setRadio s n <! onClickSubmit


 
 Here wform, getBool, getString , getRadio etc are formlet elements


The first sentence is an applicative composition that generate a 2 tuple, to show that applicative and monadic can be mixed.  The operations ++> add html to the formlet. The operatior <! add attributes to the formlet element.. noWidget is a dumb formlet that does not validate.

The second monadic statement is an election between two options. The beauty of the monadic instance is that the rest of the form can vary depending on the previous answers. Since the formlets validate the input, unless the election is made, the radio will not validate, so the monadic execution will be aborted beyond any unanswered question, so nothing will appear after the question. The rest of the form will appear when the user choose one of the two options. once one or the other option is chosen, then another binary question is presented. (either he likes his work or where he study). When the questions are finised, the results are presented. This kind of presentation is similar to what we would see in a console application.

I hope that you get the idea. The benefit is not only the familiar coding and presentation of a sequential console application: Since the form encloses all the fields, At any time the user can change previous inputs and the form will reflect these changes. For example if the user change from work to study (second statements) the "where do you study will appear and the work related questions and answers will disappear. That is wonderfully useful for heavily interactive applications.

There is a problem however and it is the issue of the formlet identifiers. Unlike in an applicative presentation, now the number and type of the formlets will vary, so the response to a previous form create a new kind of form with different fields. And, because the form identifiers, assigned sequentially, vary, the post response can be misinterpreted. To avoid that , the pageFlow call creates fixed sequences of identifiers for each branch of execution.

I will release a version of MFlow that support this kind of monadic composition of fomlets, but In essence it is nothing but a Monad instance for formlets. A single server procedure, that executes the formlet code can support all the interaction so any framework can do it. The usability of that is huge: It is possible to interact in a web page in a console style with questions and answers with the versatitly of a dynamic foms: Any modification in the form change the subsequent flow of interaction. Another application of this monadic style is to ease multistep processes such are registration, check-out and payment ad so on. Even a entire interactive dynamic application can be coded in a single page.

And no javascript is needed!.

This page flow is simple, but imagine a flow where the first line includes formlets for tabs or menus An entire application can be controlled in this way.


To run this formlet in MFlow:

main=do

  addMessageFlows
       [(""    , transient $ runFlow  $ ask dynamicForm )]

  wait $ run port waiMessageFlow

 
This video show how the presentation of this example vary with the user input:



 This other video has a better resolution:
 


I hope that you find the idea interesting. If you want to experiment with this in MFlow, I have to say that the implementation of this feature is in an early stage. The code is in the head branch
 

 
The code of the example, that was executed in the video, is part of a demo:
https://github.com/agocorona/MFlow/blob/head/Demos/demos.blaze.hs

The next step: Selective refreshing.

Dinamic formlets are composable in MFlow . The video shows a counter, a login widget and this formlet working in the same page (see the code of these widgets in previous posts) But the entire page must be refreshed to achieve dynamic behavior. The next step is to try to avoid the need to refreshing the entire page by using ajax to refresh just the widget that has changed. This is halfway done now, since this functionality is available for some particular widgets. it is a matter of generalizing the mechanism.

Tuesday, June 18, 2013

Caching Web pages with TCache. Translation of a java example that uses JCache

I just read this introduction to JCache because I was curious about the similarities with my package TCache. While JCache is an standard interface for distributed HashMaps, like memcached or Resin, TCache is an implementation of a transactional cache that is not yet distributed -but I plan it to be.

But the latter has a richer semantic, since It has not only search by key, but also support the STM semantic of updates and retrievals. It also has a query language using Haskell field names and various kinds of indexations (and it is more type safe).

Java is extraordinarily verbose, and the Java people enjoy adding even more verbosity to their frameworks and standards (except perhaps the engineers at Google). 

I translated the same example in the refered article to TCache and MFlow. I will use seconds instead of milliseconds


module Main where

import MFlow.Wai.Blaze.Html.All
import Data.TCache.Memoization
import System.Time
import Control.Concurrent  -- for the console example


seconds :: IO String
seconds= do
         TOD t _ <- liftIO getClockTime
         return $ show t


-- generates the page in Text.Blaze.Html format
page :: IO Html
page= do
   t <-  seconds 
   return $ p << ("Hello World " ++ t)

-- caches the Html code
cachedPage:: IO Html
cachedPage = cachedByKey "hello message" 10 page


helloServlet=  do
      msg <- liftIO $  cachedPage
      msg ++>  noWidget


That's all the code of the Java example. cachedByKey stores the value of the computation in the cache for ten second with the key "hello message".  When the value is requested after ten seconds, the computation is re-executed again.

The operator << is a convenience operator defined in MFlow to avoid the overloaded strings extension, but what is cached in cachedPage is pure blaze-html markup. So cachedByKey can be used in any other Haskell web framework to cache Html pages.


helloServlet can also be written using wcached or wfreeze, which is specific for caching MFlow widgets:

helloServlet'= wfreeze  "hello message Widget" 10 $ messageWidget 

messageWidget ::  View Html IO ()
messageWidget= liftIO page >>= \msg -> msg ++> noWidget 


noWidget is a dumb widget that has no rendering.

To execute both servlet in the port 80:

main= do

   addMessageFlows[("noscript",wstateless helloServlet)
                   ,("alternative", wstateless helloServlet')]

   wait $ run 80 waiMessageFlow

The procedure associated to "noscript" is invoked when no path is in the URL.



A similar console program, which polls the cache every second:

main= do
      msg <-  cachedByKey "hello message text" 10 messageText
      print msg
      threadDelay 1000000
      main

messageText=do
   t <- seconds 
   return $ p <<("Hello World " ++ t)