Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Scala Warrior and type-safe front-end development with Scala.js

8,238 views

Published on

ScalaMatsuri 2017

Published in: Software
  • Be the first to comment

Scala Warrior and type-safe front-end development with Scala.js

  1. 1. Scala Warrior and type-safe front-end development with Scala.js Naoki Takezoe @takezoen BizReach, Inc Scala WarriorにおけるScala.jsとタイプセーフな フロントエンド開発
  2. 2. Who am I? ● Scala Programmer at BizReach, Inc ● 4+ years Scala experience ● GitBucket author / Scalatra committer 株式会社ビズリーチに勤務するScalaプログラマです。 本を書いたりGitBucketやScalatraなどを開発しています。
  3. 3. About Scala Warrior Scala Warriorについて
  4. 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. 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. 6. But they were not enough... しかしまだ十分普及したとは言えません。
  7. 7. What's missing? 何が足りないのでしょうか?
  8. 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. 9. It's a game! ゲームしか!!
  10. 10. Demo 実際の動作をご覧ください。
  11. 11. Team Takako Shimamoto Planning / Illustration Naoki Takezoe Programming Scala Warriorはこの2人で開発しました。
  12. 12. Server (Play2) Architecture of Scala Warrior Web Browser Scala Warriorの仕組みを説明します。
  13. 13. Server (Play2) Architecture of Scala Warrior Web Browser Scala 1. Send Scala code edited by user まず、ユーザが入力したScalaコードをサーバに送信
  14. 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. 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. 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. 17. JavaScript libraries Annimation is built on CreateJS Code editor is built on Ace アニメーションにはCreateJS、エディタにはAceを使用
  18. 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. 19. Great thanks for Li Haoyi's scala-js-fiddle! https://github.com/lihaoyi/scala-js-fiddle Li Haoyiさんのscala-js-fiddleを参考にさせていただきました。 ありがとうございます。
  20. 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. 21. Type-safe frontend development with Scala.js Scala.jsによるタイプセーフなフロント開発について
  22. 22. Typesafe front-end stack in Scala Scala Scala.js ScalaTags ScalaCSS scalajs-react Server-side Front-end
  23. 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. 24. Scala.js is awesome!! 他のソリューションと比べてメリットしかありません。
  25. 25. Scala.js is universal! Play project (server-side) Scala.js project (client-side) Cross-build project (common) Scalaとコードを共有することもできます。
  26. 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. 27. ScalaTags ● Type-safe XML/HTML generation library ● Scala and Scala.js support ScalaTagsはXMLやHTMLをScalaコードでタイプセーフに生 成するためのライブラリです。
  28. 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. 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. 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. 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. 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. 33. JavaScript Framework Integration ● React ○ scalajs-recat ● AngularJS ○ scalajs-agular ○ angulate2 メジャーなJavaScriptフレームワークをScala.jsで利用するた めのライブラリもあります。
  34. 34. Great! Super Type-safe! 超タイプセーフ!!
  35. 35. All goes well! これで全部うまくいく!!
  36. 36. ...Really? まじで??
  37. 37. Problems ● Generated JavaScript file size ● Cost for creating type mappings 問題もあります。
  38. 38. Problems ● Generated JavaScript file size ● Cost for creating type mappings ● Should front-end engineers write Scala? 一番の問題はそもそもフロントエンジニアがScalaを書くべきな のか?ということです。
  39. 39. The Approach Reference: Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtman https://www.youtube.com/watch?v=aqtoe0xDayM 1つのアプローチを紹介します。
  40. 40. The Approach Scala Scala.js (Interface for Frontend) User Interface (React or AngularJS?) Server-side Front-end
  41. 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. 42. Scala.js and JavaScript ecosystem 既存のJavaScriptのエコシステムとの連携について
  43. 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. 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. 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. 46. Summary まとめ
  47. 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. 48. Enjoy type-safe frontend web development with Scala.js! Scala.jsはタイプセーフな"フロント"開発ではなくタイプセーフ な"Web"開発におすすめです。
  49. 49. ...and try Scala Warrior! https://github.com/scalawarrior/scalawarrior Scala Warriorも是非試してみてください。

×