Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Ivan Yurchenko

May 25, 2016
Tweet

More Decks by Ivan Yurchenko

Other Decks in Programming

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