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

More Decks by Ivan Yurchenko

Other Decks in Programming


  1. 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/
  2. 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
  3. 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).
  4. 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).
  5. 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).
  6. 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") } } }}
  7. 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
  8. 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 { ... }
  9. 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
  10. 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/
  11. 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/
  12. 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/