Scala.js

1 .Why you might like Scala.js Li Haoyi, Scaladays 17-March-2015 

2 .0 Who Am I? ● Li Haoyi ● Work at Dropbox ○ Fixing legacy Python/Coffeescript ○ Writing legacy Python/Coffeescript ● Do a lot of free-time Scala work ● Early tester/contributor for Scala.js 

3 .1 What is Scala.js ● "Scala.js is a compiler that converts Scala code into the equivalent, executable Javascript” ● Write Scala, not Javascript ● Compiler handles the rest 

4 .1 What is Scala.js Example.scala Project-fastopt.js Thing.scala 500-3000kb Main.scala rer Example.sjsir n de Thing.sjsir Re Scala.js Main.sjsir Scalac Plugin Main$.sjsir Optimizer G CC Example.class Thing.class Main.class Main$.class Project-opt.js 100-1000kb 

5 .Live Demo 

6 .2 Notes from the Demo ● It works seamlessly! ● Really nice IDE experience ● Compiled executable is reasonable 

7 .3 Why should I care? ● Depends on who “I” am… ● Who am I? 

8 .3 Why should I care? ● Depends on who “I” am… ● Who am I? 

9 .4 “I” am a... ● Scala dev, who works on web apps ● Scala dev, who’s never touched a web app ● Compiler writer, who likes doing fancy optimizations ● Going to ignore: Javascript Developer, CTO, Professor, Newbie Programmer... 

10 .4 “I” am a... ● Scala dev, who works on web apps ● Scala dev, who’s never touched a web app ● Compiler writer, who likes doing fancy optimizations 

11 .5.1 I am a Scala developer ● I sometimes work on Web Applications ○ Making the world more open and connected ○ Help people watch events unfold, in real time. ○ Cataloguing the world’s knowledge ● Why should I care about Scala.js? 

12 .5.2 What is a web application? ● Client-server model ● Usually written in two (or more) languages ○ Scala on the server? ● Complicated! 

13 .5.3 What is a web application? Browser Server Database Browser Server 

14 .5.4 What’s wrong with Web Apps? ● No code re-use! ○ Find two sets of libraries to do the same thing ○ Learn two languages ○ Write your algorithms twice ● Alternative: pepper awkward/slow RPCs everywhere ○ Also known as “API first” design 

15 .5.5 What’s wrong with Web Apps? ● Everything String/Map[String, String] ○ URLs ○ Ajax arguments/return-value ● Compiler cannot help you! ○ document.getElementByld("my-id") ○ document.getElementByClassName("my-cls") ○ throw new Exception() 

16 .5.6 What’s wrong with Web Apps? ● Javascript! javascript> ["10", "10", "10", "10"].map(parseInt) [10, NaN, 2, 3] // WTF ● Yes this is well defined/documented ● No that does not excuse its stupidity 

17 .5.7 What is a web application? Browser Server Database Browser Server 

18 .5.7 What is a web application? Browser Server E R R e ? G E t y y b y N G f e a te t Database A A N S a M af D D S Browser Server 

19 .5.8 Scala.js lets you... ● Write the web application in one language ○ That’s not Javascript ● Swap String-typing for Strong-typing ○ In the Browser just as on the Server ○ And in between! 

20 .5.9 Scala.js: Not Javascript! ● Scala.js -> Scala(is not)Javascript javascript> ["10", "10", "10", "10"].map(parseInt) [10, NaN, 2, 3] // WTF scala.js> List("10", "10", "10", "10").map(parseInt) List(10, 10, 10, 10) // Yay! 

21 .5.10 Scala.js: Type Safety! javascript> document.getElementByld("Foo") 

22 .5.10 Scala.js: Type Safety! javascript> document.getElementByld("Foo") undefined is not a function // Gee, thanks 

23 .5.10 Scala.js: Type Safety! javascript> document.getElementByld("Foo") undefined is not a function // Gee, thanks scala.js> document.getElementByld("Foo") value getElementByld is not a member of Document Compilation failed 

24 .5.10 Scala.js: Type Safety! javascript> document.getElementByld("Foo") undefined is not a function // Gee, thanks scala.js> document.getElementBylId("Foo") value getElementByld is not a member of Document Compilation failed 

25 .5.11 Scala.js: Reduce boilerplate // Javascript $j.ajax("/api/list", { data: inputBox.value, onComplete: function(res){ ... } }) 

26 .5.11 Scala.js: Reduce boilerplate // Coffeescript $j.ajax "/api/list", data: inputBox.value onComplete: (res) => ... 

27 .5.11 Scala.js: Reduce boilerplate // Coffeescript $j.ajax "/api/list", data: inputBox.value onComplete:(res) => ... // Scala.js val res = Ajax[Api].list(inputBox.value).call() 

28 .5.12 Scala.js: Type Everything! val res: Future[Seq[String]] = Ajax[Api].list(inputBox.value).call() 

29 .5.12 Scala.js: Type Everything! val res: Future[Seq[String]] = Ajax[Api].lsit(inputBox.value).call() value lsit is not a member of Api Compilation failed