Scala.js workshop at flatMap(Oslo) 2017
git clone https://github.com/oyvindberg/scalajs-workshop.git cd scalajs-workshop ./sbt dev
Application served at http://localhost:8080 Look at Suggestions at the bottom
These are all examples of good micro-libraries that are cross-compiled for Scala.js
The Scala.js compiler has two modes:
Usage is just running either of those commands:
sbt> fastOptJS sbt> fullOptJS
Since the project both has client and server code, we use two sbt plugins to automatically reload browser and restart server when necessary.
For the backend we use sbt-revolver. Usage is very simple:
# start server sbt> tutorialJVM/re-start # restart server sbt> tutorialJVM/re-start # stop server sbt> tutorialJVM/re-stop # status sbt> re-status # continuously restart server on changed code sbt> ~tutorialJVM/restart # alias sbt> devBack
For the frontend we use workbench. This works by redirecting messages from sbt to the browser so you can see the project (not) compile, and automatically have the browser window reloaded on successful compilation.
Usage is again very simple:
sbt> ~;tutorialJS/fastOptJS;tutorialJS/refreshBrowsers # alias sbt> devFront
If you make changes both on client and server side, this snippet should do it:
sbt> ~;tutorialJVM/re-start;tutorialJS/fastOptJS;tutorialJS/refreshBrowsers # alias sbt> dev
Note that there is no synchronization between the two restarts, so it's possible that the client will reload just as the server is restarting. In that case, simply reload the browser.
Test code is transpiled and then executed on Node.js, which you need to install on your system if you want to run tests.
Additionally, it is recommended to install
source-map-support for a fake DOM and source map-support.
yarn install /
npm install in this folder.
The workshop is very much open ended, these are some suggestions for things that could be fun to play with:
Try to break it! The compiler generally has your back, and a lot of the pain points from traditional web development are gone, though some remain. By refactoring the application you can get a feeling for what is still brittle
Extend the application to show metadata. Last changed? file size? Right now it's pretty bare bones
Add support for showing content of files. Such basic functionality missing!. Can you make it happen?
Add support for several file browsers in tabs on the same page. Bootstrap has tabs, and the file browser just needs a DOM element to render to)
Add support for remembering state. The Local Storage API is defined in
dom.localStorage. You probably want to use uPickle for serialization
Breadcrumbs for the parent folders instead of the back button.
- Scala.js Gitter room Probably the best place for support
www.scala-js.org/ Tutorial, community, list of libraries, etc
Basic tutorial Tutorial on which this workshop was partly based
Hands-on Scala.js Comprehensive introductory material
TodoMVC example Frontend-only todo application with Scalajs-React