owlet
owlet copied to clipboard
Typed Spreadsheet UI library for ScalaJS
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.
Do one thing and do it well micro birds library series
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[List, 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