Owlet

Owlet is a Typed Spreadsheet UI library for ScalaJS. It is built on top of Monix and Typelevel Cats to combine predefined input fields to a reactive user interface, just like what you would done in spreadsheet. Owlet is inspired by the PureScript library Flare.

<img src=https://upload.wikimedia.org/wikipedia/commons/1/14/Imperial_Encyclopaedia_-_Animal_Kingdom_-_pic014-%E8%B2%93%E9%A0%AD%E9%B7%B9%E5%9C%96.svg width=50% />

Get Started

1. add dependency in your build.sbt

Stable

libraryDependencies += "us.oyanglul" %%% "owlet" % "<maven version>"

RC

resolvers += "jitpack" at "https://jitpack.io"
libraryDependencies += "com.github.jcouyang" % "owlet" % "<jitpact version>"

2. Now programming UI is just like using spreadsheet

import us.oyanglul.owlet._
import DOM._
val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = fx[Double, Double](_.sum, List(a1, a2, a3))
render(a1 &> a2 &> a3 &> sum, "#app")

or

val a1 = number("a1", 1)
val a2 = number("a2", 2)
val a3 = number("a3", 3)
val sum = a1 |+| a2 |+| a3
renderOutput(sum, "#app")

eh… Ready for 3D spreadsheet programming?

You know spreadsheet is 2D, when we have monad, it became 3D

!!!Monad Warning!!!

val numOfItem = int("noi", 3)
val items = numOfItem
  .flatMap(
    no => (0 to no).toList.parTraverse(i => string("inner", i.toString))
  )

• imagine that numOfItem lives in dimension (x=1, y=1, z=0)
• then items live in dimension (x=1,y=1,z=1)

you can render either numOfItem or items seperatly, for they live in diffenrent z axis (which means render items you won’t able to see numOfItem even it’s flatMap from there

but you can some how connect the dots with magic &>

renderOutput(numOfItem &> items, "#output")

Anyway, just keep in mind that monad ops map ap flatMap… will lift your z axis parMap parAp parXXX instead, will keep them in the same z axis

More…

• Tutorial
• Tweaking Owlet with Lens
• Todo MVC Completed
• API Doc