all imlementations using React all imlementations of Firebase

an es6 class implementation
of the Firebase demo using React 



import React from 'react'
import {subscribe, nudge} from '../../../nudger'

class Battle extends React.Component {
  constructor () {
    super()
    this.state = {
      loaded: false,
      status: {},
      teams: []
    }
    subscribe(val => {
      this.setState({
        loaded: true,
        teams: Object.keys(val).sort(),
        status: val
      })
    })
  }

  render () {
    const teamButtons = this.state.teams &&
      this.state.teams.map((team, i) =>
        <button key={`${team}${i}`} onClick={nudge.bind(null, team)}>
          {team} {this.state.status[team]}
        </button>
      )
    return (
      <div>{
        this.state.loaded
          ? teamButtons
          : 'Fetching data...'
        }
      </div>
    )
  }
}

export default Battle

The same file in a TypeScript implementation using Angular (2.4.9):

import {Component} from '@angular/core';

import {subscribe,nudge} from '../../../nudger.js'

@Component({
  selector: '#app',
  template: `
    <div *ngIf="loaded">
      <button *ngFor="let t of teams" (click)="nudge(t)">
        {{t}} ({{status[t]}})
      </button>
    </div>
    <div *ngIf="!loaded">
      Fetching data...
    </div>
  `
})
export class Battle {
  loaded = false
  status = {}
  teams = []
  nudge:Function = nudge
  constructor() {
    subscribe(val=>{
      this.status = val
      this.teams = Object.keys(this.status).sort()
      this.loaded = true
    })
  }
}

The same file in an es6 implementation using Cyclow (0.3.0):

import {Block} from 'cyclow'
import {Component} from 'graflow'
import {subscribe, nudge} from '../../../nudger'

const nudger = Component({
  inputs: ['init', 'nudge'],
  components: {
    nudger: Component(nudge),
    subscriber: Component((v, next) => subscribe(val => next(val)))
  },
  connections: [
    ['in.init', 'subscriber'],
    ['subscriber', 'out'],
    ['in.nudge', 'nudger']
  ]
})

const teamButtons = state => state.teams.map((team, i) => ({
  tag: 'button',
  on: { click: ['click', team] },
  content: `${team} ${state.status[team]}`
}))

const Battle = () => Block({
  components: {nudger},
  events: {
    init: () => [
      'nudger.init',
      state => ({
        loaded: false,
        status: {},
        teams: []
      })
    ],
    click: team => [['nudger.nudge', team]],
    nudger: val => state => ({
      loaded: true,
      teams: Object.keys(val).sort(),
      status: val
    })
  },
  view: state => ({content: state.loaded
    ? teamButtons(state)
    : 'Fetching data...'
  })
})

export default Battle