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.

Type-safe front-end development with Scala

3,654 views

Published on

#ichigayageek

Published in: Software
  • Be the first to comment

  • Be the first to like this

Type-safe front-end development with Scala

  1. 1. Type-safe front-end development with Scala Naoki Takezoe @takezoen BizReach, Inc
  2. 2. Who am I? ● Scala Programmer at BizReach, Inc ● 4+ years Scala experience ● GitBucket developer / Scalatra committer
  3. 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. 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. 5. Type-safe frontend development with Scala.js
  6. 6. Typesafe frontend stack in Scala Scala Scala.js ScalaTags ScalaCSS scalajs-react Server-side Front-end
  7. 7. Scala.js Scala Compiler ScalaJS Compiler Scala Code *.sjsir*.class Translate Scala code to JavaScript by Scala compiler plugin *.js optimize / package
  8. 8. Scala.js is awesome!!
  9. 9. Scala.js is universal! Play project (server-side) Scala.js project (client-side) Cross-build project (common)
  10. 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. 11. ScalaTags ● Type-safe XML/HTML generation library ● Scala and Scala.js support
  12. 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. 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. 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. 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. 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. 17. JavaScript Framework Integration ● React ○ scalajs-recat ● AngularJS ○ scalajs-agular ○ angulate2
  18. 18. Great! Super Type-safe!!
  19. 19. But...
  20. 20. There is a big wall ● Generated JavaScript file size ● Cost for creating type mappings ● Existing front-end eco-system
  21. 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. 22. The Approach Scala.js: Beyond the Coast-to-Coast Approach by Katrin Shechtman https://www.youtube.com/watch?v=aqtoe0xDayM
  23. 23. The Approach Scala Scala.js (Interface for Frontend) User Interface (React or AngularJS?) Server-side Front-end
  24. 24. The Approach Scala Scala.js (Interface for Frontend) User Interface (React or AngularJS?) Server-side Front-end JavaScript Programmer Scala Programmer
  25. 25. Summary
  26. 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. 27. Enjoy type-safe web development with Scala!

×