Angular-pond

ng-Pond

Use the Actyx Pond framework integrated as a service in your angular application. Expand your toolchain with the ActyxPondService to observe fish all over your application and speed up your UI projects and write distributed apps in a couple of hours.

TL;DR;

:package: Installation

ng-pond is available as a npm package.

npm install @actyx-contrib/ng-pond

:nerd_face: Quickstart

:ocean: ActyxPondService

Add the ActyxPondService to your root module as a singleton instance and keep the advantage of the pond’s internal caching.

:open_book: Example:

File: app.module.ts

import { AppComponent } from './app.component';
import { ActyxPondService } from '@actyx-contrib/ng-pond'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [ActyxPondService],
  bootstrap: [AppComponent]
})
export class AppModule {}

:fish: Use the pond API

Use the simple pond API in your components as with callbacks or with rxjs observables. This will give you the opportunity to use your fish states in the code or use async pipelines to build reactive and state-of-the-art user interfaces.

Note: It is highly recommended to build applications in separation of concerns (SoC). Using the PondService directly in the components makes it harder to maintain your project and write e2e and unit tests for your components.

:open_book: Example:

Logic:

File: app.component.ts

import { Component } from '@angular/core';
import { ActyxPondService } from '@actyx-contrib/ng-pond'
import { MachineFish, State } from '../fish/MachineFish';
import { Observable } from 'rxjs';
import { ConnectivityStatus } from '@actyx/pond';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  machine$: Observable<State>
  connectivity$: Observable<ConnectivityStatus>

  constructor(private pondService: ActyxPondService) {
    this.machine$ = this.pondService.observe$(MachineFish.of('Machine1'))
    this.connectivity$ = this.pondService.getNodeConnectivity$()
  }

  async start() {
    const pond = await this.pondService.getPond()
    MachineFish.emitProdStartedEvent(pond, 'Machine1', 'order1')
  }

  async stop() {
    const pond = await this.pondService.getPond()
    MachineFish.emitProdStoppedEvent(pond, 'Machine1', 'order1')
  }
}
Template:

File: app.component.html

<h1>Angular - Actyx-Pond - Machine control</h1>
<div *ngIf="connectivity$ | async as connectivity">
  <h2>Connectivity: {{connectivity.status | json}}</h2>
</div>
<div *ngIf="machine$ | async as machine; else loading">
  <div>
    <h2>Machine {{machine.machineId}}</h2>
    <dl>
      <dt>state:</dt>
      <dd>{{machine.state}}</dd>
    </dl>
  </div>
  <button *ngIf="machine.state==='stopped'" (click)="start()">start</button>
  <button *ngIf="machine.state==='started'" (click)="stop()">stop</button>
</div>
<ng-template #loading>Loading machine data...</ng-template>
:fish: Fish

File: MachineFish.ts

import { Fish, FishId, Pond, Tag } from '@actyx/pond'
export type State =
  | { state: 'idle', machineId: string }
  | { state: 'inProduction', machineId: string, orderId: string }
export type Event =
  | { eventType: 'prodStarted', machineId: string, orderId: string }
  | { eventType: 'prodStopped', machineId: string, orderId: string }

const machineTag = Tag<Event>('machine')

export const MachineFish = {
  tags: { machineTag },
  of: (machineId: string): Fish<State, Event> => ({
    fishId: FishId.of('machineFish', machineId, 0),
    initialState: { state: 'idle', machineId },
    where: machineTag.withId(machineId),
    onEvent: (state, event) => {
      switch (event.eventType) {
        case 'prodStarted':
          return {
            state: 'inProduction',
            machineId: state.machineId,
            orderId: event.orderId,
          }
        case 'prodStopped':
          return {
            state: 'idle',
            machineId: state.machineId,
          }
      }
      return state
    },
  }),
  emitProdStoppedEvent: (pond: Pond, machineId: string, orderId: string) =>
    pond.emit(
      machineTag.withId(machineId),
      { eventType: 'prodStopped', machineId, orderId }
    ),
  emitProdStartedEvent: (pond: Pond, machineId: string, orderId: string) =>
    pond.emit(
      machineTag.withId(machineId),
      { eventType: 'prodStarted', machineId, orderId }
    ),
}

Today I also like to announce that we integrated the @actyx-contrib/registry package into the ng-pond.

There are some performance improvements to reduce the amount of rerenders in your lists.

Run npm update @actyx-contrib/ng-pond and stay up to date. :slight_smile: