# What is this?

This app demonstrates how you can use Errai to stream HTML5 device orientation data from browsers to the server, aggregate that data, and broadcast it back out to the browsers, again using CDI events.

# How does it work?

## Client-to-server

Note: some of the boxes in the flowchart are hyperlinks to the associated source code.

1. The browser periodically generates deviceorientation events, which our detector class has registered to receive
2. Our DOM deviceorientation listener creates OrientationEvent and fires it as a CDI event.
3. Because there is an OrientationEvent observer method on the server, ErraiBus routes the event across the wire to the server
4. The server-side observer method adds this new client orientation data into an aggregated set of all client orientations.

## Server-to-client

Note: some of the boxes in the flowchart are hyperlinks to the associated source code.

1. A timer on the server periodically fires, initiating the process of firing the aggregated set of all known client orientations (AllClientOrientations) as a CDI event. (We also weed out clients who we haven't heard from in the past couple of seconds at this point).
2. The server-side ErraiBus routes this event to every connected client, because they all have CDI Observers for the AllClientOrientations event.
3. On the client, the client-side MessageBus delivers the AllClientOrientations event to the client-side code.
4. The client-side code updates the DOM with the new client orientations using a CSS3 perspective transform. (Each client is represented by a <div> element to which the transform is applied.)

# Why is this awesome?

There are lots of reasons, really:

- HTML5 deviceorientation events are one of the newest things you can do with a web browser, and we've demonstrated how simple it is to add support for something like this to your own Errai app. The tiny amount of glue code provides a bunch of benefits.
- CDI events are a great way to build a loosely coupled system: the component that generates the OrientationEvents has no idea who is listening to those events (or even if those listeners are on the client side or the server side!) Because of this, it's completely reusable. In fact, we're planning to extract this demo's set of OrientationEvent producers into an Errai module that you can reuse.
- Likewise, the observers of these events don't know how those events are produced. They just process the events when they arrive.
- GWT's deferred binding mechanism gives us a simple, reusable way to choose the correct producer of OrientationEvents for the browser we're in.