Scala Warriorand type-safe front-end development with Scala.js

Naoki Takezoe@takezoen

BizReach, Inc

Scala WarriorにおけるScala.jsとタイプセーフなフロントエンド開発

Who am I?

● Scala Programmer at BizReach, Inc● 4+ years Scala experience● GitBucket author / Scalatra committer

株式会社ビズリーチに勤務するScalaプログラマです。本を書いたりGitBucketやScalatraなどを開発しています。

About Scala Warrior

Scala Warriorについて

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などを使用しています。

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の普及のための様々な活動を行ってきました。

But they were not enough...

しかしまだ十分普及したとは言えません。

What's missing?

何が足りないのでしょうか？

Making learning fun

● Newbies are feeling difficulty in Scala more than necessary

● In fact, We can learn Scala step by step

Scala初心者はScalaを必要以上に難しく感じています。もっと楽しく気軽に学ぶことのできる方法が必要です。

It's a game!

ゲームしか！！

Demo

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

Team

Takako ShimamotoPlanning / Illustration

Naoki TakezoeProgramming

Scala Warriorはこの2人で開発しました。

Server(Play2)

Architecture of Scala Warrior

Web Browser

Scala Warriorの仕組みを説明します。

Server(Play2)

Architecture of Scala Warrior

Web Browser

Scala1. Send Scala code edited by user

まず、ユーザが入力したScalaコードをサーバに送信

Server(Play2)

Architecture of Scala Warrior

Web Browser

Scala

2. Compile Scala code toJavaScript by Scala.js compiler

1. Send Scala code edited by user

サーバでScala.jsコンパイラでJavaScriptコードを生成

Server(Play2)

Architecture of Scala Warrior

Web Browser

Scala

JavaScript2. Compile Scala code to

JavaScript by Scala.js compiler

1. Send Scala code edited by user

生成したJavaScriptコードをブラウザに返却

Server(Play2)

Architecture of Scala Warrior

Web Browser

Scala

JavaScript2. Compile Scala code to

JavaScript by Scala.js compiler

1. Send Scala code edited by user

3. Evaluate responded JavaScript code

ブラウザ側で返却されたJavaScriptをeval()して評価

JavaScript librariesAnnimation is built on CreateJS

Code editor is built on Ace

アニメーションにはCreateJS、エディタにはAceを使用

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は使っていません）

Great thanks for Li Haoyi's scala-js-fiddle!https://github.com/lihaoyi/scala-js-fiddle

Li Haoyiさんのscala-js-fiddleを参考にさせていただきました。ありがとうございます。

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コンパイラを活用する特殊なアプリケーションであることに注意してください。

Type-safe frontend developmentwith Scala.js

Scala.jsによるタイプセーフなフロント開発について

Typesafe front-end stack in Scala

Scala

Scala.js

ScalaTags ScalaCSS

scalajs-react

Server-side

Front-end

Scala.js

Scala Compiler

ScalaJS Compiler

Scala Code

*.sjsir*.class

Translate Scala code to JavaScript by Scala compiler plugin

*.js

optimize / package

コンパイラプラグインでJavaScriptへの変換を行います。

Scala.js is awesome!!

他のソリューションと比べてメリットしかありません。

Scala.js is universal!

Play project (server-side)

Scala.js project (client-side)

Cross-build project (common)

Scalaとコードを共有することもできます。

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との連携も完璧です。

ScalaTags

● Type-safe XML/HTML generation library● Scala and Scala.js support

ScalaTagsはXMLやHTMLをScalaコードでタイプセーフに生成するためのライブラリです。

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" ) ) ) ))

ちょっと厳しい感じがあります。

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つのモードがあります。

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を生成できます。

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 )}

インラインモード。こんな感じでスタイルを定義しておき

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属性に埋めんで使います。

JavaScript Framework Integration

● React○ scalajs-recat

● AngularJS○ scalajs-agular○ angulate2

メジャーなJavaScriptフレームワークをScala.jsで利用するためのライブラリもあります。

Great! Super Type-safe!

超タイプセーフ！！

All goes well!

これで全部うまくいく！！

...Really?

まじで？？

Problems

● Generated JavaScript file size● Cost for creating type mappings

問題もあります。

Problems

● Generated JavaScript file size● Cost for creating type mappings● Should front-end engineers write Scala?

一番の問題はそもそもフロントエンジニアがScalaを書くべきなのか？ということです。

The Approach

Reference:Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtman

https://www.youtube.com/watch?v=aqtoe0xDayM

1つのアプローチを紹介します。

The Approach

Scala

Scala.js(Interface for Frontend)

User Interface(React or AngularJS?)

Server-side

Front-end

The Approach

Scala

Scala.js(Interface for Frontend)

User Interface(React or AngularJS?)

Server-side

Front-endJavaScriptProgrammer

Scala Programmer

JavaScript / Scalaプログラマでこのように分担します。

Scala.js and JavaScript ecosystem

既存のJavaScriptのエコシステムとの連携について

● Add this line to build.sbt

● @JSExport annotated elements are expoted as CommonJS module

Export Scala.js as CommonJS module

scalaJSModuleKind := ModuleKind.CommonJSModule

CommonJSモジュールとしてエクスポートできます。

Export Scala.js as CommonJS module

import scala.scalajs.jsimport 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

Use CommonJS module in Scala.js

import scala.scalajs.jsimport js.annotation._

@js.native@JSImport("./hello-fastopt.js", "HelloWorld")class HelloWorld extends js.Object { def sayHello(name: String): String = js.native}

Scala.jsでCommonJSモジュールを使うこともできます。

Summary

まとめ

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のメリットを活かせます。

Enjoy type-safefrontend web development

with Scala.js!

Scala.jsはタイプセーフな"フロント"開発ではなくタイプセーフな"Web"開発におすすめです。

...and try Scala Warrior!https://github.com/scalawarrior/scalawarrior

Scala Warriorも是非試してみてください。