Simple counter app implementations

0-Code verbosity vs expressiveness

1-mithril.js

m.mount(document.body, {
    count : 0,
    view : (vnode) => m("div",
        m("div", "Count: ", vnode.state.count),
        m("button", { onclick : () => vnode.state.count++ }, "+"),
        m("button", { onclick : () => vnode.state.count-- }, "-")
    )
})

1-vue.js

new Vue({
  data: { count: 0 },
  render (h) {
    return h('p', [
      this.count,
      h('button', { on: { click: () => { this.count++ }}}, '+'),
      h('button', { on: { click: () => { this.count-- }}}, '-')
    ])
  }
}).$mount('#app')

1b-calmm.elm

import Dom exposing (..)
import Lens exposing (Lens)

counter : Lens m Int -> Html m
counter value =
  div []
    [ button [onClick (Lens.modify value ((+) -1))] [text "-"]
    , textAs toString value
    , button [onClick (Lens.modify value ((+)  1))] [text "+"]
]

1c-clojurescript.cljs

(def state (atom 0))

(rum/defc view < rum/reactive [state]
  [:div
    [:button {:on-click #(swap! state dec)} "-"]
    [:span (rum/react state)]
    [:button {:on-click #(swap! state inc)} "+"]])

(run/mount (view state)
                    (js/document.getElementById "app"))

2-calmm.js

import * as R from "ramda"
import * as U from "karet.util"
import React from "karet"
import ReactDOM from "react-dom"

const Counter = ({value}) =>
  <div>
    <div>Count: {value}</div>
    <button onClick={() => value.modify(R.add(+1))}>+</button>
    <button onClick={() => value.modify(R.add(-1))}>-</button>
  </div>

ReactDOM.render(<Counter value={U.atom(0)}/>, document.getElementById("app"))

3-hyperapp.js

import { h, app } from "hyperapp"

app({
  state: 0,
  actions: {
      add: state => state + 1,
      sub: state => state - 1
  },
  view: (state, actions) =>
      <div>
          <button onclick={actions.add}>+</button>
          <h1>{state}</h1>
          <button onclick={actions.sub} disabled={state <= 0}>-</button>
      </div>
})

3a-purescript.purs

data Action = Increment | Decrement

type State = Int
update :: Action -> State -> State
update Increment count = count + 1
update Decrement count = count - 1

view :: State -> Html Action
view count =
  div
    []
    [ button [ onClick (const Increment) ] [ text "Increment" ]
    , span [] [ text (show count) ]
    , button [ onClick (const Decrement) ] [ text "Decrement" ]
    ]       

3b-svetle.js

<p>
  {{ count }}
  <button on:click="set({count: count + 1})">+</button>
  <button on:click="set({count: count - 1})">-</button>
</p>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

3c-focal.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Atom, F } from '@grammarly/focal'

const Counter = (props: { count: Atom<number> }) =>
  <F.div>
    You have clicked this button {props.count} time(s).
    <button onClick={() => props.count.modify(x => x + 1)}>Click again?</button>
  </F.div>

const App = (props: { state: Atom<{ count: number }> }) =>
  <div>
    <Counter count={ props.state.lens(x => x.count)} />
  </div>

ReactDOM.render(<App state={Atom.create({ count: 0 })} />,  document.getElementById('app'))

3d-cyclow.js

import {Block, run} from 'cyclow'

const Counter = () => Block({
  on: {
    'in.init':  () => counter => 0,
    'dom.increment': () => counter => counter + 1,
    'dom.decrement': () => counter => counter - 1
  },
  view: counter => ({tag:'div#app', content: [
    {tag: 'div.counter', content: `${counter}`},
    {tag: 'div.buttons', content: [
      {tag: 'button', on: {click: 'decrement'}, content: '-'},
      {tag: 'button', on: {click: 'increment'}, content: '+'}
    ]}
  ]})
})

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

4-elmar.js

import React from 'react'

export const init = count => count

const Action = {
  Increment: x => x + 1,
  Decrement: x => x - 1
}

export const update = (action, model) => action(model)

export const view = (signal, model) => (
  <div>
    <button onClick={signal(Action.Decrement)}>-</button>
    <div>{model}</div>
    <button onClick={signal(Action.Increment)}>+</button>
  </div>
)

export default {init, update, view}

4-mobx.js

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react'
import {render} from 'react-dom'

const state = { n: 0 };
const incr = () => state.n++;
const decr = () => state.n--;

const view = observer(() => 
  <div>
    <h1>{state.n}</h1>
    <button onclick={incr}>+</button>
    <button onclick={decr}>-</button>
  </div>)

render(
  <view />,
  document.querySelector('#app')
);

5-cyclejs.js

import xs from 'xstream';
import Cycle from '@cycle/xstream-run';
import {div, button, p, makeDOMDriver} from '@cycle/dom';

function main(sources) {
  let action$ = xs.merge(
    sources.DOM.select('.decrement').events('click').map(ev => -1),
    sources.DOM.select('.increment').events('click').map(ev => +1)
  );
  
  let count$ = action$.fold((x,y) => x + y, 0);
  
  return {
    DOM: count$.map(count =>
        div([
          button('.decrement', 'Decrement'),
          button('.increment', 'Increment'),
          p('Counter: ' + count)
        ])
      )
  };
}

Cycle.run(main, {
  DOM: makeDOMDriver('#main-container')
});

5-react.js

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'

const increment = ({ count }) => ({ count: count + 1 });
const decrement = ({ count }) => ({ count: count - 1 });

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <p>
        {this.state.count}
        <button onClick={() => this.setState(increment)}>+</button>
        <button onClick={() => this.setState(decrement)}>-</button>
      </p>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

6-choo-choo-v5.js

var html = require('./html')
var app = require('./')()

app.model(function (state, bus) {
  state.count = 0
  bus.on('increment', function (count) {
    state.count += count
    bus.emit('render')
  })
})
app.router([ '/', mainView ])
app.mount('body')

function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onIncr}>+</button>
      <button onclick=${onDecr}>-</button>
    </body>
  `
  function onIncr() {
    emit('increment', 1)
  }
  function onDecr() {
    emit('increment', -1)
  }  
}

6-choo-choo.js

const choo = require('../../')
const html = require('../../html')

const app = choo()
app.model({
  state: {
    counter: 0
  },
  reducers: {
    increment: (data, state) => ({ counter: state.counter + 1 }),
    decrement: (data, state) => ({ counter: state.counter - 1 })
  }
})

const mainView = (state, prev, send) => {
  return html`
    <main class="app">
      <button onclick=${() => send('increment')}>Increment</button>
      <button onclick=${() => send('decrement')}>Decrement</button>
      <p>state.counter</p>
    </main>
}

app.router((route) => [
  route('/', mainView)
])

document.body.appendChild(app.start())

7-elm.elm

import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)

main =
  App.beginnerProgram
    { model = model
    , view = view
    , update = update
    }

type alias Model = Int
model : Model
model = 0

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment -> model + 1
    Decrement -> model - 1
    
view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
]

7b-fable-elmish.fs

#r "../node_modules/fable-core/Fable.Core.dll"
#r "../node_modules/fable-react/Fable.React.dll"
#r "../node_modules/fable-elmish/Fable.Elmish.dll"
#r "../node_modules/fable-elmish-react/Fable.Elmish.React.dll"
open Fable.Core
open Fable.Import
open Elmish

type Msg = Increment | Decrement
let initialModel () = 0
let update (msg:Msg) model =
    match msg with
    | Increment -> model + 1
    | Decrement -> model - 1

module R = Fable.Helpers.React
open Fable.Core.JsInterop
open Fable.Helpers.React.Props

let view model dispatch =
    let onClick msg = OnClick <| fun _ -> msg |> dispatch

    R.div []
        [ R.button [ onClick Decrement ] [ unbox "-" ]
          R.div [] [ unbox (string model) ]
          R.button [ onClick Increment ] [ unbox "+" ] ]

open Elmish.React

Program.mkSimple initialModel update view
|> Program.withReact "app"
|> Program.run

7c-elm-ts-counter.ts

import { cmd } from '../src'
import { Html } from '../src/React'
import * as React from 'react'

export type Model = number
export type Flags = Model
export const flags: Flags = 0

export function init(flags: Flags): [Model, cmd.Cmd<Msg>] {
  return [flags, cmd.none]
}

export type Msg =
  | { type: 'Increment' }
  | { type: 'Decrement' }

export function update(msg: Msg, model: Model): [Model, cmd.Cmd<Msg>] {
  switch (msg.type) {
    case 'Increment' :
      return [model + 1, cmd.none]
    case 'Decrement' :
      return [model - 1, cmd.none]
  }
}

export function view(model: Model): Html<Msg> {
  return dispatch => (
    <div>Count: {model}
      <button onClick={() => dispatch({ type: 'Increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'Decrement' })}>-</button>
    </div>
  )
}

8-redux.js

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'

class Counter extends Component {
  static propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
  }

  render() {
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
      </p>
    )
  }
}

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)

Suggestion, MobX + React :) ? That is a bit more straight-forward compared to VirtualDOM

// counter: mobx-react implementation

import { observable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react'
import {render} from 'react-dom'

const state = { n: 0 };
const onclick = () => state.n++;

const view = observer(() => <div>
  <h1>clicked {state.n} times</h1>
  <button onclick={onclick}>click me!</button>
</div>)

render(
  <view />,
  document.querySelector('#app')
);

@mweststrate - oh, nice ! updated - thank you.
MobX is lovely...

@srdjan Minor suggestion, HyperApp+JSX looks neater. 👋

app({
    model: 0,
    update: {
        add: model => model + 1,
        sub: model => model - 1
    },
    view: (model, actions) =>
        <div>
            <button onclick={actions.add}>+</button>
            <h1>{model}</h1>
            <button onclick={actions.sub} disabled={model <= 0}>-</button>
        </div>
})

ClojureScript + Rum counter

(def state (atom 0))

(rum/defc view < rum/reactive [state]
  [:div
    [:button {:on-click #(swap! state dec)} "-"]
    [:span (rum/react state)]
    [:button {:on-click #(swap! state inc)} "+"]])

(run/mount (view state)
                    (js/document.getElementById "app"))

@roman01la What's atom 0? Is that how you declare the initial value?

@jbucaran yes, Atom is a reference type that holds an immutable value

shameless plug for enviante:

import createStore from 'enviante';
import {createObserve} from 'enviante-react';
import React from 'react';
import {render} from 'react-dom';

const store = createStore({count: 0});
const observe = createObserve(store);

const Counter = observe(props, ({subscribe, dispatch}) => <div>
    <h1>{subscribe('count')}</h1>
    <button onclick={() => dispatch('count', count => count + 1)}>+</button>
    <button onclick={() => dispatch('count', count => count - 1)}>-</button>
</div>);

render(<Counter />, document.querySelector('main'));

CounterMVC

new Vue({
  data: { count: 0 },
  template: `
    <p>
      {{ count }}
      <button @click="count++">+</button>
      <button @click="count--">-</button>
    </p>
   `
}).$mount('#app')

Or

new Vue({
  data: { count: 0 },
  render (h) {
    return h('p', [
      this.count,
      h('button', { on: { click: () => { this.count++ }}}, '+'),
      h('button', { on: { click: () => { this.count-- }}}, '-')
    ])
  }
}).$mount('#app')

Note: this also doesn't require any build step.

mithril

m.mount(document.body, {
    count : 0,
    
    view : (vnode) => m("div",
        m("div", "Count: ", vnode.state.count),
        m("button", { onclick : () => vnode.state.count++ }, "+"),
        m("button", { onclick : () => vnode.state.count-- }, "-")
    )
})

live demo

This is awesome! One bug: There's a missing closing back-tick in 6-choo-choo-counter.js (should be at end of line 21)

Vanilla.js

Count: <span id="count">0</span>
<button onclick="count.innerText = +count.innerText+1">+</button>
<button onclick="count.innerText = +count.innerText-1">-</button>

I hope the vanilla js one is tongue-in-cheek... because you'd have to go fishing in the DOM to get your data back, that'd become a real mess real quick in a real app.

Cool. As the developer of Calmm, I'd like to point out a couple of important details that are probably not immediately obvious just by looking at the code.

The first thing to understand is that the way state can be passed to components in Calmm via (lensed) atoms makes it possible to plug those components into application specific state fairly flexibly using lenses. The Counter component only assumes that it gets access to a numeric variable, but that variable can be adapted to mean many things. The shopping cart example shows how the Counter component can be adapted to control items in a shopping cart. In neither of the two uses of Counter in that example is the state that the component manipulates just a number.

The second thing to understand is that the Counter function that implements the component is only called by React when the component is mounted. In other words, the Counter function is not called for each change of the counter value. In fact, when the counter value changes, only the VDOM of the <div>Count: {value}</div> element is recomputed and the corresponding DOM element is then updated. The way observables can be embedded into VDOM in Calmm means that VDOM updates can easily be made almost optimal.

Here is a slightly fixed version of the example:

import * as R from "ramda"
import * as U from "karet.util"
import React from "karet"
import ReactDOM from "react-dom"

const Counter = ({value}) =>
  <div>
    <div>Count: {value}</div>
    <button onClick={() => value.modify(R.add(+1))}>+</button>
    <button onClick={() => value.modify(R.add(-1))}>-</button>
  </div>

ReactDOM.render(<Counter value={U.atom(0)}/>, document.getElementById("app"))

I moved the construction of the state atom outside of the component to emphasize that the Counter component can be a referentially transparent function. However, it is typical to define defaults, because that makes it easier to try out components, and it is also perfectly possible to create components that have local state that persists only for the duration that a component remains mounted.

@polytypic thanks for comments - updated
I was planning a second round with examples that are more involving - todo app with external API for persistence was original plan
but now shopping cart looks more like it 😄

Yes @foxdonut, definitely tongue-in-cheek :) It's also a parody of the succinctness that everyone is going for with their framework of choice. Without a defined set of objectives, Vanilla.js's example is just as valid as the others 😄

Great stuff @mindeavor :) totally agree!

In a twitter conversation someone mentioned this repo: https://github.com/adrianmcli/omg-counters

I wonder if this gist could me merged there

Act's <1.0 (https://github.com/act-framework/act/) version if you wanna add:

const view = (count) =>
  ['p', [
    ['h1', count],
    ['button', {click: {add: 1}}, '+'],
    ['button', {click: {add: -1}}, '-']
  ]]

const reducer = (state, {type, payload}) =>
  type === 'add' ? state + payload : state

main(view, { model: 0, reducer })

Where does 1b-calmm-counter-elm come from? As near as I can tell, https://github.com/polytypic/elm-reactive-dom-with-lensed-state-toy ? @polytypic

@adamdicarlo Yes, (I believe) it comes from there. Note that the Elm toy example is just a quick hack to show how things could look like. The Elm toy version is neither as expressive (it lacks higher-order observables and first-class atoms) nor as algorithmically efficient (updates require recomputing more VDOM) as the Calmm JS version, but there is no reason why one couldn't implement the approach properly in a ML-style language. Note that mentioning people in gist comments doesn't (seem to) give notifications.

@srdjan Hi 👋! Can we update the code in hyperapp's example? The part that says update, should be actions. That's it. 🙏

@jbucaran ✅

Pure React ?

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'

const increment = ({ count }) => ({ count: count + 1 });
const decrement = ({ count }) => ({ count: count - 1 });

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <p>
        {this.state.count}
        <button onClick={() => this.setState(increment)}>+</button>
        <button onClick={() => this.setState(decrement)}>-</button>
      </p>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

live demo

How about Svelte?

<p>
  {{ count }}
  <button on:click="set({count: count + 1})">+</button>
  <button on:click="set({count: count - 1})">-</button>
</p>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

Here's Marko:

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment(delta) {
    this.state.count += delta;
  }
}

<p>
  ${state.count}
  <button on-click('increment', 1)>+</button>
  <button on-click('increment', -1)>-</button>
</p>

Try Online

To mount the Marko component:

require('./path/to/marko-counter').renderSync().appendTo(document.body)

DIO. v7.0.0

class Counter {
	getInitialState () {
		return {
			count: 0
		}
	}
	increment () {
		return {
			count: this.state.count + 1
		}
	}
	decrement () {
		return {
			count: this.state.count - 1
		}
	}
	render () {
		return [
			this.state.count,
			h('button', {onClick: this.increment}, '+'),
			h('button', {onClick: this.decrement}, '-')
		]
	}
}

dio.render(Counter);