Scala.js легко і просто

Давайте уявимо, що потрібно для нашого улюбленого Scala backend сервісу (наприклад, який весь на Akka), зробити невеликий frontend. Для внутрішніх потреб, не переживаючи за сумісність браузерів, і без дизайну, щоб зовсім простенький: декілька табличок, пару формочок, за сокетам щось оновлювалося, моргало, так, по дріб'язку. І ось починаєш думати що там в js світі. Angular? Angular 2? React? Vue? jQuery? Або ще що-небудь? А може просто на ванілі зробити і не переживати? Але руки вже не лежать на JavaScript, не пам'ятають його зовсім. То крапку з комою не поставиш, то лапки не ті, то return забув, то в колекції немає твоїх улюблених методів. Зрозуміло, що для такої штуки можна і тяп-ляп зробити, але не хочеться, зовсім не хочеться. Починаєш писати, але все одно щось не те.

І тут в голову закрадаються погані думки, а може Scala.js? Ти відганяєш, але не відпускає.

А чому б і ні?

Деякі можуть задатися питанням, що це взагалі таке? Якщо коротко, то це бібліотека з биндингом на об'єкти браузера, dom-елементи і компілятор, який бере ваш Scala код і компілює в JavaScript, також можна робити shared класи між jvm і js, наприклад, case class з encoder/decoder json. Звучить страшно, прям як C++, який можна побудувати в JavaScript (хоча це непогано так працює у зв'язці з WebGL).

І так, з чого б нам почати? Підключимо його!

// plugins.sbt
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.14")
addSbtPlugin("com.lihaoyi" % "workbench" % "0.3.0")

// build.sbt
enablePlugins(ScalaJSPlugin, WorkbenchPlugin)

Додамо index-dev.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body class="loading">
<div>Loading...</div>
<script type="text/javascript" src="../ui-fastopt.js"></script>
<script type="text/javascript" src="/workbench.js"></script>
<script>
example.WebApp().main();
</script>
</body>
</html>

Помітили workbench? Цей плагін дозволяє автоматично компілювати і оновлювати сторінку, коли ви щось змінили. Дуже зручно.

Тепер настав час додати точку входу example.WebApp

WebApp
import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import org.scalajs.dom.Event
import org.scalajs.dom.raw.HTMLElement

@JSExport
object WebApp extends JSApp {

@JSExport
override def main(): Unit = {
dom.document.addEventListener. ("DOMContentLoaded", (_: Event) ⇒ {
dom.document.body.outerHTML = "<body></body>"
bootstrap(dom.document.body)
})
}

def bootstrap(root: HTMLElement): Unit = {
println("loaded")
}
}


В мережі є досить докладний мануал Hans-on Scala.js, тому особливо затримуватися не будемо. Наш проект завантажується, оновлюється, настав час писати код. Але так як у нас тут ваніла js, загалом-то, особливо не розгуляєшся. Вкрай не зручно створювати dom елементи document.createElement(«div») і, взагалі, працювати з ними. Для якраз такого роду речей є як мінімум пару готових рішень, і так, знову web frameworks… Ми не шукаємо легких шляхів, нам не хочеться розбиратися з великими монстрами і тягти їх за собою, ми хочемо легкий, маленький додаток. Давайте зробимо все самі.

Нам буде потрібно якийсь більш звичне і зручне представлення dom, хочеться биндинг простий, а ще можна трохи скопіювати принцип і підхід з ScalaFX, щоб попривычнее. Для початку, давайте зробимо простий ObservedList ObservedValue.

EventListener, ObservedList, ObservedValue
class EventListener[T] {
private var list: mutable.ListBuffer[T ⇒ Unit] = mutable.ListBuffer.empty
def bind(f: T ⇒ Unit): Unit = list += f
def unbind(f: T ⇒ Unit): Unit = list= f
def emit(T): Unit = list.foreach(f ⇒ f(a))
}

class ObservedList[T] {
import ObservedList._
private var list: mutable.ListBuffer[T] = mutable.ListBuffer.empty
val onChange: EventListener[(ObservedList[T], Seq[Change[T]])] = new EventListener
def +=(a: T): Unit = {
list += a
onChange.emit(this, Seq(Add(a)))
}
def -=(a: T): Unit = {
if (list.contains(a)) {
list= a
onChange.emit(this, Seq(Remove(a)))
}
}
def ++=(a: Seq[T]): Unit = {
list ++= a
onChange.emit(this, a.map(Add(_)))
}
def :=(a: T): Unit = this := Seq(a)
def :=(a: Seq[T]): Unit = {
val toAdd = a.filter(el ⇒ !list.contains(el))
val toRemove = list.filter(el ⇒ !a.contains(el))
toRemove.foreach(el ⇒ list= el)
toAdd.foreach(el ⇒ list += el)
onChange.emit(this, toAdd.map(Add(_)) ++ toRemove.map(Remove(_)))
}
def values: Seq[T] = list
}
object ObservedList {
sealed trait Change[T]
final case class Add[T](e: T) extends Change[T]
final case class Remove[T](e: T) extends Change[T]
}

class ObservedValue[T](default: T, valid: (T) ⇒ Boolean = (_T) ⇒ true) {
private var _value: T = default
private var _valid = valid(default)
val onChange: EventListener[T] = new EventListener
val onValidChange: EventListener[Boolean] = new EventListener
def isValid: Boolean = _valid
def :=(a: T): Unit = {
if (_value != a) {
_valid = valid(a)
onValidChange.emit(_valid)
_value = a
onChange.emit(a)
}
}
def value: T = _value
def ==>(p: ObservedValue[T]): Unit = {
onChange.bind(d ⇒ p := d)
}
def <==(p: ObservedValue[T]): Unit = {
p.onChange.bind(d ⇒ this := d)
}
def <==>(p: ObservedValue[T]): Unit = {
onChange.bind(d ⇒ p := d)
p.onChange.bind(d ⇒ this := d)
}
}
object ObservedValue {
implicit def str2prop(s: String): ObservedValue[String] = new ObservedValue(s)
implicit def int2prop(s: Int): ObservedValue[Int] = new ObservedValue(s)
implicit def long2prop(s: Long): ObservedValue[Long] = new ObservedValue(s)
implicit def double2prop(s: Double): ObservedValue[Double] = new ObservedValue(s)
implicit def bool2prop(s: Boolean): ObservedValue[Boolean] = new ObservedValue(s)

def attribute[T](el: Element name: String, default: T)(implicit convert: String ⇒ T, unConvert: T ⇒ String): ObservedValue[T] = {
val defValue = if (el.hasAttribute(name)) convert(el.getAttribute(name)) else convert("")
val res = new ObservedValue[T](defValue)
res.onChange.bind(v ⇒ el.setAttribute(name, unConvert(v)))
res
}
}


Тепер настав час зробити базовий клас для всіх dom-елементів:

abstract class Node(tagName: String) {
protected val dom: Element = document.createElement(tagName)
val className: ObservedList[String] = new ObservedList
val id: ObservedValue[String] = ObservedValue.attribute(dom "id", "")(s ⇒ s, s ⇒ s)
val text: ObservedValue[String] = new ObservedValue[String]("")
text.onChange.bind(s ⇒ dom.textContent = s)

className.onChange.bind { case (_, changes) ⇒
changes.foreach {
case ObservedList.Add(n) ⇒ dom.classList.add(n)
case ObservedList.Remove(n) ⇒ dom.classList.remove(n)
}
}
}
object Node {
implicit def node2raw(n: Node): Element = n.dom
}

І трохи ui компонентів, начебто Pane, Input, Button:

Pane, Input, Button
class Pane extends Node("div") {
val children: ObservedList[Node] = new ObservedList
children.onChange.bind { case (_, changes) ⇒
changes.foreach {
case ObservedList.Add(n) ⇒ dom.appendChild(n)
case ObservedList.Remove(n) ⇒ dom.removeChild(n)
}
}
}
class Button extends Node("button") {
val style = new ObservedValue[ButtonStyle.Value](ButtonStyle.Default)

style.onChange.bind { v ⇒
val styleClasses = ButtonStyle.values.map(_.toString)
className.values.foreach { c ⇒
if (styleClasses.contains©) className -= c
}
if (v != ButtonStyle.Default) className += v.toString
}
}
Input class extends Node("input") {
val value: ObservedValue[String] = new ObservedValue("", isValid)
val inputType: ObservedValue[InputType.Value] = ObservedValue.attribute(dom "type", InputType.Text)(s ⇒ InputType.values.find(_.toString == s).getOrElse(InputType.Text), s ⇒ s.toString)

Seq("change", "keydown", "keypress", "keyup", "mousedown", "click", "mouseup").foreach { e ⇒
dom.addEventListener. (e, (_: Event) ⇒ value := dom.asInstanceOf[HTMLInputElement].value)
}
value.onChange.bind(s ⇒ dom.asInstanceOf[HTMLInputElement].value = s)

value.onValidChange.bind(onValidChange)
onValidChange(value.isValid)

private def onValidChange(b: Boolean): Unit = if (b) {
className -= "invalid"
} else {
className += "invalid"
}

def isValid(s: String): Boolean = true
}


Після цього можна зробити свою першу сторінку:

class LoginController() extends Pane {
className += "wnd"
val email = new ObservedValue[String]("")
val password = new ObservedValue[String]("")
children := Seq(
new Pane {
className += "inputs"
children := Seq(
new Span {
text := "Email"
},
new Input {
value <==> email
inputType := InputType.Email
override def isValid(s: String): Boolean = validators.isEmail(s)
}
)
},
new Pane {
className += "inputs"
children := Seq(
new Span {
text := "Password"
},
new Input {
value <==> password
inputType := InputType.Password
override def isValid(s: String): Boolean = validators.minLength(6)(s)
}
)
},
new Pane {
className += "buttons"
children := Seq(
new Button {
text := "Login"
style := ButtonStyle.Primary
},
new Button {
text := "Register"
}
)
}
)
}

І останній штрих:

def bootstrap(root: HTMLElement): Unit = root.appendChild(new LoginController())

Що вийшло в підсумку

Можна ще написати який-небудь простий роутер без занадто складною state структури, але це вже справа техніки. В підсумку ми одержали просту і прямолінійну структуру за 10 хвилин без особливих витрат, яку можна розширювати і поповнювати новими компонентами і функціоналом.

Scala.js дуже цікавий напрям розвитку технології, але все ж я б не рекомендував використовувати щось подібне для проектів, які складаються з більш ніж 2-х сторінок. Так як Scala.js ще, на мій погляд, досить мізерна в інфраструктурі і де взагалі знайти розробників щоб вони підтримували і розвивали проект. Технологія вкрай нераспростаненная, але для вирішення простих речей цілком має право на існування.

PS. У коді можуть бути огріхи, використовувати на свій страх і ризик. Всім добра!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.