#scalajs

Frontend to Backend: Everything is on Scala using Play, Scala.js and ScalaCSS

In my previous post, I tried to create a pure front-end application using Scala.js and ScalaCSS. So that we can build our front-end also in a typesafe way. But there was no server interaction.

This time I have tried to make server interaction using play framework. Since this application is about Weather Information System, so I am  hitting a third party api to get weather information. I have…

I'm no ScalaJS or WebAssembly expert and don't claim to be at the fore-front of what's happening in the browser development community, but I've vowed to learn something new each day and talk about it. Today, I dove into ScalaJS, which is a library to allow developers to write Scala code that produces JS code. It was very interesting going through the basic demo, which took me ~1.5 hours to read, code and debug. 

Key learnings were:

It’s great to write code in Scala -- beware of the transpiled output

Scala wrappers to interact with existing JS libraries jQuery might become painful overtime

If we can get into the habit of writing code in Scala, Java, Ruby, etc, etc now that may make the transition to WebAssembly easier whenever that happens!

Here are my notes:

ScalaJS Basic Tutorial (started at 11:12pm and ended at 12:38am)

Code has actually been executed by the Rhino JavaScript interpreter. Rhino is slow, so we set the JS stage to use NodeJS which is fast using FastOptStage

To get source maps install: npm install source-map-support

run fastOptJS to create a single js file from scala code (104KB...yuck)

Use scalajs-dom library to access to the DOM, which uses the %%% operator indicating that a scalajs library is being used

org.scalajs.dom object refers to the window object and dom.document refers to the document object

interesting API methods: document.createElement, document.createTextNode, node.appendChild

Felt like I was already starting to build components and their behavior in Scala =O much wow!

@JSExport makes a method callable from Javascript

Ugh, but you have to depend on scalajs-jquery -- yuck, now we have to wait for these libraries to be made and kept up-to-date/bug-free in addition

additionally we have to include jquery's js file which means that our app now has js libraries and their scala counterparts coupled tightly -- feels like a dependency nightmare.

although the js files can be bundled by setting skip in packageJSDependencies false

feels like Browserify, which produces a bundled js file

Runtime DOM is not available by default. Adding the RuntimeDOM uses PhantomJS behind the scenes to enable access to DOM.

the phantomjs CLI has to be on your PATH for this to work

Without compression the size is huge! (1.4MB)

Run Google's Closure compiler using fullOptJS (after compilation this was down to 17KB!!!!)

Gives you a launcher scripts so you don't have to manually create and start your JSApp like so:

tutorial.webapp.TutorialApp().main();

NEXT STEPS: 

Scala.js single-page-application (SPA) tutorial using Play Framework and ReactJS -- i’m super excited about this one!

REFERENCES:

http://www.scala-js.org/doc/interoperability/export-to-javascript.html

http://www.scala-js.org/doc/project/dependencies.html

http://www.scala-js.org/doc/project/cross-build.html