developer-rakeshpaul · February 25, 2017 12:02 · Feb 24, 2017 · Feb 24, 2017 · Feb 24, 2017 · Feb 24, 2017
diff --git a/0-Simple counter: different implementations... b/0-Simple counter: different implementations...
@@ -1 +1 @@
-Simple counter: different implementations... code verbosity vs expressiveness
+different implementations of the simple counter app... code verbosity vs expressiveness
diff --git a/5-choo-choo-counter.js → 6-choo-choo-counter.js b/5-choo-choo-counter.js → 6-choo-choo-counter.js
diff --git a/5-elm-counter.elm → 7-elm-counter.elm b/5-elm-counter.elm → 7-elm-counter.elm
diff --git a/7-redux-counter.js → 8-redux-counter.js b/7-redux-counter.js → 8-redux-counter.js
diff --git a/4-choo-choo-counter.js → 5-choo-choo-counter.js b/4-choo-choo-counter.js → 5-choo-choo-counter.js
diff --git a/4-cyclejs-counter.js → 5-cyclejs-counter.js b/4-cyclejs-counter.js → 5-cyclejs-counter.js
diff --git a/4-elm-counter.elm → 5-elm-counter.elm b/4-elm-counter.elm → 5-elm-counter.elm
diff --git a/5-redux-counter.js → 7-redux-counter.js b/5-redux-counter.js → 7-redux-counter.js
diff --git a/3a-hyperapp.js → 3-hyperapp.js b/3a-hyperapp.js → 3-hyperapp.js
diff --git a/4b-choo-choo-counter.js → 4-choo-choo-counter.js b/4b-choo-choo-counter.js → 4-choo-choo-counter.js
diff --git a/4a-cyclejs-counter.js → 4-cyclejs-counter.js b/4a-cyclejs-counter.js → 4-cyclejs-counter.js
diff --git a/5-elm-counter.elm → 4-elm-counter.elm b/5-elm-counter.elm → 4-elm-counter.elm
diff --git a/3a-elmar-counter.js → 4-elmar-counter.js b/3a-elmar-counter.js → 4-elmar-counter.js
diff --git a/3a-mobx-counter.js → 4-mobx-counter.js b/3a-mobx-counter.js → 4-mobx-counter.js
diff --git a/6-redux-counter.js → 5-redux-counter.js b/6-redux-counter.js → 5-redux-counter.js
diff --git a/0-Simple counter: different implementations... b/0-Simple counter: different implementations...
@@ -1 +1 @@
-Simple counter: different implementations...
+Simple counter: different implementations... code verbosity vs expressiveness
diff --git a/2-counter-pux.purs → 3-counter-pux.purs b/2-counter-pux.purs → 3-counter-pux.purs
diff --git a/3-elmar-counter.js → 3a-elmar-counter.js b/3-elmar-counter.js → 3a-elmar-counter.js
diff --git a/2-hyperapp.js → 3a-hyperapp.js b/2-hyperapp.js → 3a-hyperapp.js
diff --git a/3-mobx-counter.js → 3a-mobx-counter.js b/3-mobx-counter.js → 3a-mobx-counter.js
diff --git a/3-cyclejs-counter.js → 4a-cyclejs-counter.js b/3-cyclejs-counter.js → 4a-cyclejs-counter.js
@@ -23,4 +23,4 @@ function main(sources) {
 
 Cycle.run(main, {
   DOM: makeDOMDriver('#main-container')
-});
+});
diff --git a/3-choo-choo-counter.js → 4b-choo-choo-counter.js b/3-choo-choo-counter.js → 4b-choo-choo-counter.js
diff --git a/4-elm-counter.elm → 5-elm-counter.elm b/4-elm-counter.elm → 5-elm-counter.elm
diff --git a/5-redux-counter.js → 6-redux-counter.js b/5-redux-counter.js → 6-redux-counter.js
diff --git a/3-redux-counter.js → 5-redux-counter.js b/3-redux-counter.js → 5-redux-counter.js
diff --git a/3-elm-counter.elm → 4-elm-counter.elm b/3-elm-counter.elm → 4-elm-counter.elm
diff --git a/2-calmm-js-counter.js b/2-calmm-js-counter.js
@@ -10,4 +10,4 @@ export default ({value = U.atom(0)}) =>
     <button onClick={() => value.modify(R.add(-1))}>-</button>
 </div>
 
-ReactDOM.render(<Main/>, document.getElementById("app"))
+ReactDOM.render(<Main/>, document.getElementById("app"))
diff --git a/2-counter-pux.purs b/2-counter-pux.purs
@@ -1,7 +1,6 @@
 data Action = Increment | Decrement
 
 type State = Int
-
 update :: Action -> State -> State
 update Increment count = count + 1
 update Decrement count = count - 1
@@ -13,5 +12,4 @@ view count =
     [ button [ onClick (const Increment) ] [ text "Increment" ]
     , span [] [ text (show count) ]
     , button [ onClick (const Decrement) ] [ text "Decrement" ]
-    ]
-
+    ]       
diff --git a/6-choo-choo-counter.js → 3-choo-choo-counter.js b/6-choo-choo-counter.js → 3-choo-choo-counter.js
diff --git a/5-cyclejs-counter.js → 3-cyclejs-counter.js b/5-cyclejs-counter.js → 3-cyclejs-counter.js
diff --git a/elm-counter.elm → 3-elm-counter.elm b/elm-counter.elm → 3-elm-counter.elm
diff --git a/4-elmar-counter.js → 3-elmar-counter.js b/4-elmar-counter.js → 3-elmar-counter.js
diff --git a/redux-counter.js → 3-redux-counter.js b/redux-counter.js → 3-redux-counter.js
diff --git a/counter-pux.purs → 2-counter-pux.purs b/counter-pux.purs → 2-counter-pux.purs
diff --git a/2-hyperapp.js b/2-hyperapp.js
@@ -6,10 +6,10 @@ app({
         add: model => model + 1,
         sub: model => model - 1
     },
-    view: (model, actions) => html`
+    view: (model, actions) =>
         <div>
-            <button onclick=${actions.add}>+</button>
-            <h1>${model}</h1>
-            <button onclick=${actions.sub} disabled=${model <= 0}>-</button>
-        </div>`
+            <button onclick={actions.add}>+</button>
+            <h1>{model}</h1>
+            <button onclick={actions.sub} disabled={model <= 0}>-</button>
+        </div>
 })
diff --git a/0-Simple counter: different implementations... b/0-Simple counter: different implementations...
@@ -0,0 +1 @@
+Simple counter: different implementations...
diff --git a/2-hyperapp.js b/2-hyperapp.js
@@ -1,3 +1,5 @@
+import { h, app } from "hyperapp"
+
 app({
     model: 0,
     update: {

diff --git a/3-mobx-counter.js b/3-mobx-counter.js
@@ -4,12 +4,15 @@ import React from 'react'
 import {render} from 'react-dom'
 
 const state = { n: 0 };
-const onclick = () => state.n++;
+const incr = () => state.n++;
+const decr = () => state.n--;
 
-const view = observer(() => <div>
-  <h1>clicked {state.n} times</h1>
-  <button onclick={onclick}>click me!</button>
-</div>)
+const view = observer(() => 
+  <div>
+    <h1>{state.n}</h1>
+    <button onclick={incr}>+</button>
+    <button onclick={decr}>-</button>
+  </div>)
 
 render(
   <view />,

diff --git a/calmm-js-counter.elm → 1-calmm-js-counter.elm b/calmm-js-counter.elm → 1-calmm-js-counter.elm
@@ -1,5 +1,3 @@
--- counter: calmm-js way ported to elm 
-
 import Dom exposing (..)
 import Lens exposing (Lens)
 

diff --git a/calmm-js-counter.js → 2-calmm-js-counter.js b/calmm-js-counter.js → 2-calmm-js-counter.js
@@ -1,5 +1,3 @@
-// counter: calmm-js
-
 import * as R from "ramda"
 import * as U from "karet.util"
 import React from "karet"

diff --git a/hyperapp.js → 2-hyperapp.js b/hyperapp.js → 2-hyperapp.js
diff --git a/mobx-counter.js → 3-mobx-counter.js b/mobx-counter.js → 3-mobx-counter.js
@@ -1,5 +1,3 @@
-/ counter: mobx-react implementation
-
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react'

diff --git a/elmar-counter.js → 4-elmar-counter.js b/elmar-counter.js → 4-elmar-counter.js
diff --git a/cyclejs-counter.js → 5-cyclejs-counter.js b/cyclejs-counter.js → 5-cyclejs-counter.js
@@ -1,5 +1,3 @@
-// counter: cyclejs
-
 import xs from 'xstream';
 import Cycle from '@cycle/xstream-run';
 import {div, button, p, makeDOMDriver} from '@cycle/dom';

diff --git a/choo-choo-counter.js → 6-choo-choo-counter.js b/choo-choo-counter.js → 6-choo-choo-counter.js
@@ -1,5 +1,3 @@
-// counter: choo choo
-
 const choo = require('../../')
 const html = require('../../html')
 

diff --git a/elm-counter.elm b/elm-counter.elm
@@ -1,5 +1,3 @@
--- counter: elm implementation
-
 import Html exposing (Html, button, div, text)
 import Html.App as App
 import Html.Events exposing (onClick)

diff --git a/redux-counter.js b/redux-counter.js
@@ -1,5 +1,3 @@
-// counter: redux implementation
-
 import React, { Component, PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { createStore } from 'redux'

diff --git a/hyperapp.js b/hyperapp.js
@@ -0,0 +1,13 @@
+app({
+    model: 0,
+    update: {
+        add: model => model + 1,
+        sub: model => model - 1
+    },
+    view: (model, actions) => html`
+        <div>
+            <button onclick=${actions.add}>+</button>
+            <h1>${model}</h1>
+            <button onclick=${actions.sub} disabled=${model <= 0}>-</button>
+        </div>`
+})
diff --git a/mobx-counter.js b/mobx-counter.js
@@ -1,28 +1,19 @@
-// counter: mobx implementation
+/ counter: mobx-react implementation
 
-import { observable, autorun } from 'mobx';
-import { diff, patch } from 'virtual-dom';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react'
+import {render} from 'react-dom'
 
-let mount = function mount(element, view, state) {
-  let tree = <noop/>;
-  function render() {
-    const newTree = view(state);
-    const patches = diff(tree, newTree);
-    element = patch(element, patches);
-    tree = newTree;
-  }
-  autorun(() => render());
-}
-
-const state = { @observable n: 0 };
+const state = { n: 0 };
 const onclick = () => state.n++;
 
-const view = (state) => <div>
+const view = observer(() => <div>
   <h1>clicked {state.n} times</h1>
   <button onclick={onclick}>click me!</button>
-</div>
+</div>)
 
-mount(
-  document.querySelector('#app'),
-  view, state
-);
+render(
+  <view />,
+  document.querySelector('#app')
+);
diff --git a/counter-pux.purs b/counter-pux.purs
@@ -0,0 +1,17 @@
+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" ]
+    ]
+
diff --git a/elmar-counter.js b/elmar-counter.js
@@ -0,0 +1,20 @@
+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}
diff --git a/calmm-js-counter.js b/calmm-js-counter.js
@@ -2,11 +2,14 @@
 
 import * as R from "ramda"
 import * as U from "karet.util"
-import React  from "karet"
+import React from "karet"
+import ReactDOM from "react-dom"
 
 export default ({value = U.atom(0)}) =>
   <div>
     <div>Count: {value}</div>
     <button onClick={() => value.modify(R.add(+1))}>+</button>
     <button onClick={() => value.modify(R.add(-1))}>-</button>
-</div>
+</div>
+
+ReactDOM.render(<Main/>, document.getElementById("app"))
diff --git a/mobx-counter.js b/mobx-counter.js
@@ -1,8 +1,7 @@
 // counter: mobx implementation
 
-import { observable } from 'mobx';
+import { observable, autorun } from 'mobx';
 import { diff, patch } from 'virtual-dom';
-import { autorun } from 'mobx';
 
 let mount = function mount(element, view, state) {
   let tree = <noop/>;

diff --git a/choo-choo-counter.js b/choo-choo-counter.js
@@ -15,19 +15,16 @@ app.model({
 })
 
 const mainView = (state, prev, send) => {
-  const count = state.counter
-
   return html`
     <main class="app">
       <button onclick=${() => send('increment')}>Increment</button>
       <button onclick=${() => send('decrement')}>Decrement</button>
-      <p>count</p>
+      <p>state.counter</p>
     </main>
 }
 
 app.router((route) => [
   route('/', mainView)
 ])
 
-const tree = app.start()
-document.body.appendChild(tree)
+document.body.appendChild(app.start())
diff --git a/choo-choo-counter.js b/choo-choo-counter.js
@@ -21,6 +21,7 @@ const mainView = (state, prev, send) => {
     <main class="app">
       <button onclick=${() => send('increment')}>Increment</button>
       <button onclick=${() => send('decrement')}>Decrement</button>
+      <p>count</p>
     </main>
 }
 

diff --git a/calmm-js-counter.elm b/calmm-js-counter.elm
@@ -1,7 +1,5 @@
 -- counter: calmm-js way ported to elm 
 
-module Counter exposing (..)
-
 import Dom exposing (..)
 import Lens exposing (Lens)
 

diff --git a/elm-counter.elm b/elm-counter.elm
@@ -15,18 +15,14 @@ type alias Model = Int
 model : Model
 model = 0
 
-type Msg
-  = Increment
-  | Decrement
+type Msg = Increment | Decrement
 
 update : Msg -> Model -> Model
 update msg model =
   case msg of
-    Increment ->
-      model + 1
-    Decrement ->
-      model - 1
-
+    Increment -> model + 1
+    Decrement -> model - 1
+
 view : Model -> Html Msg
 view model =
   div []

diff --git a/calmm-eml-counter.elm → calmm-js-counter.elm b/calmm-eml-counter.elm → calmm-js-counter.elm
@@ -1,3 +1,5 @@
+-- counter: calmm-js way ported to elm 
+
 module Counter exposing (..)
 
 import Dom exposing (..)

diff --git a/calmm-js-counter.js b/calmm-js-counter.js
@@ -1,3 +1,5 @@
+// counter: calmm-js
+
 import * as R from "ramda"
 import * as U from "karet.util"
 import React  from "karet"

diff --git a/choo-choo-counter.js b/choo-choo-counter.js
@@ -1,3 +1,5 @@
+// counter: choo choo
+
 const choo = require('../../')
 const html = require('../../html')
 

diff --git a/cyclejs-counter.js b/cyclejs-counter.js
@@ -1,3 +1,5 @@
+// counter: cyclejs
+
 import xs from 'xstream';
 import Cycle from '@cycle/xstream-run';
 import {div, button, p, makeDOMDriver} from '@cycle/dom';

diff --git a/elm-counter.elm b/elm-counter.elm
@@ -11,12 +11,10 @@ main =
     , update = update
     }
 
--- MODEL
 type alias Model = Int
 model : Model
 model = 0
 
--- UPDATE
 type Msg
   = Increment
   | Decrement
@@ -29,7 +27,6 @@ update msg model =
     Decrement ->
       model - 1
 
--- VIEW
 view : Model -> Html Msg
 view model =
   div []

diff --git a/redux-counter.js b/redux-counter.js
@@ -11,37 +11,12 @@ class Counter extends Component {
     onDecrement: PropTypes.func.isRequired
   }
 
-  incrementIfOdd = () => {
-    if (this.props.value % 2 !== 0) {
-      this.props.onIncrement()
-    }
-  }
-
-  incrementAsync = () => {
-    setTimeout(this.props.onIncrement, 1000)
-  }
-
   render() {
     const { value, onIncrement, onDecrement } = this.props
     return (
       <p>
-        Clicked: {value} times
-        {' '}
-        <button onClick={onIncrement}>
-          +
-        </button>
-        {' '}
-        <button onClick={onDecrement}>
-          -
-        </button>
-        {' '}
-        <button onClick={this.incrementIfOdd}>
-          Increment if odd
-        </button>
-        {' '}
-        <button onClick={this.incrementAsync}>
-          Increment async
-        </button>
+        <button onClick={onIncrement}>+</button>
+        <button onClick={onDecrement}>-</button>
       </p>
     )
   }

diff --git a/calmm-eml-counter.elm b/calmm-eml-counter.elm
@@ -0,0 +1,12 @@
+module Counter exposing (..)
+
+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 "+"]
+]
diff --git a/calmm-js-counter.js b/calmm-js-counter.js
@@ -0,0 +1,10 @@
+import * as R from "ramda"
+import * as U from "karet.util"
+import React  from "karet"
+
+export default ({value = U.atom(0)}) =>
+  <div>
+    <div>Count: {value}</div>
+    <button onClick={() => value.modify(R.add(+1))}>+</button>
+    <button onClick={() => value.modify(R.add(-1))}>-</button>
+</div>
diff --git a/choo-choo-counter.js b/choo-choo-counter.js
@@ -0,0 +1,30 @@
+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) => {
+  const count = state.counter
+
+  return html`
+    <main class="app">
+      <button onclick=${() => send('increment')}>Increment</button>
+      <button onclick=${() => send('decrement')}>Decrement</button>
+    </main>
+}
+
+app.router((route) => [
+  route('/', mainView)
+])
+
+const tree = app.start()
+document.body.appendChild(tree)
diff --git a/cyclejs-counter.js b/cyclejs-counter.js
@@ -0,0 +1,26 @@
+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')
+});
diff --git a/elm-counter.elm b/elm-counter.elm
@@ -0,0 +1,39 @@
+-- counter: elm implementation
+
+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
+    }
+
+-- MODEL
+type alias Model = Int
+model : Model
+model = 0
+
+-- UPDATE
+type Msg
+  = Increment
+  | Decrement
+
+update : Msg -> Model -> Model
+update msg model =
+  case msg of
+    Increment ->
+      model + 1
+    Decrement ->
+      model - 1
+
+-- VIEW
+view : Model -> Html Msg
+view model =
+  div []
+    [ button [ onClick Decrement ] [ text "-" ]
+    , div [] [ text (toString model) ]
+    , button [ onClick Increment ] [ text "+" ]
+]
diff --git a/mobx-counter.js b/mobx-counter.js
@@ -0,0 +1,29 @@
+// counter: mobx implementation
+
+import { observable } from 'mobx';
+import { diff, patch } from 'virtual-dom';
+import { autorun } from 'mobx';
+
+let mount = function mount(element, view, state) {
+  let tree = <noop/>;
+  function render() {
+    const newTree = view(state);
+    const patches = diff(tree, newTree);
+    element = patch(element, patches);
+    tree = newTree;
+  }
+  autorun(() => render());
+}
+
+const state = { @observable n: 0 };
+const onclick = () => state.n++;
+
+const view = (state) => <div>
+  <h1>clicked {state.n} times</h1>
+  <button onclick={onclick}>click me!</button>
+</div>
+
+mount(
+  document.querySelector('#app'),
+  view, state
+);
diff --git a/redux-counter.js b/redux-counter.js
@@ -0,0 +1,74 @@
+// counter: redux implementation
+
+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
+  }
+
+  incrementIfOdd = () => {
+    if (this.props.value % 2 !== 0) {
+      this.props.onIncrement()
+    }
+  }
+
+  incrementAsync = () => {
+    setTimeout(this.props.onIncrement, 1000)
+  }
+
+  render() {
+    const { value, onIncrement, onDecrement } = this.props
+    return (
+      <p>
+        Clicked: {value} times
+        {' '}
+        <button onClick={onIncrement}>
+          +
+        </button>
+        {' '}
+        <button onClick={onDecrement}>
+          -
+        </button>
+        {' '}
+        <button onClick={this.incrementIfOdd}>
+          Increment if odd
+        </button>
+        {' '}
+        <button onClick={this.incrementAsync}>
+          Increment async
+        </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)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Simple counter: different implementations... code verbosity vs expressiveness
		different implementations of the simple counter app... code verbosity vs expressiveness