Frontend to Backend: Everything is on Scala using Play, Scala.js and ScalaCSS


In my previous post, I tried to create a pure front-end application using Scala.js and ScalaCSS. So that we can build our front-end also in a typesafe way. But there was no server interaction.

This time I have tried to make server interaction using play framework. Since this application is about Weather Information System, so I am  hitting a third party api to get weather information. I have taken help from play-with-scalajs-example to integrate scala.js with play.

Here is a sample of build.sbt:

lazy val server = (project in file("server")).settings(
    scalaVersion := scalaV,
    cpdSettings,
    scalaJSProjects := clients,
    pipelineStages := Seq(scalaJSProd, gzip),
    resolvers += "scalaz-bintray" at "https://dl.bintray.com/scalaz/releases",
     scalacOptions ++= Seq("-deprecation", "-Xlint","-feature"),
    libraryDependencies ++= Seq(
        "com.vmunier" %%% "play-scalajs-scripts" % "0.3.0",
        "org.scalaj" % "scalaj-http_2.11" % "2.3.0"
    )
).enablePlugins(PlayScala).
  aggregate(clients.map(projectToRef): _*).
  dependsOn(sharedJvm)


lazy val client = (project in file("client")).settings(
    scalaVersion := scalaV,
    cpdSettings,
    persistLauncher := true,
    persistLauncher in Test := false,
    scalacOptions ++= Seq("-deprecation", "-Xlint"),
     libraryDependencies ++= Seq(
        "org.scala-js" %%% "scalajs-dom" % "0.9.0",
        "be.doeraene" %%% "scalajs-jquery" % "0.9.0",
        "com.lihaoyi" %%% "scalatags" % "0.5.4",
        "com.github.japgolly.scalacss" %%% "ext-scalatags" % "0.4.0",
        "com.github.japgolly.scalacss" %%% "core" % "0.4.0"
    ),
    jsDependencies +=
      "org.webjars" % "jquery" % "2.1.4" / "2.1.4/jquery.js",

    jsDependencies += RuntimeDOM,

    // uTest settings
    libraryDependencies += "com.lihaoyi" %%% "utest" % "0.3.0" % "test",
    testFrameworks += new TestFramework("utest.runner.Framework")
).enablePlugins(ScalaJSPlugin, ScalaJSPlay).
  dependsOn(sharedJs)


lazy val shared = (crossProject.crossType(CrossType.Pure) in file("shared")).
  settings(scalaVersion := scalaV).
  jsConfigure(_ enablePlugins ScalaJSPlay)

Now I am interacting with server to hit Weather api to get information and send response to client to be rendered on screen.

I have used ScalaTags, which  is HTML construction library for Scala which converts Scala code into HTML page.  For the styling, I have used ScalaCSS, which is CSS construction library for Scala, which converts scala code into CSS

In this application, I have tried to create frontend  to backend: everything on SCALA.

You can find complete working  code here:- ScalaJs_Weather_Report.

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, Play 2.4.X, Scala, Web, web application and tagged , , , , , . Bookmark the permalink.

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

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

  2. A very interesting proof of concept!. Scala can be used for everywhere: the backend, scripts and now also the frontend.

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