ScalaMatsuri 2017

1. Scala Warrior
and type-safe front-end development with Scala.js
Naoki Takezoe
@takezoen
BizReach, Inc
Scala WarriorにおけるScala.jsとタイプセーフな
フロントエンド開発

2. Who am I?
● Scala Programmer at BizReach, Inc
● 4+ years Scala experience
● GitBucket author / Scalatra committer
株式会社ビズリーチに勤務するScalaプログラマです。
本を書いたりGitBucketやScalatraなどを開発しています。

3. About Scala Warrior
Scala Warriorについて

4. Scala Warrior
● A game written in Scala for learning Scala
● Inspired by Ruby Warrior
● Based on Scala.js, ScalaTags and ScalaCSS
https://github.com/scalawarrior/scalawarrior
Scala学習用のWebベースのゲームです。
Scala.js、ScalaTags、ScalaCSSなどを使用しています。

5. Motivation
● We wish Scala to become more popular
programming language in Japan
● Activities we did for that since 2011:
○ Writing Scala books
○ Making hands-on tutorial for Play2 and Slick
○ Using Scala in real business systems
2011年頃からScalaの普及のための様々な活動を行ってきま
した。

6. But they were not enough...
しかしまだ十分普及したとは言えません。

7. What's missing?
何が足りないのでしょうか？

8. Making learning fun
● Newbies are feeling
difficulty in Scala
more than necessary
● In fact, We can learn
Scala step by step
Scala初心者はScalaを必要以上に難しく感じています。
もっと楽しく気軽に学ぶことのできる方法が必要です。

9. It's a game!
ゲームしか！！

10. Demo
実際の動作をご覧ください。

11. Team
Takako Shimamoto
Planning / Illustration
Naoki Takezoe
Programming
Scala Warriorはこの2人で開発しました。

12. Server
(Play2)
Architecture of Scala Warrior
Web Browser
Scala Warriorの仕組みを説明します。

13. Server
(Play2)
Architecture of Scala Warrior
Web Browser
Scala
1. Send Scala code edited by user
まず、ユーザが入力したScalaコードをサーバに送信

14. Server
(Play2)
Architecture of Scala Warrior
Web Browser
Scala
2. Compile Scala code to
JavaScript by Scala.js compiler
1. Send Scala code edited by user
サーバでScala.jsコンパイラでJavaScriptコードを生成

15. Server
(Play2)
Architecture of Scala Warrior
Web Browser
Scala
JavaScript
2. Compile Scala code to
JavaScript by Scala.js compiler
1. Send Scala code edited by user
生成したJavaScriptコードをブラウザに返却

16. Server
(Play2)
Architecture of Scala Warrior
Web Browser
Scala
JavaScript
2. Compile Scala code to
JavaScript by Scala.js compiler
1. Send Scala code edited by user
3. Evaluate responded JavaScript code
ブラウザ側で返却されたJavaScriptをeval()して評価

17. JavaScript libraries
Annimation is built on CreateJS
Code editor is built on Ace
アニメーションにはCreateJS、エディタにはAceを使用

18. Made their Scala.js facade for Scala.js
● scalajs-ace
○ Ace is a powerful online code editor
○ But Scala Warrior hasn't used for several reasons
● scalajs-createjs
○ CreateJS is a suite of libraries to build rich
interactive web contents
これらのライブラリのScala.js用ファサードを作りました（でも
Scala Warriorではscalajs-aceは使っていません）

19. Great thanks for Li Haoyi's scala-js-fiddle!
https://github.com/lihaoyi/scala-js-fiddle
Li Haoyiさんのscala-js-fiddleを参考にさせていただきました。
ありがとうございます。

20. Note
● Scala Warrior is a distinctive application
taking advantage of Scala.js
● Uses Scala.js to compile Scala code
entered by user
● Evaluates compiled code on the browser to
protect the server
Scala Warriorは実行時にScala.jsコンパイラを活用する特殊
なアプリケーションであることに注意してください。

21. Type-safe frontend development
with Scala.js
Scala.jsによるタイプセーフなフロント開発について

22. Typesafe front-end stack in Scala
Scala
Scala.js
ScalaTags ScalaCSS
scalajs-react
Server-side
Front-end

23. Scala.js
Scala Compiler
ScalaJS Compiler
Scala Code
*.sjsir*.class
Translate Scala code
to JavaScript by
Scala compiler plugin
*.js
optimize / package
コンパイラプラグインでJavaScriptへの変換を行います。

24. Scala.js is awesome!!
他のソリューションと比べてメリットしかありません。

25. Scala.js is universal!
Play project (server-side)
Scala.js project (client-side)
Cross-build project (common)
Scalaとコードを共有することもできます。

26. Interoperability
● Need type mapping like .d.ts
○ scala-js-ts-importer can convert from .d.ts
○ You can find a lot of .d.ts at DefinitelyTyped
○ But can't convert perfectly...
● js.Dynamic (not type-safe)
import scala.scalajs.js.Dynamic._
val editor: Dynamic = global.ace.edit("editor")
JavaScriptとの連携も完璧です。

27. ScalaTags
● Type-safe XML/HTML generation library
● Scala and Scala.js support
ScalaTagsはXMLやHTMLをScalaコードでタイプセーフに生
成するためのライブラリです。

28. ScalaTags
div(`class`:="modal", id:="gameOverModal", role:="dialog")(
div(`class`:="modal-dialog")(
div(`class`:="modal-content")(
div(Styles.modalBody)(
h4(`class`:="modal-title", "Game Over!")
),
div(`class`:="modal-footer")(
a(
`href`:="/level/" + level, `class`:="btn btn-primary",
"Retry this stage"
)
)
)
)
)
ちょっと厳しい感じがあります。

29. ScalaCSS
● Type-safe CSS generation library
● Scala and Scala.js support
● 2 different mode
○ Standalone mode
○ Inline mode
● ScalaTags and scala-react integration
ScalaCSSは同じくCSSをScalaコードで生成するためのライブ
ラリです。2つのモードがあります。

30. ScalaCSS (Standalone mode)
import scalacss.Defaults._
object Styles extends StyleSheet.Standalone {
import dsl._
"h1" - (
fontSize(200 %%),
fontWeight.bold
)
"h2" - (
borderBottom(1 px, solid, black)
)
"div.contents" - (
padding(4 px)
)
}
スタンドアロンモード。ここからCSSを生成できます。

31. ScalaCSS (Inline mode)
import scalacss.Defaults._
object Styles extends StyleSheet.Inline {
import dsl._
val silkFont = fontFace("Silkscreen")(
_.src("url(/assets/stylesheets/slkscr.ttf)")
)
val silk = style(
fontFamily(silkFont)
)
val logo = style(
verticalAlign.bottom,
width(60 px),
paddingBottom(14 px),
silk
)
}
インラインモード。こんな感じでスタイルを定義しておき

32. ScalaCSS (Inline mode)
import scalacss.Defaults._
object Styles extends StyleSheet.Inline {
import dsl._
val silkFont = fontFace("Silkscreen")(
_.src("url(/assets/stylesheets/slkscr.ttf)")
)
val silk = style(
fontFamily(silkFont)
)
val logo = style(
verticalAlign.bottom,
width(60 px),
paddingBottom(14 px),
silk
)
}
div(
img(
`class`:= Styles.logo.htmlClass,
src:= "/assets/images/logo.png"
),
"Scala Warrior"
)
Compile-time reference checking
class属性に埋めんで使います。

33. JavaScript Framework Integration
● React
○ scalajs-recat
● AngularJS
○ scalajs-agular
○ angulate2
メジャーなJavaScriptフレームワークをScala.jsで利用するた
めのライブラリもあります。

34. Great! Super Type-safe!
超タイプセーフ！！

35. All goes well!
これで全部うまくいく！！

36. ...Really?
まじで？？

37. Problems
● Generated JavaScript file size
● Cost for creating type mappings
問題もあります。

38. Problems
● Generated JavaScript file size
● Cost for creating type mappings
● Should front-end engineers write Scala?
一番の問題はそもそもフロントエンジニアがScalaを書くべきな
のか？ということです。

39. The Approach
Reference:
Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtman
https://www.youtube.com/watch?v=aqtoe0xDayM
1つのアプローチを紹介します。

40. The Approach
Scala
Scala.js
(Interface for Frontend)
User Interface
(React or AngularJS?)
Server-side
Front-end

41. The Approach
Scala
Scala.js
(Interface for Frontend)
User Interface
(React or AngularJS?)
Server-side
Front-end
JavaScript
Programmer
Scala
Programmer
JavaScript / Scalaプログラマでこのように分担します。

42. Scala.js and JavaScript ecosystem
既存のJavaScriptのエコシステムとの連携について

43. ● Add this line to build.sbt
● @JSExport annotated elements are
expoted as CommonJS module
Export Scala.js as CommonJS module
scalaJSModuleKind := ModuleKind.CommonJSModule
CommonJSモジュールとしてエクスポートできます。

44. Export Scala.js as CommonJS module
import scala.scalajs.js
import js.annotation._
@ScalaJSDefined
@JSExport("HelloWorld")
class HelloWorld extends js.Object {
def sayHello(name: String): String = s"Hello ${name}!"
}
var hello = require("./hello-fastopt.js")
var helloWorld = new hello.HelloWorld();
console.log(helloWorld.sayHello("Scala.js"));
Scala.js
JavaScript

45. Use CommonJS module in Scala.js
import scala.scalajs.js
import js.annotation._
@js.native
@JSImport("./hello-fastopt.js", "HelloWorld")
class HelloWorld extends js.Object {
def sayHello(name: String): String = js.native
}
Scala.jsでCommonJSモジュールを使うこともできます。

46. Summary
まとめ

47. Why Scala in frontend?
● Scala.js is not ALL or NOTHING!
○ Scala programmers can provide libraries for
frontend using Scala.js
○ JavaScript programmer can use existing frontend
tools and frameworks
全部Scala.jsで作らないといけないわけではありません。
適切な役割分担によってScalaのメリットを活かせます。

48. Enjoy type-safe
frontend web development
with Scala.js!
Scala.jsはタイプセーフな"フロント"開発ではなくタイプセーフ
な"Web"開発におすすめです。

49. ...and try Scala Warrior!
https://github.com/scalawarrior/scalawarrior
Scala Warriorも是非試してみてください。