Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Inside hyperapp

Yusaku Omasa
February 26, 2018

Inside hyperapp

Yusaku Omasa

February 26, 2018
Tweet

More Decks by Yusaku Omasa

Other Decks in Technology

Transcript

  1. 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
  2. • h() ◦ HTMLのタグをモデル化したもの ◦ JSXから変換可能になっている • app() ◦ Framework本体

    ▪ State管理 ▪ actionとstateの紐付け ▪ Lifecycle ▪ Virtual dom更新 ▪ レンダリングロック Reactにほぼ近く、router、SSR用のrenderなどは、関連packageがある Frontend MVC、validationみたいなものはない Hyperapp design
  3. 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)
  4. Hyperapp design • Virtual DOM ◦ わりかし普通の木構造。 JavaScriptのObjectそのもの。 ▪ Nodeを基本単位として、

    Nodeが再帰的に子Nodeを持つ ▪ 要素 • nodeName • attributes • children ref: https://github.com/hyperapp/hyperapp/blob/master/README .md#virtual-dom
  5. 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()に切り替えて出力する。
  6. Process Flow Hyperapp design scheduleRender render action renderLock wait 1

    msec patch unlock lifecycleStack push pop ① ② ③ ④ createElement
  7. • 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>
  8. 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を返して終了
  9. • hyperappは、たしかに読み切れるサイズのライブラリ ◦ React.jsとかを読むのと比べると遥かに簡単 ◦ JSエンジニアなら1~2時間くらいで読めるかもしれないけど サーバーサイド エンジニアは6時間かかったよ • FWのような抽象化されたライブラリの設計を読み解きながら

    コードリーディングするのは楽しく、学びが多い ◦ 処理フローを図式化しながらやると、頭も整理されてよい 他にもrenderやpatchなど、なかなか読み応えがあるので、 レベルアップしたいJSエンジニアは読んでみると良いかもしれない https://github.com/taise/hyperapp/tree/memo まとめ