View
2.123
Download
2
Category
Preview:
Citation preview
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も是非試してみてください。
Recommended