昔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
   

   View Slide

2. A B O U T M E
   Yuuki Sumida(@razon)
   Information Network co.,ltd
   

   View Slide

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
   

   View Slide

4. React Hyperapp
   …今更説明するまでもないよね？ https://github.com/hyperapp/hyperapp
   軽量
   コアは398⾏
   exportされている関数はhとappのふたつのみ
   

   View Slide

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) => (
   
   {state.count}
   actions.down(1)}>-
   actions.up(1)}>+
   
   )
   app(state, actions, view, document.body)
   State
   Actions
   View
   

   View Slide

6. https://kampa.me/
   

   View Slide

7. State
   

   View Slide

8. Actions
   

   View Slide

9. View
   

   View Slide

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

    View Slide

11. カ ン パ お 願 い し ま す
    ま と め
    終
    @razon
    

    View Slide