Who?

• ジョージ
  • エンジニア at Qiita＋Increments
  • @JorgeBucaran
    • GitHub
    • Twitter
    • Qiita
    • jbucaran.hatenablog.com
  • 今まで作ってきた OSS は？
    • fly – Generator & Coroutine-based build system.
    • fisherman – A concurrent plugin manager for fish.
    • hyperapp – 1KB JavaScript library for building frontend applications.

アジェンダ

• What is Hyperapp?
  • GitHub
  • Documentation
  • Examples
• Why Hyperapp?
• How does it work?
• Differences with other libraries
• What next?

What is Hyperapp?

• GitHub

• Reddit

• Baby 2017年3月~
• SPA/フロントエンドappを作るためのJavaScriptライブラリ
• React, Preact, Inferno, Ember, Vueなどに似てる
• Hyperapp = Virtual DOM ＋ Redux/Elm的なState管理 ＋ Router
• ~1KB gzip
  
• Fast → Benchmarks

Why?

• ReactやVueはframeworkっぽ過ぎ
• ミニマルなVirtual DOMエンジンが欲しかった
  • virtual-dom息をしていない？？
  • snabbdom or domvm
    • 100ポケットあるジャケット
    • hyperscript-style vnode factory function hと相性イマイチ

How does it work?

• Demo

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

Differences with other libraries

• "dependencies": {}
• Redux/Elm的なState管理
• 十分にハイパフォーマンス
• 短い~300行

What next?

• requestAnimationFrame
• Server Side Rendering
  • https://github.com/hyperapp/hyperapp/pull/28
• REPL

Thanks!