Example 1: Two number inputs

Imagine you want to build a web app to calculate an exponent.

The core business should be just as easy as:

val base = 2
val exponent = 10
val pow = math.pow(base, exponent)

You can simply translate code above into an interactive web app by using Owlet:

How did I do this? It’s Owlet meowgic:

Owlet[_] is instance of typeclass Applicative

So you can use .mapN which is a syntax from typeclass Apply

and .mapN is just like .map, but instead of map one Functor, you can map multiple Functors(unfortunately, these functors need to be Apply as well). So here we just map over both baseInput and exponentInput using math.pow

wait, but what the hell is parMapN?

Short Answer: It’s parallel version of mapN

Long Story: it’s from typeclass Parallel, Owlet is actually a Monad, which you know, is running in sequence. But base and exponent don’t depend on each other, they can run in parallel instead.

While Applicative can be parallel, so Owlet implement an Applicative version of Owlet.Par. Owlet and Owlet.Par is Isomorphic(means you have morphism back and forth, Owlet can be converted to Owlet.Par and backward).

Parallel is just the typeclass for it, since it help you to convert Monad to Applicative automatically by just adding par prefix in your method name.

So parMapN will know you want to use Applicative version of mapN, it will covert Owlet to Owlet.Par, map it and covert it back to Owlet.

Example 2: Semigroup

Owlet[A] is also an instance of typeclass Monoid

Think about how you concat two string together

val hello = "Hello"
val world = "World"
val helloworld = hellow + " " + world

Here is the web interactive version in Owlet:

|+| is the method from Semigroup so you can simply concat two value

Example 3: Traverse

Owlet[_] is an instance of typeclass Traverse

which will be very useful when we need to create a Owlet[List[A]] from a List[A]

using par* again since those number aren’t sequence.

Example 4: Select box

Select box is just like a Map of data, it will emit value you select

Example 5: Checkboxes

checkbox will generate a pair of value (name, value)

so if we traverse a list of checkboxes, then we have a list of (name, value)

toggle group will generate exclusive value

Example 6: Buttons

There are two effects from a button, button down will emit a value and button up will emit another

and you can simply fold those values into one

Example 7: Adding items to a list

with button, it’s easy to build an incremental list

Example 8: Multiple buttons

Owlet[_] is an instance of MonoidK as well

with MonoidK method <+>, we can easily fold multi actions(Elm style) on our init value:

Example 9: Resizable lists

Imagine how many lines of code you need to implement a simple todo list?

Example 10: Spreadsheet like

In spreadsheet it’s very easy to do this:

and we can do exactly the same thing programmatically

Example 11: Scala Tag

easy to hook up with any template engine like Scala Tag reactively render complex UI

Example 12: Monad

most important! Owlet is Monad!

Example 13: Resizable List