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

Inside hyperapp

Avatar for Yusaku Omasa Yusaku Omasa
February 26, 2018

Inside hyperapp

Avatar for Yusaku Omasa

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 まとめ