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
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/
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
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).
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).
6. Bring Scala to the frontend world + = scala-js.org
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).
8. How it works
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") } } }}
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
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 { ... }
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
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/
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/
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/
16. Thank you! questions?