4-frontend.md

shortTitle	shortDescription	expandText	anchorTarget	icon
Frontend Web	Reactive UI's backed by types. Use the same Scala libraries across the stack. Integrate with the JavaScript library and tooling ecosystem.	building frontend	explore-scalajs	icon8.svg

Portable Code and Libraries

Write the code once and have it run on the frontend as well as on the backend.

Reuse the same libraries and testing frameworks on both sides. Write API endpoints that are typechecked across the stack.

For example: define your data model in a shared module. Then use sttp to send data to the backend, all while upickle handles seamless conversion to JSON, and also reads JSON back into your model on the backend.

More Scala.js libraries and frameworks

Share your model code with frontend and backend

enum Pet derives upickle.ReadWriter:
  case Dog(id: UUID, name: String, owner: String)
  case Cat(id: UUID, name: String, owner: String)

---

// Send an HTTP request to the backend with sttp
val dog = Dog(uuid, name, owner)
val response = quickRequest
  .patch(uri"${site.root}/petstore/$uuid")
  .body(dog)
  .send()
response.onComplete { resp => println(s"updated $dog") }

Interoperability with JavaScript

Call into JS libraries from the npm ecosystem, or export your Scala.js code to other JS modules. Integrate with Vite for instant live-reloading.

Leverage the JavaScript ecosystem of libraries. Use ScalablyTyped to generate types for JavaScript libraries from TypeScript definitions.

Scala.js facades for popular JavaScript libraries

React component written with Slinky

val Counter = FunctionalComponent[Int] { initial =>
  val (count, setCount) = useState(initial)
  button(onClick := { event => setCount(count + 1) },
    s"You pressed me ${count} times"
  )
}
ReactDOM.render(Counter(0), mountNode)

Powerful User Interface Libraries

Write robust UIs with the Scala.js UI libraries.

Pick your preferred style: Laminar for a pure Scala solution, Slinky for the React experience, or Tyrian or scalajs-react for the pure FP-minded developers.

See more Scala.js libraries for frontend and UI

Manage state with Tyrian using the Elm architecture

def view(count: Int): Html[Msg] =
  button(onClick(Msg.Increment))(
    s"You pressed me ${count} times"
  )
def update(count: Int): Update[Msg, Int] =
case Msg.Increment => (count + 1, Cmd.None)
case _             => (count,     Cmd.None)