React4s
The uncomplicated React binding for Scala
Usage
EXAMPLES
To-do list
Toggle
CSS Class
Search
Tree Editor
Timer
Contexts
Portals
ahnfelt/react4s
scala-js/scala-js
React4s: Component based UI
React4s is a component based library for writing webapps in Scala, with React.js on the inside. The components are self-contained and composable, and rendering is specified as a pure function.
In React4s, there are no callbacks to memoize. React4s takes advantage of immutability and structural equality to implement shouldComponentUpdate() automatically. No code required.
This means that only the relevant path from the root of the view to the updated branch is recomputed. When the view is balanced, the speedup is exponential: O(log(n)) instead of O(n).
will show up as
Hello
case class UppercaseComponent() extends Component[NoEmit] {
val text = State("Hello!")
override def render(get : Get) = {
E.span(
E.input(A.value(get(text)), A.onChangeText(text.set)),
Text(" = " + get(text).toUpperCase)
)
}
}
No macros, no implicits, no boilerplate
For the sake of simplicity, React4s uses no macros and no implicits. It's still concise though - check out the examples and compare them to similar libraries, for Scala or otherwise.
TodoMVC in 139 lines
Including persistence and routing. Live version and source code.
Performance by default
Without shouldComponentUpdate(), React.js recreates the entire virtual DOM for every event - eg. every letter you type in a text field - which leads to input lag. In plain React.js, the solution is to memoize callbacks, which leads to awkward, unidiomatic code.val text = State("Hello!")
override def render(get : Get) = {
E.span(
E.input(A.value(get(text)), A.onChangeText(text.set)),
Text(" = " + get(text).toUpperCase)
)
}
}
In React4s, there are no callbacks to memoize. React4s takes advantage of immutability and structural equality to implement shouldComponentUpdate() automatically. No code required.
This means that only the relevant path from the root of the view to the updated branch is recomputed. When the view is balanced, the speedup is exponential: O(log(n)) instead of O(n).