deck-reactive-apps

Reactive Apps

with Akka and AngularJS

Heiko Seeberger, codecentric

Reactive Traits

Let's go Reactive

with Akka and AngularJS

Reactive Flows

Reactive Flows – Architecture

Reactive Flows – Actors

Reactive Flows – FlowFacade Messages

case object GetFlows
case class FlowDescriptor(name: String, label: String)

case class AddFlow(label: String)
case class FlowAdded(flowDescriptor: FlowDescriptor)
case class FlowExists(label: String)

case class RemoveFlow(name: String)
case class FlowRemoved(name: String)
case class FlowUnknown(name: String)

case class GetMessages(flowName: String)
case class AddMessage(flowName: String, text: String)

Reactive Flows – Flow Messages

case object GetMessages
case class Message(text: String, time: LocalDateTime)

case class AddMessage(text: String)
case class MessageAdded(flowName: String, message: Message)

AngularJS

AngularJS – Templates

<div ng-repeat="msg in messages | orderBy:'date':true">
    <div>
        <div class="date-time">{{msg.date}}</div>
        <div class="text">{{msg.text}}</div>
    </div>
</div>

AngularJS – Controllers

reactiveFlowsControllers.controller('HomeCtrl', ['$scope', function($scope) {

    $scope.flows = [
        {name: 'akka', label: 'Akka'},
        {name: 'angularjs', label: 'AngularJS'}
    ];

    $scope.messages = [
        {text: 'Akka rocks!', dateTime: '2015-04-14 19:20:21'}
    ];
}

AngularJS – Demo

Akka HTTP – Server Binding

Http(context.system)
    .bindAndHandle(route(self), interface, port)
    .pipeTo(self)

Akka HTTP – Routing

def route(httpService: ActorRef)(implicit ec: ExecutionContext) = {
  import Directives._

  def assets = getFromResourceDirectory("web") ~ path("")(getFromResource("web/index.html"))

  def shutdown = path("") {
    delete {
      complete {
        httpService ! Shutdown
        "Shutting down now ..."
      }
    }
  }

  assets ~ shutdown
}

Akka HTTP – Demo

Server-Sent Events

Server-Sent Events – Browser Support

Server-Sent Events – Communication

Server-Sent Events – Client

// SSE for messages
var messageSource = new EventSource('/message-events');
messageSource.addEventListener(
    'added',
    function(event) {
        $scope.$apply(function() {
            var messageAdded = JSON.parse(event.data);
            if ($scope.currentFlowName == messageAdded.flowName)
                $scope.messages.push(messageAdded.message);
        });
    },
    false
);

Server-Sent Events – Server

def messageEvents = path("message-events") {
  implicit val timeout = httpServiceTimeout
  get {
    complete {
      (httpService ? CreateMessageEventSource)
        .mapTo[Source[ServerSentEvent, Any]]
    }
  }
}

Server-Sent Events – Demo

Akka Distributed Data

• Consistency of replicas without central coordination?
• Certain data structures allow for eventual consistency
  • Conflict-Free Replicated Data Types (CRDTs)
  • State-based (CvRDTs) or operation-based (CmRDTs)
• Akka Distributed Data offers various CvRDTs
  • Counter, Set, Map, etc.

Akka Distributed Data – Communication

Akka Distributed Data – Demo

Akka Cluster Sharding

• Partitioning of identifiable actors across a cluster
• Management of subsets – shards
• Dynamically adapt to cluster topology

Akka Cluster Sharding – Communication

Akka Cluster Sharding – Demo

Akka Persistence

• How can actor state be persisted and recovered?
• Event Sourcing:
• Create event for valid command
• Let journal persist event
• Apply event after successful persistence
• On recovery only events are replayed

Akka Persistence – Demo

Thank you!

• Code on GitHub: hseeberger/reactive-flows
• Follow me on Twitter: @hseeberger

This work is licensed under a Creative Commons Attribution 4.0 International License and powered by reveal.js under its LICENSE.