import {run} from 'cyclow'
import Phonebooth from './phonebooth'
run(Phonebooth, {target: '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 a react-elm-components implementation using Elm (0.17.1):
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 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'
})