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

Selection_002.png

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

Selection_003.png

I took the help from ScalaCSS inline example.

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

Selection_004.png

You can see the difference  below without and with ScalaTags

Selection_0041.png

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.

5 thoughts on “A Pure Scala Front-End application using Scala.js and ScalaCSS

Leave a Reply

%d bloggers like this: