Typesafe Activator

Play Framework Akka Cluster Frontend with AngularJS and RequireJS

Play Framework Akka Cluster Frontend with AngularJS and RequireJS

muuki88
Source
May 5, 2015
playframework angularjs scala akka cluster requirejs

Small Frontend for an Akka Cluster to start jobs and see the cluster state

How to get "Play Framework Akka Cluster Frontend with AngularJS and RequireJS" on your computer

There are several ways to get this template.

Option 1: Choose play-akka-cluster-sample in the Typesafe Activator UI.

Already have Typesafe Activator (get it here)? Launch the UI then search for play-akka-cluster-sample in the list of templates.

Option 2: Download the play-akka-cluster-sample project as a zip archive

If you haven't installed Activator, you can get the code by downloading the template bundle for play-akka-cluster-sample.

  1. Download the Template Bundle for "Play Framework Akka Cluster Frontend with AngularJS and RequireJS"
  2. Extract the downloaded zip file to your system
  3. The bundle includes a small bootstrap script that can start Activator. To start Typesafe Activator's UI:

    In your File Explorer, navigate into the directory that the template was extracted to, right-click on the file named "activator.bat", then select "Open", and if prompted with a warning, click to continue:

    Or from a command line:

     C:\Users\typesafe\play-akka-cluster-sample> activator ui 
    This will start Typesafe Activator and open this template in your browser.

Option 3: Create a play-akka-cluster-sample project from the command line

If you have Typesafe Activator, use its command line mode to create a new project from this template. Type activator new PROJECTNAME play-akka-cluster-sample on the command line.

Option 4: View the template source

The creator of this template maintains it at https://github.com/muuki88/activator-play-cluster-sample#master.

Option 5: Preview the tutorial below

We've included the text of this template's tutorial below, but it may work better if you view it inside Activator on your computer. Activator tutorials are often designed to be interactive.

Preview the tutorial

Akka Cluster Play Frontend

This is a small akka cluster application with a play frontend to show

  • The current cluster state
  • Start jobs in the cluster
It is based on two other amazing activator templates. For the play part I used the "play angular require seed" by Marius Soutier and for the backend part I used parts of the "akka sample cluster in scala" template. Check these out if the docs on this one are sufficient enough.

The tutorial is strucuture in the following way

  • Getting Started
  • Application Architecture
  • Cluster State Frontend
  • Factorial Frontend

Getting Started

Open three terminals at the project root and run in each of them one line of the following commands:

sbt "project backend" "run 2551"
sbt "project backend" "run 2552"
sbt "project frontend" run
The first two lines boot the cluster seed nodes. The last one starts the frontend, which needs at least one seed node to be up and running to join the cluster.

Now go to localhost:9000 and enjoy the frontend. Every page is backed by a websocket, so you do not need to releoad any page, every!

If you want to fire up more cluster nodes, run this in a new terminal:

sbt "project backend" run

Application Architecture

The application is split up in three subprojects.

  • api: contains all messages which can be send by the frontend to the backend
  • frontend: playframework frontend. Depends on and aggregates the api project
  • backend: the akka cluster node. Implements actors which can handle the messages defined in api

Cluster State Frontend

At localhost:9000/#/dashboard you find a minimal dashboard, which shows the current nodes available in the cluster. Open a new terminal and run:

sbt "project backend" run
After a short time you will see a new backend node appearing. If you kill that console, the nodes state will change to unreachable and will then be removed.

This dashboard also includes some stats about the cluster, like memory consumption of each node. These information are more accurate if you put the native sigar library on your classpath, which is only available for the backend cluster.
Take a look at the akka-sample-cluster-scala activator to see how you can achieve this. The graph is rendered via d3js in a defined angularjs directive (in frontend/assets/js/dashboard/directives).

Behind the scenes there are two websockets which update the data. The MonitorActor is responsible for the cluster state changes and the MetricsActor for the cluster metric changes. You could put them in one actor aswell, which listens for all the events.

Factorial Frontend

This example demonstrates how to submit tasks to the cluster. At localhost:9000/#/services/factorial you can submit a factorial calculation n times to the cluster. On the right you see how many factorials are already computed and how long it took.

The backend implements the actual computation within the factorial.Service.scala. The WorkerActor does the job and the FactorialBackend is just for creating the backend actor, which is called by the frontend.

The instantiation of the worker actors is done by the frontend. The piece of configuration in the application.conf looks like this:


akka.actor.deployment {
  /factorialService/factorialWorkerRouter = {
    router = adaptive-group

    metrics-selector = mix
    nr-of-instances = 100
    routees.paths = ["/user/factorialBackend"]
    cluster {
      enabled = on
      use-role = backend
      allow-local-routees = off
    }
  }
}
        
The factorialService actor is register at startup time via the Global.scala.

Thanks

Special thanks to Martynas Mickevičius for giving advice on the implementation of this. Also special thanks to the other activator template, which is based this template on, for the great work and helpful explanations.
comments powered by Disqus