Widok

Reactive web framework for the JVM and Scala.js

Build Status Gitter

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

Project links

Similar projects