#ichigayageek

1. Type-safe front-end
development with Scala
Naoki Takezoe
@takezoen
BizReach, Inc

2. Who am I?
● Scala Programmer at BizReach, Inc
● 4+ years Scala experience
● GitBucket developer / Scalatra committer

3. 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

4. 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

5. Type-safe frontend development
with Scala.js

6. Typesafe frontend stack in Scala
Scala
Scala.js
ScalaTags ScalaCSS
scalajs-react
Server-side
Front-end

7. Scala.js
Scala Compiler
ScalaJS Compiler
Scala Code
*.sjsir*.class
Translate Scala code
to JavaScript by
Scala compiler plugin
*.js
optimize / package

8. Scala.js is awesome!!

9. Scala.js is universal!
Play project (server-side)
Scala.js project (client-side)
Cross-build project (common)

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

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

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

13. ScalaCSS
● Type-safe CSS generation library
● Scala and Scala.js support
● 2 different mode
○ Standalone mode
○ Inline mode
● ScalaTags and scala-react integration

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

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

16. 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

17. JavaScript Framework Integration
● React
○ scalajs-recat
● AngularJS
○ scalajs-agular
○ angulate2

18. Great! Super Type-safe!!

19. But...

20. There is a big wall
● Generated JavaScript file size
● Cost for creating type mappings
● Existing front-end eco-system

21. 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?

22. The Approach
Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtman
https://www.youtube.com/watch?v=aqtoe0xDayM

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

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

25. Summary

26. 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

27. Enjoy type-safe
web development
with Scala!