昔Reactで書いたコードをHyperappに移植した話 / Porting react to hyperapp

695598c61e7c3b7d5909398fc44d21fd?s=47 Yuuki Sumida
September 01, 2018

昔Reactで書いたコードをHyperappに移植した話 / Porting react to hyperapp

695598c61e7c3b7d5909398fc44d21fd?s=128

Yuuki Sumida

September 01, 2018
Tweet

Transcript

  1. 昔 R e a c t で 書 い た

    コ ー ド を H y p e r a p p に 移 植 し た 話 合 同 勉 強 会 i n ⼤ 都 会 岡 ⼭ - 2 0 1 8 S u m m a e r - # g b d a i t o k a i
  2. A B O U T M E Yuuki Sumida(@razon) Information

    Network co.,ltd
  3. 昔 R e a c t で 書 い た

    コ ー ド を H y p e r a p p に 移 植 し た 話 合 同 勉 強 会 i n ⼤ 都 会 岡 ⼭ - 2 0 1 8 S u m m a e r - # g b d a i t o k a i
  4. React Hyperapp …今更説明するまでもないよね? https://github.com/hyperapp/hyperapp 軽量 コアは398⾏ exportされている関数はhとappのふたつのみ

  5. import { h, app } from "hyperapp" const state =

    { count: 0 } const actions = { down: value => state => ({ count: state.count - value }), up: value => state => ({ count: state.count + value }) } const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={() => actions.down(1)}>-</button> <button onclick={() => actions.up(1)}>+</button> </div> ) app(state, actions, view, document.body) State Actions View
  6. https://kampa.me/

  7. State

  8. Actions

  9. View

  10. 移植してみて(完⾛した感想) 割と楽勝だった (Viewの互換性が⾼かったおかげ?) 規模あんまり⼤きくないんだけどもういい加減直接DOM いじるのはからい、みたいなところによさそう!

  11. カ ン パ お 願 い し ま す ま

    と め 終 @razon