A Pure Scala Front-End application using Scala.js and ScalaCSS

In my previous posts, I created an application ‘Weather Report‘, based on Scala.js and explained how to write test-case in Scala.js using same application.  Earlier I was creating html page using Scala.Js Jquery library.  But code was not very clean and well structured.

I started exploring ScalaTags and ScalaCSS to make application more interactive and clean using Scala.js.

ScalaTags is HTML construction library for Scala which converts Scala code into HTML page.  It is type-safe, so typos like dvi or inpt can be caught at compile time.

In the same way, ScalaCSS is CSS construction library for Scala, which converts scala code into CSS. It is also type-safe. You can create  standalone CSS like SCSS/LESS, or inline styles.

First you have to add dependencies in build.sbt

Now you can create you CSS in scala like this:-

I took the help from ScalaCSS inline example.

Now you can start writing your html page in Scala using ScalaTags:

You can see the difference  below without and with ScalaTags

We can create HTML page in type-safe way using ScalaTags.

You can find complete working and tested code here:- ScalaJs_Weather_Report.