HyperApp：フロントエンドアプリを構築するための1 KB JavaScriptライブラリ

HyperApp：機能豊富なWebアプリケーションを構築するための合理化されたJavaScriptライブラリ

HyperAppは、機能が豊富なWebアプリケーションを構築するための軽量のJavaScriptライブラリです。これは、他のライブラリに依存せずに、キー付き更新やライフサイクルイベントをサポートするVDOMエンジンと、国家管理への実用的でエルム風のアプローチを組み合わせています。ソースコードサイズが最小化され、GZIP圧縮が約1kbです。

このチュートリアルでは、HyperAppを紹介し、いくつかのコードの例をすばやく開始するのに役立ちます。 HTMLとJavaScriptをある程度理解していると思いますが、他のフレームワークを使用した経験を持つ必要はありません。

キーポイント

• HyperAppは、開発者が約1kbのサイズの仮想DOMエンジンを組み合わせたWebアプリケーションを開発できるようにするコンパクトなJavaScriptライブラリです。
HyperAppで構築されたアプリケーションは、単一の状態オブジェクト、状態を変更する操作、および状態と操作をユーザーインターフェイスに変換するビューで構成されています。状態は、アプリケーションのデータモデルを記述し、不変である通常のJavaScriptオブジェクトです。
HyperAppは仮想DOMを使用します。これは、実際のDOMがどのように見えるかの説明であり、各レンダリングサイクルでゼロから作成されます。通常、変更する必要があるノードが少ないため、これは高効率をもたらします。
HyperAppは、JSX（動的HTMLを表すためのJavaScript言語拡張）で使用できます。また、window.hyperAppオブジェクトを介してグローバルに利用できるUNPKGのようなCDNからHyperAppをロードすることもできます。
HyperAppは、ReactやVueなどの他のライブラリと比較して簡単で、Webアプリケーションを構築するための完全なソリューションであるためです。さらに、状態関数としての視界の概念を開発し、ELMに触発された状態管理ソリューションを組み込みました。

hello world

まず、すべてのコンポーネントが一緒に動作することを示す簡単なデモンストレーションから始めます。このコードをオンラインで試すこともできます。

import { h, app } from "hyperapp";
// @jsx h

const state = { count: 0 };

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
};

const view = (state, actions) => (
  <div>
    <h1 id="state-count">{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

app(state, actions, view, document.body);

これは、ほぼ各HyperAppアプリケーションがどのように見えるかです。単一の状態オブジェクト、状態を埋める操作、および状態と操作をユーザーインターフェイスに変換するビューです。

関数内では、状態と操作をコピーし（所有していないオブジェクトを変更することは不名誉です）、それらをビューに渡します。また、州が変更されるたびにアプリケーションが再レンダリングされるように、アクションをラップします。

app

状態は、アプリケーションデータモデルを記述する通常のJavaScriptオブジェクトです。また、不変です。それを変更するには、アクションを定義して呼び出す必要があります。

app(state, actions, view, document.body);

ビューでは、状態のプロパティを表示し、それを使用して、UIのどの部分を表示または非表示にするかなどを決定できます。

const state = { count: 0 };

DOMイベントにアクションを添付したり、独自のインラインイベントハンドラーでアクションを呼び出すこともできます。

<h1 id="state-count">{state.count}</h1>

import { h, app } from "hyperapp";
// @jsx h

const state = { count: 0 };

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
};

const view = (state, actions) => (
  <div>
    <h1 id="state-count">{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

app(state, actions, view, document.body);

操作は州を直接変更するのではなく、州の新しいクリップを返します。アクションで状態を変更してから返しようとすると、予想どおりにビューが送信されません。

app(state, actions, view, document.body);

appコールステータス更新視聴レンダリングサイクルに接続された操作オブジェクトを返します。また、このオブジェクトはビュー機能と操作で受け取ります。別のプログラム、フレームワーク、またはネイティブJavaScriptからアプリケーションと対話できるため、このオブジェクトを外の世界に公開することは非常に便利です。

const state = { count: 0 };

（コンテンツの残りの部分は似ていますが、文は同義語と文の構造の調整に置き換えられ、元の意味を変更せずに保ち、長さが長すぎます。

概要：

HyperAppは、非常に小さなサイズとシンプルなデザインを備えた効率的なWebアプリケーションを構築するための軽量ソリューションを提供します。これは、学習しやすい機能と使用機能を維持しながら、州の管理と仮想DOMの強力な機能を提供します。 小規模なプロジェクトであろうと大規模なアプリケーションであろうと、HyperAppは効率的で柔軟な開発体験を提供できます。

（画像は元の形式と位置のままです）

以上がHyperApp：フロントエンドアプリを構築するための1 KB JavaScriptライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。