フロントエンドエンジニアをやっています。
頑張るから読んでほしい。

Hyperappについて調べてみた。

Hyperapp

毎週何かのライブラリをコードリーディングするという目標を立てました◎

はじめてのコードリーディング、何にしようかと迷ったのですが🤔

Hyperappを読んでみることにしました。

Hyperappなら1KBだし、行数も400行くらい。

（コードリーディング初心者の私でも読めるかも...🤔！）

今回の記事はコードリーディング前に事前にHyperappについて調べたのでそのmemoです。



Hyperappとは？

Web アプリのフロントエンド用 JavaScript ライブラリ。React, Preact, Vue といった代表的なものよりもずっと小さく、1 KB という超軽量サイズ。他のライブラリに依存することなく使えて、さらにスピードもある

  • QiitaがReactからHyperappに移行
  • SHOWROOMの新規開発に採用されている

ReactやVueなどで使われているVirtual DOM,Lifecycle Eventsの概念とRedux や Vuexなどで使われているState Management（状態管理）の概念を、「最小限」で、「実用的」に、一つにまとめた（「独立している」）ライブラリ。

github.com



concept

  • Minimal（最小限）
  • Pragmatic（実践的）
  • Standalone（独立）



Hyperappの関数

h関数, app関数の2つだけです。

  • h関数:仮想DOMを生成する関数
  • app関数: Hyperappを利用したApplicationを実行する関数

h

h(name, props, children) - name {String}…「div」など、HTML上でのタグ名 - props {Object} … Elementに挿入されるattributes - children {String | Array} … 子要素

h("a", { href: "#" }, "next page")

// return object
// {
//   name: 'a',
//   props: {
//     href: '#'
//   },
//   children: 'next page'
// }

app

HyperappによるWebアプリケーションを起動する

app(state, actions, view, container)






コードリーディングはまだ途中なので、改めて記事にする予定。