Downloaded 11 times
Type-safe front-end development with Scala
- 1. Type-safe front-end development withScala 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 ● Agame 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 ScalaWarrior 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.
- 6. Typesafe frontend stackin Scala Scala Scala.js ScalaTags ScalaCSS scalajs-react Server-side Front-end
- 7. Scala.js Scala Compiler ScalaJS Compiler ScalaCode *.sjsir*.class Translate Scala code to JavaScript by Scala compiler plugin *.js optimize / package
- 8.
- 9. Scala.js is universal! Playproject (server-side) Scala.js project (client-side) Cross-build project (common)
- 10. Interoperability ● Need typemapping 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/HTMLgeneration 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 CSSgeneration library ● Scala and Scala.js support ● 2 different mode ○ Standalone mode ○ Inline mode ● ScalaTags and scala-react integration
- 14. ScalaCSS (Standalone mode) importscalacss.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) importscalacss.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) importscalacss.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.
- 19.
- 20. There is abig wall ● Generated JavaScript file size ● Cost for creating type mappings ● Existing front-end eco-system
- 21. There is abig 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: Beyondthe Coast-to-Coast Approach by Katrin Shechtman https://www.youtube.com/watch?v=aqtoe0xDayM
- 23. The Approach Scala Scala.js (Interface forFrontend) User Interface (React or AngularJS?) Server-side Front-end
- 24. The Approach Scala Scala.js (Interface forFrontend) User Interface (React or AngularJS?) Server-side Front-end JavaScript Programmer Scala Programmer
- 25.
- 26. Why Scala infrontend? ● 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.