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

Table of contents
Reading Time: 2 minutes

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.

Written by 

Ayush is the Sr. Lead Consultant @ Knoldus Software LLP. In his 10 years of experience he has become a developer with proven experience in architecting and developing web applications. Ayush has a Masters in Computer Application from U.P. Technical University, Ayush is a strong-willed and self-motivated professional who takes deep care in adhering to quality norms within projects. He is capable of managing challenging projects with remarkable deadline sensitivity without compromising code quality.