0) Siriではなく、Sri。

...画像キャプチャで、何か嫌な予感を思い起こす人もいるでしょうが、AltJSなscalajsでreact nativeでクロスプラットフォーム開発という取り組み、Sri (Scala React interface)に注目中。
そもそも、直近使うには、自分にはちょっと大きすぎると思っているreact。ただ、ありうる未来な気がする、react nativeでのクロスプラットフォームの展開には興味がある。

そうしたところ、"記事:sri - Scala.jsを使ったReact Native実装"にて、scalajsがreactという取り組みに次いで、react nativeも、という取り組みが進んでいることを知る。
sbtコマンドを叩いて長時間待って試してみても動きはしなかったが、どのみち直近にreact nativeを使うことはないので、Altjs地雷の最新動向をちょっと探ってみることに。

1) HelloSriMobile.scala

npmの世界とsbtの世界に加えて、xcodeなどの世界をどう折り合いつけてビルドしていくものなのか、なども若干興味があるが、そのあたりこそが地雷原だろうから、そちらはパスして、scalaコードを眺めることとする。

From_github.com/chandu0101/sri/blob/master/mobile-examples/src/main/scala/sri/mobile/examples/HelloSriMobile.scala

package sri.mobile.examples

import sri.core.ElementFactory._
import sri.core.ReactComponent
import sri.mobile.ReactNative
import sri.universal.components._
import sri.universal.styles.UniversalStyleSheet

import scala.scalajs.js
import scala.scalajs.js.annotation.ScalaJSDefined


object HelloSriMobile {

  @ScalaJSDefined
  class Component extends ReactComponent[Unit, Unit] {

    def render() = {
      View(style = styles.container)(
        Text(style = styles.text)(s"Welcome to Sri Mobile(${ReactNative.Platform.OS})"),
        Image(style = styles.image, source = ImageSource(uri = "http://www.scala-js.org/images/scala-js-logo-256.png"))(),
        Text(style = styles.text)("Scala.js - Future of app development!")
      )
    }
  }

  object styles extends UniversalStyleSheet {

    val container = style(flexOne,
      backgroundColor := "rgb(175, 9, 119)",
      justifyContent.center,
      alignItems.center)

    val image = style(width := 256, height := 256, margin := 20)

    val text = style(fontWeight._500,
      fontSize := 18,
      color := "white")

  }

  val ctor = getTypedConstructor(js.constructorOf[Component], classOf[Component])

  def apply() = createElementNoProps(ctor)

}

ReactComponentのrender.ViewにscalaらしいDSLで仮想DOMを記述していく作り。
そもそもが、ブラウザのDOMとは別物なのだから、
テキスト表示は、
Text(style = styles.text)(s"Welcome to Sri Mobile(${ReactNative.Platform.OS})")
と記述する、と定められているならば、それに従うだけ。

ReactNative.Platform.OSの部分が、実行先についての環境変数を取ってくる部分か。

スタイルシートも、クロスプラットフォーム対応の仮想スタイルシートなわけであって、
object styles extends UniversalStyleSheet内の

val text = style(fontWeight._500,
      fontSize := 18,
      color := "white")

という定義にて、styles.textが定まる。

これはこれで十分にあり(クロスプラットフォームでちゃんと動くならば)。

2) Relayにも積極対応

Sriは、データ取得時の懸念事項を抹殺してくれる、とかいう、Relayにも積極対応しようとしている。

From_github.com/chandu0101/sri/blob/master/relay/src/main/scala/sri/relay/query/RelayQL.scala


package sri.relay.query

import sri.relay.macros.RelayMacro

import scala.language.experimental.macros
import scala.scalajs.js

object RelayQL {
  type RelayConcreteNode = js.Any

  def apply(code: String): String = macro RelayMacro.relay_macro_impl
}

Restfulな世界を離れ、GraphQLをぶん投げてのクライアント-サーバー間通信。このあたりを、scala.language.experimental.macrosからインポートされたマクロ入りのscala DSL黒魔術で、さいきょうに記述する。

サーバ側がnode上のscalajsコードになるのか、finagleなどのJVM上のscalaコードになるのかは分からない。...が、いずれにせよ、仮に近い将来に、現場でこのあたりを託されソースコードを追う必要に迫られたならば、生唾ゴクリの世界なのは間違いない。

3) まずはscalajs-reactから

From "sri - Scala.jsを使ったReact Native実装"

sriをはじめるためにはScalaのインストール、sbtのインストールに加えて
sbt fullOptJS
を実行してかなりの時間を待つと言った具合に環境整備に時間がかかります。しかしそれさえ終わればScala.jsを使ってiOS/Android/Webアプリケーションが現実的な速度で動くようになります。技術的にはとても興味深いプロジェクトです。

現場に行く気ゼロのmoongiftさんに代わって、興味深い現場を眺めたいならば、sriの開発者の方もかなりコミットしているという、Scalajsのreact実装、scalajs-reactのドキュメントから入るのが吉、か:

val HelloMessage = ReactComponentB[String]("HelloMessage")
  .render($ => <.div("Hello ", $.props))
  .build

ReactDOM.render(HelloMessage("John"), mountNode)

うん、、sriとscalajs-react、HelloWorldからして全然記法が違うんだけど、どちらもScala DSLなのは間違いない！