Abstract
Widok is a reactive web framework for the JVM and Scala.js. Its key concepts are:
- Pages: Widok enforces modularisation of your web application. You split your application into pages. A router watches the browser query and loads the respective page.
- Widgets: The layout is specified in terms of composable widgets. Widgets are bound to dynamically changing values which are rendered on-the-fly in the browser.
- Bindings: Widok ships bindings for CSS frameworks like Bootstrap and Font-Awesome.
- Reactive programming: Reactive data structures, which implement a simple model of data propagation, are provided. Widok has reactive counterparts for variables, arrays, maps and sets. Instead of dealing with constant values, you specify the data flow as streams, on which you operate with higher-order functions like map() or filter().
Code example
The following example implements a single-page application that uses two-way binding:
package example
import org.widok._
import org.widok.html._
object App extends PageApplication {
val name = Var("")
val hasName = name.map(_.nonEmpty)
def view() = div(
h1("Welcome to Widok!")
, p("Please enter your name:")
, text().bind(name)
, p("Hello, ", name)
.show(hasName)
, button("Change my name")
.onClick(_ => name := "tux")
.show(name !=== "tux")
, button("Log out")
.onClick(_ => name := "")
.show(hasName)
)
def ready() { }
}
Live Scala Fiddle demo
Try it yourself here:
User manual
The user manual (v0.2.2) is available in three formats:
Showcase
- Client-server skeleton
- TodoMVC
- Poliglot-UI: Node.js application that uses the Bootstrap bindings
Project links
- API documentation (Scala.js)
- API documentation (JVM)
- Issue tracker
- Google Group
- Gitter
- Travis CI
- Source code