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.
1. add dependency in your
libraryDependencies += "us.oyanglul" %%% "owlet" % "<maven version>"
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")
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
val numOfItem = int("noi", 3) val items = numOfItem .flatMap( no => (0 to no).toList.parTraverse(i => string("inner", i.toString)) )
- imagine that
numOfItemlives in dimension (x=1, y=1, z=0)
itemslive in dimension (x=1,y=1,z=1)
you can render either
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
flatMap... will lift your z axis
parXXX instead, will keep them in the same z axis