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 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 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 vanilla implementation using Choo (4.1.0):

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 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'
})