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!