const choo = require('choo')
const clicker = require('./clicker')
const root = document.getElementById('app')
const app = choo({href: false, history: false, hash: false})
app.model(clicker.model)
app.router({root: root}, [document.location.pathname, clicker.view])
root.appendChild(app.start())
The same file in a JavaScript implementation using Angular (2.4.9):
import 'zone.js'
import 'reflect-metadata'
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import Clicker from './clicker'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
let appModule = NgModule({
imports: [ BrowserModule ],
declarations: [ Clicker ],
bootstrap: [ Clicker ]
}).Class({
constructor: function () {}
})
platformBrowserDynamic().bootstrapModule(appModule)
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 { Clicker } from './clicker';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ Clicker ],
bootstrap: [ Clicker ]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
The same file in a component w/ class implementation using AngularJS (1.6.1):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a component w/ ctrl implementation using AngularJS (1.5.8):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a component w/o ctrl implementation using AngularJS (1.5.8):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a controller implementation using AngularJS (1.5.8):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a controller as implementation using AngularJS (1.5.8):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a directive implementation using AngularJS (1.5.8):
import angular from 'angular'
angular.module('clickerapp', [])
require('./clicker')
The same file in a rxjs implementation using CycleJS (12.2.2):
import {run} from '@cycle/rxjs-run'
import {makeDOMDriver} from '@cycle/dom'
import Clicker from './clicker'
run(Clicker, {
DOM: makeDOMDriver('#app')
})
The same file in an xstream implementation using CycleJS (12.2.2):
import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'
import Clicker from './clicker'
run(Clicker, {
DOM: makeDOMDriver('#app')
})
The same file in an es6 implementation using Cyclow (0.2.0):
import {run} from 'cyclow'
import Clicker from './clicker'
run(Clicker, {target: 'app'})
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 {Clicker} from './clicker.elm'
ReactDOM.render(<Elm src={Clicker} />, 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 Clicker from './clicker'
ReactDOM.render(<Clicker />, document.getElementById('app'))
The same file in an es6 class implementation using React (15.3.1):
import React from 'react'
import ReactDOM from 'react-dom'
import Clicker from './clicker'
ReactDOM.render(<Clicker />, document.getElementById('app'))
The same file in a recompose implementation using React (15.3.1):
import React from 'react'
import ReactDOM from 'react-dom'
import Clicker from './clicker'
ReactDOM.render(<Clicker />, document.getElementById('app'))
The same file in a vanilla implementation using Vue (1.0.26):
import Vue from 'vue'
import './clicker'
new Vue({
template: '<clicker/>',
replace: false,
el: '#app'
})