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

https://gbdaitokai.connpass.com/event/94404/

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