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.
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