Inside hyperapp

Transcript

1. Inside hyperapp How to implement virtual dom 0x64 Stories Yusaku Omasa
2. Hello! Yusaku Omasa. Twitter: @_eurk Web Engineer & Data Engineer
4. Hyperappとは 2017年のAdvent Calendarで Qiitaのエンジニアが開発し 実際にプロダクトでも採用 されたことで話題になった JavaScriptのFrameworkの ことである。 ref: 2018 年は Hyperapp の年だ
5. Hyperappとは (抄訳) Hyperapp is a JavaScript library for building web applications. • Minimal ◦ 小さな実装で、多くのことに対応する試み。 あなたが理解すべきコンセプトも最小にしつつ、他のFrameworkができることを維持する。 • Functional ◦ The Elm Architectureにインスパイアされて設計している。 関数型パラダイムを使い、スケーラブルにブラウザベースのアプリケーションを作れる。 新しい言語を学ぶ必要はない。 • Batteries-included ◦ そのままの状態で、Hyperappはstate管理と仮想DOMエンジンなどの依存するものを全て含んでいる。 ref: https://github.com/hyperapp/hyperapp/blob/master/README.md
6. Hyperappとは ref: https://codepen.io/hyperapp/pen/zNxZLP?editors=0010
7. Hyperappとは ref: 1 KB にこだわった理由、1 KB であることの利点
8. Hyperappとは ref: 1 KB にこだわった理由、1 KB であることの利点
9. 1KBのコードを読むのに 6時間かかりました (JSエンジニアではないとはいえ)
10. hyperapp design
11. • h() ◦ HTMLのタグをモデル化したもの ◦ JSXから変換可能になっている • app() ◦ Framework本体 ▪ State管理 ▪ actionとstateの紐付け ▪ Lifecycle ▪ Virtual dom更新 ▪ レンダリングロック Reactにほぼ近く、router、SSR用のrenderなどは、関連packageがある Frontend MVC、validationみたいなものはない Hyperapp design
12. Hyperapp design 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)
13. Hyperapp design • Virtual DOM ◦ わりかし普通の木構造。 JavaScriptのObjectそのもの。 ▪ Nodeを基本単位として、 Nodeが再帰的に子Nodeを持つ ▪ 要素 • nodeName • attributes • children ref: https://github.com/hyperapp/hyperapp/blob/master/README .md#virtual-dom
14. Hyperapp design Virtual DOMの設計について • JSX互換性を維持するために babel pluginのtransform-react-jsx を使えるようにしており、この pluginが Virtual DOMの設計を規定しているように見える。 (React.jsも同じ構造) • transform-react-jsx は、そのまま使うとReact.createElement() のかたちでNode Treeを 出力するが、JSXファイルで import { h } from "hyperapp"をすると h()に切り替えて出力する。
15. Process Flow Hyperapp design scheduleRender render action renderLock wait 1 msec patch unlock lifecycleStack push pop ① ② ③ ④ createElement
16. • action ◦ app()でProcess Flowに組み込まれる ◦ function wireStateToActions(path, state, actions) {} でactionの関数を再定義して app直下にあるwiredActionsに登録される ▪ actionによってstateが変更 & actionがPromiseではないときだけ、 globalState を更新して、 scheduleRender() を呼び出す ◦ actionのトリガはonClickなどでView側に埋め込む Hyperapp design const actions = { down: value => state => ({ count: state.count - value }), up: value => state => ({ count: state.count + value }) } app(state, actions, view, document.body) <button onclick={() => actions.down(1)}>-</button>
17. Action関数の再定義って どうやって実装するの? こうやっている ===> これだけだと読むのが辛いので、 コードにメモを付けたブランチを作り ました https://github.com/taise/hyperapp/tree/memo Hyperapp design
18. Hyperapp design • StateとActionの紐づけ ◦ key: up ◦ action: value => state => ({ count: state.count + value }) • 関数の再定義 ◦ L136: actions[key] = function(data){} ◦ L150: action() はコメントアウトのところの ような呼び出し方をしている ◦ { count: state.count + value } で渡して いるので、stateと同じ形で返る ◦ state の値が変わっていて、 data が Promise ではない時に、globalState を更新しつつ、 scheduleRender() が呼び出される ◦ dataを返して終了
19. • hyperappは、たしかに読み切れるサイズのライブラリ ◦ React.jsとかを読むのと比べると遥かに簡単 ◦ JSエンジニアなら1~2時間くらいで読めるかもしれないけど サーバーサイド エンジニアは6時間かかったよ • FWのような抽象化されたライブラリの設計を読み解きながら コードリーディングするのは楽しく、学びが多い ◦ 処理フローを図式化しながらやると、頭も整理されてよい 他にもrenderやpatchなど、なかなか読み応えがあるので、 レベルアップしたいJSエンジニアは読んでみると良いかもしれない https://github.com/taise/hyperapp/tree/memo まとめ