Scala.js - Frontend in the eyes of a backend developer

A talk about Scala.js given on a Frontend Finland meetup in Solita Oy in Helsinki on 25.05.2016.

Transcript

1. Scala.js
   Frontend in the eyes of a backend developer
   Ivan Yurchenko
   

   View Slide

2. About me
   Backend developer.
   3+ years working with Scala.
   Work at Zalando in Helsinki (https://tech.zalando.de/).
   Contact:
   @ivan0yu at Twitter | https://ivanyu.me/
   

   View Slide

3. General purpose language.
   Runs on JVM (and JS).
   Multi-paradigm: object-oriented + functional.
   Mature (first release in 2004).
   Widely adopted now (Twitter, Apple, Foursquare, Coursera, LinkedIn, Meetup.com,
   Airbnb, Zalando, SoundCloud, Morgan Stanley, Sberbank, Tinkoff Bank, Raiffeisen
   bank, QIWI, etc.)
   Lightbend and Scala Center (EPFL).
   Scala
   scala-lang.org
   

   View Slide

4. What is great about Scala
   Strong and powerful type system (safer applications) + type inference.
   Powerful syntax + macroses - less code a DSLs.
   Concurrent programming - futures, actors, etc.
   Functional programming (not mandatory).
   Good standard library + all the JVM world via interop.
   Easy programming with immutable values (including collections).
   

   View Slide

5. What can make you sad
   With great power comes great responsibility!
   Too easy to write complex code.
   Slow compilation
   Will be fixed in the next major release (see dotty).
   

   View Slide

6. Bring Scala to the frontend world
   + =
   scala-js.org
   

   View Slide

7. How it works
   Translates your Scala code into JavaScript.
   You can use most of Scala and Java standard libraries.
   Plus specially prepared Scala libraries (rebuilt with Scala.js).
   Plus JavaScript interop (including type-safe facades).
   Google Closure compiler for optimization/minification.
   150-400 Kb of constant overhead (but remember that you won’t need some additional
   JS libraries you normally use, e.g. lodash, immutable.js).
   

   View Slide

8. How it works
   

   View Slide

9. Example
   object WeatherApp extends JSApp {
   @JSExport
   override def main(): Unit = {
   jQuery(dom.document).ready {
   val query = "select item.condition from weather.forecast where woeid = 565346 and u='c'"
   val url = s"https://query.yahooapis.com/v1/public/yql?q=${js.URIUtils.encodeURIComponent(query)}&format=json"
   Ajax.get(url).onComplete {
   case Success(result) =>
   val json = upickle.json.read(result.responseText)
   val temp = json("query")("results")("channel")("item")("condition")("temp").str
   val tempDiv = div(cls := "panel panel-default")(
   div(cls := "panel-body")(
   s"Temperature in Helsinki: $temp °C"
   )
   )
   jQuery("div.container").append(tempDiv.render)
   case Failure(failure) =>
   System.err.println(s"Error: $failure")
   }
   }
   }}
   

   View Slide

10. Interoperability with JavaScript
    Primitive types (java.lang.String ↔ string, scala.Double ↔ number).
    Arrays: mutable.Seq[T] ↔ js.Array.
    Dictionaries/maps: mutable.Map[String, T] ↔ js.Dictionary.
    js.Any, js.Object, js.Date, js.RegExp, js.Function
    js.Dynamic
    

    View Slide

11. Interoperability with JavaScript
    @js.native
    trait Window extends js.Object {
    val document: HTMLDocument = js.native
    var location: String = js.native
    def innerWidth: Int = js.native
    def innerHeight: Int = js.native
    def alert(message: String): Unit = js.native
    def open(url: String, target: String,
    features: String = ""): Window =
    js.native
    def close(): Unit = js.native
    }
    @JSExport
    class Foo(val x: Int) {
    override def toString(): String = s"Foo($x)"
    }
    @JSExportNamed
    def foo(x: Int, y: Int = 2, z: Int = 3) = ???
    @JSExport("myapp.foo.MainObject")
    object HelloWorld {
    ...
    }
    

    View Slide

12. Demo time!
    Conway's Game of Life in Scala.js and Scala.rx
    Live: https://ivanyu.github.io/life-scalajs/
    Code: https://github.com/ivanyu/life-scalajs
    

    View Slide

13. Ecosystem - libraries
    https://www.scala-js.org/libraries/
    scala-js-dom
    scalajs-jquery
    scalajs-react
    scalajs-angular
    scalajs-ace
    scala-js-d3
    scala-js-webrtc
    scalatags
    scala.rx (don’t mix up with RxScala)
    autowire
    http://www.webjars.org/
    

    View Slide

14. Ecosystem - tooling
    Code maps (sbt-scala-js-map)
    workbench (embedded web server & smart browser reloading)
    scalajs-benchmark
    https://github.com/sbt/sbt-web#available-plugins
    IDEs: IntelliJ Idea, Eclipse
    Fiddle: http://www.scala-js-fiddle.com/
    

    View Slide

15. Where to continue
    Official site: https://www.scala-js.org/
    Tutorials: https://www.scala-js.org/tutorial/
    A book: http://www.lihaoyi.com/hands-on-scala-js/
    TodoMVC: http://todomvc.com/examples/scalajs-react/
    Lots of presentations & success stories: https://www.scala-js.org/community/
    

    View Slide

16. Thank you!
    questions?
    

    View Slide