🖕🏿 🥁 😟 Scala.jsの簡単でシンプルな 👨🏿‍🏭 👩‍👧‍👦 ♊️

最愛のScalaバックエンドサービス用に小さなフロントエンドを作成する必要があることを想像してみましょう（たとえば、すべてAkkaにあります）。ブラウザーの互換性を気にせず、設計なしで内部のニーズに合わせて、非常にシンプルにする：いくつかのプレート、いくつかの金型、ソケットで何かが更新され、点滅したので、ささいなこと。そして今、あなたはjsの世界に何があるかを考え始めます。角度？角度2？反応する？ Vue？ jQuery？それとも何か？それとも、単にバニラでそれをし、心配しないでください？しかし、手はもはやJavaScriptの中にありません。まったく覚えていません。セミコロンを入れることができず、引用符が同じではなく、戻るのを忘れた場合、コレクションにお気に入りのメソッドがありません。そのようなことのために失敗することはできますが、したくない、まったくしたくないことは明らかです。あなたは書き始めますが、それでも何かが正しくありません。

そして、悪い考えが頭に忍び込んでくるのか、それともScala.jsなのか？あなたはそれらを追い払うが、手放さないでください。

どうして？

一部の人は、それがすべてのことについて疑問に思うかもしれません。要するに、これはブラウザーオブジェクト、dom要素、およびScalaコードを取得してJavaScriptでコンパイルするコンパイラーのバインダーを備えたライブラリーです。また、エンコーダー/デコーダーjsonを使用したケースクラスなど、jvmとjsの間で共有クラスを作成することもできます。 JavaScriptにコンパイルできるC ++のように、恐ろしく聞こえます（ただし、これは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>

ワークベンチに気づいた？このプラグインを使用すると、何かを変更したときにページを自動的にコンパイルおよび更新できます。とても快適です。

次に、 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バニラがあるので、一般的には、あなたは本当にそれを手に入れません。 document.createElement（ "div"）を介してdom要素を作成し、一般にそれらを操作することは非常に不便です。この種のことについては、少なくともいくつかの既製のソリューションがあります。また、Webフレームワークもあります。簡単な方法を探しているわけではありません。すべて自分でやりましょう。

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(a: 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コンポーネント：

ペイン、入力、ボタン

 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(c)) className -= c } if (v != ButtonStyle.Default) className += v.toString } } class Input 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())

結果として何が起こったのか

複雑な状態構造を持たない単純なルーターを作成することもできますが、これはすでに技術的な問題です。その結果、特別な費用をかけずに10分でシンプルでわかりやすい構造が得られ、新しいコンポーネントや機能を拡張して補充することができました。

Scala.jsはテクノロジーの開発において非常に興味深い方向ですが、2ページ以上で構成されるプロジェクトにこのようなものを使用することはお勧めしません。私の意見では、Scala.jsはインフラストラクチャーや、プロジェクトをサポートおよび開発するための一般的な開発者を見つける場所がまだ不十分であるためです。この技術は非常に証明されていませんが、単純なことを解決するために存在する権利があります。

PS。コードには欠陥が含まれる場合があります。ご自身の責任で使用してください。すべての人に良い！

Scala.jsの簡単でシンプルな

More articles: