Tweet
Tweet

Slide 1

Slide 1 text

昔 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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

昔 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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

https://kampa.me/

Slide 7

Slide 7 text

State

Slide 8

Slide 8 text

Actions

Slide 9

Slide 9 text

View

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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