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.

Advertisements

About Ayush Mishra

Ayush is the Sr. Software Consultant @ Knoldus Software LLP. In his 5 years of experience he has become 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. .
This entry was posted in AJAX, JavaScript, jQuery, Scala, Web, web application and tagged , , , , . Bookmark the permalink.

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

  1. Pingback: A Pure Scala Front-End application using Scala.js and ScalaCSS – malti yadav

  2. AIMMOTH says:

    Awesome!

  3. Pingback: Frontend to Backend: Everything is on Scala using Play, Scala.js and ScalaCSS | Knoldus

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s