Scala.js UI
Ein Scala-3- und Scala.js-UI-Framework für serverseitig gerenderte Anwendungen.
Die Idee
Komponenten in Scala entwickeln, initiales HTML auf dem Server rendern und denselben Komponentenbaum im Browser hydrieren. Das Framework vereint reaktiven Zustand, Routing, Formulare, Controls und Rendering mit geregeltem Lebenszyklus.
Was es kann.
Serverseitiges Rendering
Crawlbares HTML aus denselben Komponenten erzeugen, die auch im Browser laufen.
Hydration
Verhalten an serverseitig gerendertes Markup anbinden.
Komponentenbibliothek
Scala.js-DSL, Routing, Formulare und Controls in einer Laufzeit nutzen.
Installation
libraryDependencies += "com.anjunar" %% "scalajs-ui-core" % "1.0.6"
Paket: com.anjunar:scalajs-ui-core
Direkt loslegen.
ScalaJSPlugin aktivieren, scalajs-ui-core einbinden und eine Komponente mit Runtime.mount starten.
Eine reaktive Komponente
Ein Property steuert die Anzeige; der Button aktualisiert den Wert, ohne die Seite neu aufzubauen.
import ui.core.component.AbstractComponent
import ui.core.dsl.ClassDsl.classes
import ui.core.dsl.EventDsl.onClick
import ui.core.layout.Button.button
import ui.core.layout.Div.div
import ui.core.layout.TextComponent.text
import ui.core.layout.VBox.vbox
import ui.core.render.Cursor
import ui.core.state.Property
final class Counter extends AbstractComponent {
val tagName = "main"
override def compose(cursor: Cursor): Unit = {
val count = Property(0)
vbox {
classes = Seq("counter")
div { text(count.map(n => s"Count: $n")) {} }
button("Increment") { onClick(_ => count.set(count.get + 1)) }
}
}
}Auf dem Server rendern, im Browser hydrieren
Dieselbe Komponente wird serverseitig gerendert und danach im Browser hydriert.
import ui.core.async.AsyncRenderContext
import ui.core.component.Runtime
import ui.core.render.HydratingCursor
import org.scalajs.dom
val html = Runtime.renderToStringAsync { cursor =>
Runtime.mount(new Counter, cursor)
}
val async = new AsyncRenderContext()
val cursor = HydratingCursor.root(dom.document, async)
Runtime.mount(new Counter, cursor)Bewusst gestaltet.
Ein Komponentenbaum steuert Server-Rendering, Browser-Hydration und reaktive Aktualisierungen. Beim Entfernen einer Komponente werden Abonnements und Event-Listener freigegeben.
Mach es zu deinem Werkzeug.
Weiter entdecken.
Hibernate DDL Manager
Kontrollierte Schemaentwicklung auf Basis von Hibernate-Metadaten.
↗JSON Mapper
JSON-Mapping für bestehende Objektgraphen und Domänenmodelle.
↗Scala Universe
Eine aufgelöste Sicht auf JVM-Typen, Generics und Annotationen.
↗Scala JS Ember
Ein modularer Rich-Text-Editor auf Basis eines unveränderlichen Dokumentmodells.
↗Scala Reflect
Zur Compile-Zeit erzeugte Typmetadaten für JVM und Scala.js.
↗