## 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!