all imlementations using Elm all imlementations of Twoway

a react-elm-components implementation
of the Twoway demo using Elm 



import React from 'react'
import ReactDOM from 'react-dom'
import Elm from 'react-elm-components'

import { Phonebooth } from './phonebooth.elm'

ReactDOM.render(<Elm src={Phonebooth} />, document.getElementById('app'))

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

import 'zone.js'
import 'reflect-metadata'

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { Phonebooth } from './phonebooth';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ Phonebooth ],
    bootstrap:    [ Phonebooth ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

The same file in a component implementation using AngularJS (1.5.8):

import angular from 'angular'

angular.module('phoneboothapp', [])

require('./phonebooth')

The same file in an xstream implementation using CycleJS (12.2.2):

import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'

import makeFocusDriver from './extras'
import Phonebooth from './phonebooth'

run(Phonebooth, {
  DOM: makeDOMDriver('#app'),
  focus: makeFocusDriver('#app input')
})

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

import {run} from 'cyclow'
import Phonebooth from './phonebooth'

run(Phonebooth, {target: 'app'})

The same file in a createClass implementation using React (15.3.1):

import React from 'react'
import ReactDOM from 'react-dom'

import Phonebooth from './phonebooth'

ReactDOM.render(<Phonebooth />, document.getElementById('app'))

The same file in a vanilla implementation using Vue (1.0.26):

import Vue from 'vue'

import './phonebooth'

new Vue({ 
  template: '<phonebooth/>',
  replace: false,
  el: '#app'
})