今日の急速に増殖している風景の中で JavaScript フレームワークとライブラリ、開発の基礎となるものを選択することは非常に難しい場合があります。結局のところ、特定のフレームワークを使用する道をたどると、コードを別のフレームワークを使用するように移行することは簡単な作業ではなく、実行する時間や予算がない可能性があります。

なぜ Ractive.js ？

不活性なHTMLを生成する他のツールとは異なり、Ractiveはテンプレートをアプリの青写真に変換します。 インタラクティブ デフォルトでは。そして、Ractiveの貢献は革命的というよりも進化的であると確かに主張することができますが、それでもその価値は重要です。

Ractiveを非常に便利なものにしているのは、強力な機能を提供することですが、開発者が使用するのに非常に簡単な方法で提供します。さらに、それはかなりエレガントで、速く、邪魔にならず、そして小さいです。

この記事では、シンプルなRactive検索アプリを構築するプロセスについて説明し、Ractiveの主な機能のいくつかと、それがWebアプリと開発を簡素化するのに役立つ方法を示します。

Ractive.jsとは何ですか？

Ractiveは元々、よりエレガントな方法でデータバインディングの問題に取り組むために作成されました。そのために、テンプレートを取得してDOMの軽量仮想表現に変換し、データが変更されたときに実際のDOMがインテリジェントかつ効率的に更新されるようにします。

しかし、Ractiveが採用しているアプローチとインフラストラクチャを使用して、他のことをより効率的に行うことができることがすぐに明らかになりました。たとえば、イベントハンドラーの再利用などを自動的に処理し、不要になったときに自動的にバインドを解除できます。イベントの委任は不要になります。データバインディングと同様に、このアプローチは、アプリの成長に伴ってコードが扱いにくくなるのを防ぎます。

双方向バインディング、アニメーション、SVGサポートなどの主要な機能がすぐに提供され、プラグインを介してカスタム機能を簡単に追加できます。

一部のツールとフレームワークでは、新しい語彙を学習し、特定の方法でアプリを構造化する必要がありますが、Ractiveはその逆ではなく、機能します。また、他のライブラリともうまく統合できます。

サンプルアプリ

サンプルアプリを使用して、 開発者のApeeScapeデータベース スキルに基づいています。私たちのアプリには2つのビューがあります：

• 検索：インライン検索ボックス付きのスキルリスト
• 結果：開発者のリストを含むスキルビュー

開発者ごとに、名前、写真、簡単な説明、スキルのリストが表示されます（各スキルは対応するスキルビューにリンクされます）。

（注：アプリケーションのオンライン作業インスタンスとソースコードリポジトリへのリンクは、どちらもこの記事の最後にあります。）

Ractiveフレームワークへの主な焦点を維持するために、通常は必要ないくつかの簡略化を採用します ない 本番環境で実行する：

• デフォルトのテーマ。 アプリのスタイルに合わせてテーマをカスタマイズするのではなく、デフォルトのテーマでBootstrapを使用してスタイリングします。
• 依存関係。 依存関係を、グローバル変数を定義する個別のスクリプトとして追加します（ES6モジュール、CommonJS、または開発用の適切なローダーを備えたAMD、および本番用のビルドステップを使用するのではありません）。
• 静的データ。 ApeeScapeサイトの公開ページをスクレイピングして作成した静的データを使用します。
• クライアント側のルーティングはありません。 これは、ビューを切り替えてもURLが同じままであることを意味します。一部の小さなインタラクティブコンポーネントでは問題ないかもしれませんが、SPAでは絶対にそうすべきではありません。 Ractiveにはルーターの実装が組み込まれていませんが、次に示すように、サードパーティのルーターで使用できます。 この例 。
• HTMLのスクリプトタグ内で定義されたテンプレート。 これは、特に小さなアプリケーションにとって必ずしも悪い考えではなく、いくつかの利点があります（シンプルであり、たとえば国際化のために、これらのクライアント側テンプレートをサーバー側テンプレートと一緒に処理できます）。ただし、より大きなアプリの場合は、事前コンパイルの恩恵を受けることができます（別名、 事前解析 内部JS表現へのテンプレート。

Webアプリを始めましょう

さて、それでは、構築を始めましょう アプリ 。これを繰り返し実行し、小さな機能を1つずつ追加し、それらに遭遇したときに概念を調査します。

まず、次の2つのファイルを含むフォルダーを作成します。index.htmlおよびscript.js。私たちのアプリは非常にシンプルで、file://から動作します開発サーバーを起動する必要性を回避するためのプロトコル（必要に応じて起動できますが）。

検索ページ

まず、ユーザーがApeeScapeデータベースで一致する開発者を見つけるためのスキルを選択できる検索ページを実装します。

HTMLスケルトン

このささいなHTMLページから始めましょう：

ApeeScape検索の読み込み中...

では、ここでの魔法は何ですか？実はとても簡単です。ルート要素にいくつかのコンテンツ（Bootstrapアニメーションプログレスバーですが、アニメーションGIFなど）を直接追加しました。スクリプトの読み込み中、ユーザーには読み込みインジケーターが表示されます（JavaScriptに依存していないため、すぐに表示できます）。ただし、Ractiveアプリが初期化されるとすぐに、Ractiveはルート要素のコンテンツを上書きし（したがって、プリロードアニメーションを消去し）、レンダリングされたテンプレートを使用します。このようにして、静的HTMLの一部と0行のロジックだけでこの効果を実現できます。かなりかっこいいと思います。

結論

ここで私たちが達成したことと、それをどれほど簡単に達成したかを考えてください。非常に包括的なアプリがあります。スキルのリストが表示され、スキルをすばやく検索でき（ユーザーが検索ボックスに入力すると、スキルリストのインタラクティブな更新もサポートされます）、特定のスキルに移動したり戻ったりできます。選択した各スキルの開発者。さらに、任意の開発者によってリストされた任意のスキルをクリックして、そのスキルを持つ開発者のリストに移動できます。そして、80行未満のHTMLと40行未満のJavaScriptですべてを実現します。私の考えでは、それは非常に印象的であり、Ractiveのパワー、エレガンス、シンプルさについて多くを語っています。

アプリの動作バージョンはオンラインで入手できます ここに 完全なソースコードは公開されており、利用可能です ここに 。

もちろん、この記事では、Ractiveフレームワークで何が可能かについての表面をかろうじてかじっただけです。これまでに見たものが気に入ったら、始めてみることを強くお勧めします Ractiveの60秒のセットアップ そして、Ractiveが提供するすべてのものを自分で探索し始めます。