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>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
);

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

app

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

const state = { count: 0 };

<h1>{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>{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 サイトの他の関連記事を参照してください。