Para los apasionados de scala, tenemos una alternativa para escribir código para frontend sin abandonar nuestro ecosistema favorito, ahí es donde nace ScalaJs, tenemos toda la potencia del lenguaje y capacidad de poder ejecutarse en cualquier navegador, al estilo de typescript, salvo que han comenzado a aparecer librerías nacidas para poder ejecutarse tanto la jvm como en el navegador, sin ninguna adaptación por parte nuestra, como es el caso de librerías de testing, log, parseo de json, etc. sobre este tema ya nos tocara hablar luego, esto nos permite trabajar en backend en la jvm, en backend en nodejs, y hasta el el browser, pero ya hablaremos de esto en otro post.

UI

En esta ocasión me quiero centran en la UI, para el navegador exclusivamente, y para comenzar comentarles que existen diferentes alternativas, algunas son solo fachadas sobre librerías conocidas como son react, vue, ect. y otras que creadas enteramente sobre scalajs. La lista completa de fachadas la pueden ver aquí: https://www.scala-js.org/libraries/facades.html

En mi caso opte por revisar una librería escrita enteramente en scalajs, que se llama Laminar, me parece una opción interesante, usar una fachada fue algo que evalué pero no termina de convencerme, pues estas librerías ya de por sí cargadas sumarle un peso adicional de una fachada más el peso del port de scala a js, no me pareció la mejor opción en mi caso.

Así que una vez descartada las fachadas me quedaron alunas opciones nativas, la lista completa la pueden ver aquí: https://www.scala-js.org/libraries/libs.html, de todas las opciones me quede con laminar, ya que la veo bastante interesante y que esta en continuo desarrollo, es un proyecto vivo en continua evolución, es más ya hicieron el port hacia la versión 3 de scala, una gran hazaña teniendo en cuenta que no solo dependen del lenguaje scala que hace varios cambios en el lenguaje, sino que dependen de scalajs.

Ejemplo de laminar

Una vez elegido la librería, les muestro un ejemplo de código, básicamente un formulario que usa un InputLabel, el cual tiene un label y un input, el cual recibe como parámetro un readOnlySignal (StrictSignal) que es lo que nos permite ser reactivo, ya que permite el propagar el cambio de estado entre los diferentes componentes que estén a la escucha de esta variable reactiva.

Luego agregar un observador al onSubmit para lo cual tenemos una función utilitaria inContext que nos permite tener acceso al propio nodo que lo contiene, en nuestro caso el formulario, y ahí poder trabajar las validaciones manualmente.

Repositorio en Github: https://github.com/Miuler/my-health