Reactive Apps with Akka and AngularJS

Heiko Seeberger GeeCON 2015, Kraków

The Reactive Traits

How to go Reactive with Akka and AngularJS?

Akka

• Actors for Java/Scala

• Reactive all through

• Open Source under Apache License

“Akka is a toolkit and runtime for building highly concurrent, distributed, and resilient

message-driven applicationson the JVM.”

http://akka.io

AngularJS

• HTML/Javascript framework

• Browser-based single-page apps

• Open Source under MIT License

“HTML enhanced for web apps!”

https://angularjs.org

Demo – Reactive Flows

Demo – Reactive Flows

AngularJS

Akka HTTP Akka HTTP

Akka Data Replication

Akka Cluster Sharding

Akka Persistence

SSEREST

Demo – Reactive Flows

AngularJS Basics – 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 Basics – Controller

m.controller('HomeCtrl', ['$scope', function ($scope) { $scope.messages = [{ text: 'Text1', dateTime: '2015-04-14 19:20:21' }]; }]);

Demo – AngularJS Basics

Akka HTTP Basics

class HttpService extends Actor ... {

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

... }

Akka HTTP Basics

def route(httpService: ActorRef)(...) = { def assets = getFromResourceDirectory("web") def shutdown = path("") { delete { complete { httpService ! Shutdown "Shutting down now ..." } } } assets ~ shutdown }

Demo – Akka HTTP Basics

Server-Sent Events

Server-Sent Events

en.wikipedia.org/wiki/Server-sent_events

Server-Sent Events

event:addeddata:somedata:message

ServerBrowser

text/event-stream

text/event-stream

GET /messages

Server-Sent Events – Client

var messageSource = new EventSource('/message-events'); messageSource.addEventListener( 'added', function (event) { // TODO Handle event! }, false );

Server-Sent Events – Server

path("message-events") { implicit val timeout = httpServiceTimeout get { complete { (httpService ? CreateMessageEventSource) .mapTo[ServerSentEventSource] } }}

Demo – Server-Sent Events

Conflict-Free Replicated Data Types (CRDTs)

- Consistency of replicas without central coordination?

- Certain data structures allow for eventual consistency

- State-based (CvRDTs)

- Operation-based (CmRDTs)

- Akka Data Replication offers various CvRDTs:

- Counter, Set, Map, etc.

Akka Data Replication

Replicator Replicator

Update

Gossip

Get

Demo – Akka Data Replication

Actor Sharding

- Partitioning of a (large) number of actors across a cluster

- Actors must have addressable via an identifier

- Management of subsets (shards)

- Dynamically adapt to cluster topology

Akka Cluster Sharding

ShardRegion ShardRegion

A B C

Demo – Akka Cluster Sharding

Akka Persistence

- How can we persist actor state?

- Event Sourcing:

- If received command is valid, create an event,

- let it be persisted by the Journal and

- after successful persistence, apply it to the actor state

- On recovery, events are replayed

Demo – Akka Persistence

Thanks!Follow me: @hseeberger

Code: github.com/hseeberger/reactive-flows

©Typesafe 2014 – All Rights Reserved