HyperApp - 1kbのビューライブラリ

  • 24
    いいね
  • 0
    コメント

Who?

  • ジョージ :wave:
    • エンジニア at Increments/Qiita
    • GitHub, Twitter, Qiita → @jbucaran
    • 今まで作ってきたOpen Sourceは?
      • fly - Generator & Coroutine-based build system.
      • fisherman - A concurrent plugin manager for fish.
      • hyperapp - 1kb JavaScript library for building frontend applications.

アジェンダ



What is HyperApp?

  • Newborn :baby: 1月歳
  • SPA/フロントエンドappを作るためのJavaScriptライブラリ
  • React, Preact, Inferno, Mithril, Ember, Vueなどに似てる
  • HyperApp = Virtual DOM + Redux/Elm的なState管理 + Router
  • ~1kb gzip
  • Fast :fire: benchmarks

Why?

  • Reactはheavyすぎ
  • ミニマルなVirtual DOMエンジンが欲しかった

    • virtual-dom息をしていない??
    • snabbdom or domvm
      • 100ポケットあるジャケット
      • hyperscript-style vnode factory function hと相性イマイチ
    • morphodomはDOMを直接にdiffしてくれるけど。。。
  • hyperxにもJSXにも相性抜群


How does it work?

Simple Counter

import { h, app } from "hyperapp"

app({
  model: 0,
  actions: {
    add: model => model + 1,
    sub: model => model - 1
  },
  view: (model, actions) =>
    <div>
      <button onClick={actions.add}>+</button>
      <h1>{model}</h1>
      <button onClick={actions.sub} disabled={model <= 0}>-</button>
    </div>
})

Differences with other libraries


What next?


Thanks! :wave: