• Angular and Ionic for the JS frontend (with a shared business/data architecture based on Ngrx),
• Groovy and Grails ecosystem for the JVM backend.

What are the best choices to build real-time Angular client apps, connected to a JVM-based backend these days?

1. build a reactive app with an event bus on the JVM, and
2. extend the event bus down to the browser to be able to publish/subscribe to real-time events from an Angular app.

Server side (JVM)

• Vert.x,
• Lightbend platform (Play, Akka, Scala),
• Spring Project Reactor (integrated into Grails 3.0).

Client side

• Vertx-web provides a SockJS server implementation with an event bus bridge and a vertx-evenbus.js client library (very easy to use),
• Spring provides websocket SockJS support though Spring Messaging and Websocket libs (see an example here)

Final choice: Vert.x + Angular

• share and synchronize a common (Ngrx-based) state between multiple connected clients, and
• distribute real-time (Ngrx-based) actions across multiple connected clients, which impact local states/reducers.

• Vert.x server app, based on Vert.x (version 3.3), managed by Gradle, with a main verticle developed in Groovy lang.
• Angular client app, based on Angular (version 4.0.1), managed by Angular CLI with state, reducers and actions logic based on @ngrx/store (version 2.2.1)

• CounterState interface, counter state model,
• counterReducer reducer, counter state management based on dispatched actions, and
• Increment, decrement and reset counter actions.

class CounterService { static INCREMENT = '[Counter] Increment' static DECREMENT = '[Counter] Decrement' static RESET = '[Counter] Reset' int total = 0 void handleEvent(event) { switch(event.type) { case INCREMENT: total++ break case DECREMENT: total-- break case RESET: total = 0 break } } }

Client state initialization through Request/Response

initializeCounter() { this.eventBusService.send('counter::total', body, (error, message) => { // Handle reply if (message && message.body) { let localAction = new CounterActions.ResetAction(); localAction.payload = message.body; // Total value this.store.dispatch(localAction); } }); }

Actions distribution through Publish/Subscribe

publishAction(action: RemoteAction) { if (action.publishedByUser) { console.error("This action has already been published"); return; } action.publishedByUser = this.currentUser; this.eventBusService.publish(action.eventBusAddress, action); } subscribeToActions(eventBusAddress: string) { this.eventBusService.registerHandler(eventBusAddress, (error, message) => { // Handle message from subscription if (message.body.publishedByUser === this.currentUser) { // Ignore action sent by current manager return; } let localAction = message.body; this.store.dispatch(localAction); }); }

@Injectable() export class AppEventBusEffects { constructor(private actions$: Actions, private appEventBusService: AppEventBusService) {} // Listen to all actions and publish remote actions to account event bus @Effect({dispatch: false}) remoteAction$ = this.actions$ .filter(action => action instanceof RemoteAction && action.publishedByUser == undefined) .do((action: RemoteAction) => { this.appEventBusService.publishAction(action); }); @Effect({dispatch: false}) login$ = this.actions$ .ofType(UserActionTypes.LOGIN) .do(() => { this.appEventBusService.connect(); }); }