Type-safe front-end development with Scala
Naoki Takezoe@takezoen
BizReach, Inc
Who am I?
● Scala Programmer at BizReach, Inc● 4+ years Scala experience● GitBucket developer / Scalatra committer
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
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
Type-safe frontend developmentwith Scala.js
Typesafe frontend 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
Scala.js is awesome!!
Scala.js is universal!
Play project (server-side)
Scala.js project (client-side)
Cross-build project (common)
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")
ScalaTags
● Type-safe XML/HTML generation library● Scala and Scala.js support
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 (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)
)
}
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
JavaScript Framework Integration
● React○ scalajs-recat
● AngularJS○ scalajs-agular○ angulate2
Great! Super Type-safe!!
But...
There is a big wall
● Generated JavaScript file size● Cost for creating type mappings● Existing front-end eco-system
There is a big wall
● Generated JavaScript file size● Cost for creating type mappings● Existing front-end eco-system● Should front-end engineer write Scala?
The Approach
Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtmanhttps://www.youtube.com/watch?v=aqtoe0xDayM
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
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
Enjoy type-safe web development
with Scala!