ScalaJS, WebAssembly & the Future of web development
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.
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!
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();
Scala.js single-page-application (SPA) tutorial using Play Framework and ReactJS -- i’m super excited about this one!
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
http://www.scala-js.org/doc/project/building.html
