PicoStack: A first web application in a pico

In the previous post we showed an example of a web application program which has HTML inside of it.

And, we showed a web application program which looks like HTML but contains bits of program inside of it.

Here we compare the latter program with one written for a pico.

The purpose of a web application program is to produce a string which is in the HTML language.

A web application in a pico

Here is a side-by-side comparison of a JSP web application and one written in KRL (the language used to write programs that run in picos):

To see this more clearly, either click on the image itself to see it in the same tab, or click here to see it full-size in a separate tab or window.

Visually, the HTML is inside the program (for picos called a "ruleset").

And also, there are bits of program inside the HTML. So in KRL there is a combination of the two strategies, with HTML both inside and outside of the program.

A closer look at the ruleset

We didn't look closely at either of the web application programs in the previous post. Since this blog is about using picos to develop web applications, we will look at the ruleset in more detail.

ruleset first_jsp {
  meta {
    shares hello
  }
  global {
    hello = function(){
      num = random:number(0,1)
      requestURI = "hello.html"
      <<<!doctype html>
<html>
<head><title>First JSP/KRL</title></head>
<body>
#{ (num > 0.95) => <<
      <h2>You'll have a lucky day!</h2><p>(#{num})</p>
>> | <<
      <h2>Well, life goes on ... </h2><p>(#{num})</p>
>>}
  <a href="#{requestURI}"><h3>Try Again</h3></a>
</body>
</html>
>>
    }
  }
}

Ruleset

A ruleset is the smallest piece of code that a pico can accept, and a pico can have any number of rulesets installed.

This ruleset has a name, first_jsp, and is surrounded by a pair of curly braces.

It has two introductory clauses (each also delimited by a pair of curly braces).

The meta clause lets us know that the ruleset defines a function named hello which will be shared as part of the pico's API just as soon as this ruleset is installed.

The global clause includes just the definition of the promised function, which is also surrounded by a pair of curly braces.

Normally a ruleset also has a list of rules, but there are none in this example.

The web resource

By installing this ruleset into any pico, we give it an API on the web.

The URL that identifies this resource will have the format

https://DOMAIN:PORT/sky/cloud/ECI/first_jsp/hello.html

in which DOMAIN and PORT are replaced by the domain name of the server running the pico engine and its port number, and ECI (event channel identifier) is a random-looking string that authorizes this API call.

When a browser is instructed to request the hello.html resource, using a properly authenticated URL, the pico engine (running as a web server) will invoke the hello function.

When the hello function runs, it will compute and return a character string which is the HTML page of the response. First, it selects a random number between zero and one, bound to the name num. Then it binds the name requestURI to the last name of the resource, "hello.html". Finally, it computes the string of HTML code and returns it.

Chevron quoting

When a program computes a string, it always has some way to delimit the characters in the string from the characters of the programming language outside of the string. We see one way of doing that, in line 2 of the function definition, using the double quote character at the start and end.

Chevron quoting (also called extended quoting) uses double angle brackets, with << at the start and >> at the end. The HTML code returned by the function is surrounded by one such pair (at lines 3 and 15 of the function definition).

Beestings

Beestings are named for the appearance of the pair of characters #{ which starts it and the right curly brace which ends the beesting. Whatever comes between these delimiters is a KRL expression which evaluates to a character string and that string replaces the entire beesting.

Inside the first beesting is a special form of if-then-else called a ternary expression. First comes a Boolean expression, in this case (num > 0.95), then the first infix operator => which introduces the expression for the case where the Boolean expression evaluates to true, then the second infix operator |, and finally the expression for the otherwise case.

While the first beesting encountered (in line 7 of the function) contains a ternary expression, the remaining three (in lines 8, 10, and 12) each contain just a name, and so they are replaced by the value bound to that name.

Putting it all together

To see this web application in action, you'll need to do these things:

have control of a server^* (either on the Internet, or just your local machine)
install the pico engine on that machine (see instructions)
start the developer UI
create a pico (or just use the Root pico)
install the ruleset shown above (and at this URI) in your pico
create a channel that allows access to the function
from your browser visit the resource described by a URL following the pattern above and tailored to your pico engine's domain and port and the identifier of the channel you created in step 6

Notes

^* Why is this important? See this post about software freedom.

PicoStack

A first web application in a pico