ActionWeb。 非同期インターネット。

2005年2月18日のJesse James Garrettの記事「Webアプリケーション開発への新しいアプローチ」でAJAXが最初に言及されてから4年が経過しました。 この間、おそらくすべてのWeb開発者がこのテクノロジーを少なくとも1回は試したことがあり、通常のインターネットユーザーは、動的なフォーム検証、検索バーでのクエリの自動補完、ポップアップコンテキストメニュー、その他の最近の突発的なWeb資金によるインタラクティブな喜び、および最新のJavaScriptフレームワークに驚かされなくなりましたこのようなスクリプトの開発は、プログラマーにとって桁違いに速く、効率的で、快適です。 しかし、なぜこれまでのところ、開発中のWebサイトの大部分が、コンテンツをダウンロードするための標準モデルに準拠しており、AJAXプラットフォームに完全に切り替えていないのでしょうか？ コンテンツブロック、JavaScriptファイル、CSS、およびほとんどのHTMLマークアップのみを更新する必要がある場合、内部リンクをクリックするたびにページ全体をリロードするのはなぜですか？





いくつかの理由があります。



-AJAXブラウザーでリソースを開くたびに、ユーザーは「開始点」から作業を開始します。 ほとんどの場合、そのようなアプリケーションの状態はブラウザのアドレスバーに表示されません

-動的にロードされたコンテンツは検索ロボットによって処理されません

-非同期Webアプリケーションの開発は、静的モデルを使用するよりもはるかに複雑で時間がかかります

-AJAXアプリケーションと標準ブラウザツールの統合の欠如。 ブラウザのボタンを使用してこのようなリソースをナビゲートしたり、動的にロードされたサイトページをブックマークしたり、新しいブラウザタブで動的コンテンツへのリンクを開いたりすることはできません

-「シック」クライアントを使用すると、ユーザーのコンピューターのプロセッサの負荷と必要なRAMが大幅に増加します。

-ユーザーのブラウザでJavaScriptが無効になっている場合、AJAXアプリケーションは失敗します



上記の問題を克服するには、まったく新しいコンセプトが必要になります。これをActionWebと呼びます 。 基本的に、ActionWeb（当時のAJAXなど）は新しいテクノロジーを提供せず、既知のテクノロジーの使用原理を変更するだけです。 概念の主な論文を提出します。



1.同じデータが特別な必要なしに複数回ロードされることはありません。ページ全体のリロードは例外的な場合にのみ発生します

2.ユーザーと検索エンジンの観点から見たActionWebアプリケーションは、通常のWebサイトと変わりません

3.アプリケーションのクライアント部分のプレゼンテーション層とビジネスロジック層の分離

4.ビジネスロジック層はプレゼンテーション層から見えません。開発者はプレゼンテーションコンポーネントのみをプロジェクトからプロジェクトに変更します



上記で定義したAJAXアプリケーションの問題と、 nikitaeremin.com Webサイトを作成するときに実装される、ActionWebコンセプトの使用を考慮に入れた、それらを解決するメカニズムを考えてみましょう。



問題：ユーザーが「開始点」から作業を開始するたびに、AJAXリソースの現在の状態がブラウザーのアドレスバーに表示されません。

解決策：ブラウザーのアドレスバーのURLを変更すると、ページがリロードされます。 この規則には1つだけ例外があります。再起動せずに、アドレスバー（location.hash）のハッシュを変更できます。つまり、＃記号とその後ろにあるすべての記号を削除します。 アドレスバーにはnikitaeremin.com/#projects/persik/のようなものがあり、ActionWebアプリケーションは初期化時にハッシュを抽出し、それに応じて状態を形成します。



問題：動的にロードされたコンテンツが検索エンジンで処理されない

解決策： Webリソースを参照するとき、検索ボットはJavaScriptを受け入れません。 ページのソースHTMLコードをスキャンすると、内部リンクに移動し、それらのアドレスnikitaeremin.com/#projects/persik/はメインページへの移行を意味します。 解決策は、リンクをソースコードにそのまま残し、内部リンクと外部リンクに分割することです。 たとえば、リンクにcssクラスを追加することで分割できます。 ActionWebアプリケーションが初期化されると、イベントハンドラーが指定されたクラスのリンクにアタッチされます。これにより、コンテンツが動的に読み込まれ、ブラウザーのアドレスバーのハッシュが変更されます。 しかし、ユーザーが ActionWebアプリケーションのソースコードでインデックス化された検索リンクnikitaeremin.com/projects/persik/をクリックするとどうなりますか？ nikitaeremin.com/#projects/persik/へのリダイレクトが対応するページに配置され、メインページへの遷移が発生し、アプリケーションはアドレスバーのハッシュに基づいてその状態を形成します。



問題： AJAXアプリケーションと標準ブラウザツールの統合の欠如

解決策：アドレスバーを変更する上記の手法を使用すると、ブックマークに追加する問題は自動的に解決されます。 新しいブラウザタブでアプリケーションの内部AJAXリンクを開くことができないという問題も解決されます。 ActionWebアプリケーションで、内部リンクを右クリックし、ユーザーが通常のリンクをクリックすると、ブラウザーは静的なサイトで操作するのと同じように動作します。 ブラウザー機能を前後に復元するには、2つの方法があります。 最初の方法は、これらの目的のためだけに記述されたjQueryの履歴プラグインを使用することですが、このスクリプトはブラウザ間の互換性がなく、主にInternet Explorerで正しく動作しません。 2番目の方法は、アドレスバーへのすべての変更をJavaScript配列に保存し、簡単な操作を使用して、アプリケーションページに直接戻るボタンと進むボタンを実装することです。



問題： AJAXアプリケーションの開発は、静的モデルを使用するよりも桁違いに複雑です

解決策：アプリケーションのクライアント部分のプレゼンテーション層とロジック層の分離。 このアプローチでは、プレゼンテーションコンポーネントのみがプロジェクトごとに変化し、サーバーとの対話、情報の受信および処理のすべての機能はエンジン内で「保護」され、十分なレベルの抽象化を提供し、開発者はそれらについて考える必要はありません。 ロードされたコンテンツページのキャッシュ、内部リソースリンクのクラス名など、アプリケーションのビジネスモデルに関連するいくつかの機能 初期化中にエンジンに渡されるJSONオブジェクトで構成できます。







問題： RIAを使用すると、クライアントコンピューターのプロセッサの負荷が大幅に増加する

解決策： JavaScriptを使用する場合、プロセッサの負荷は主にプレゼンテーションレイヤーの飽和によるものです。特に、複数のアニメーション機能が相互に同時に、または非ロジックのレイヤーの機能で同時に実行される場合、負荷が過剰な場合、ブラウザーは単純に「ハング」します。 出力は、アプリケーションの重要なセクションでのチェーン関数呼び出しの実装です。 チェーンコールとは、複数の機能を同時に実行できないようにして、ユーザーのコンピューターに過剰な負荷がかかるのを防ぐことです。 ただし、このメカニズムをJavaScriptに実装するには、単に関数呼び出しを1つ下に置くだけでは十分ではありません。このような順次呼び出しリストに少なくとも1つのアニメーション関数がある場合は機能しません。 JavaScriptインタープリターが時間遅延操作（つまり、タイムアウト）に遭遇した場合、JavaScriptインタープリターはその完了を待つことを止めず、コードをさらに進めます。 jQueryで記述された簡単な例を次に示します。 アニメーション関数とロジック関数があり、アニメーション関数が作業を完了した後にのみロジック関数を実行する必要があるとします。

関数アニメーション（）{ 	
     $（ "＃elem"）。animate（{"width"： "300px"}、200、 "linear"、function（）{ 
        アラート（「アニメーションを最初に！」）; 
     }） 
 }  

関数ロジック（）{ 
    アラート（「ロジックファースト！」）; 
 }  

アニメーション（）; 
ロジック（）;

上記のコードを実行すると、最初のアラートは「ロジックが最初に！」になります。 アニメーションの完了が遅れます。 そして、目標を達成するには、コードを次のように書き換える必要があります。

関数アニメーション（）{ 	
     $（ "＃elem"）。animate（{"width"： "300px"}、200、 "linear"、function（）{ 
        アラート（「アニメーションを最初に！」）;  
        ロジック（）;     	
     }） 
 } 

関数ロジック（）{ 	
    アラート（「ロジックファースト！」）; 
 }  

アニメーション（）;

しかし、このアプローチでは、ActionWebコンセプトの4番目の論文は満たされません。 Persikエンジンでビジネスロジック関数の匿名呼び出しを実装するには、ビジネスモデルのコンポーネントとプレゼンテーションレイヤーを接続するチェーンメソッドを記述する必要がありました。 ビジネスロジックレイヤーでのチェーンメソッドの使用は次のとおりです。

 engine.chain（func1、[vars1]）。chain（func2、[vars2]）。chain（func3、[vars3]）。start（）;

さらに、チェーンの各機能では、出口点を明示的に定義する必要があります。

関数アニメーション（）{ 	
     $（ "＃elem"）。animate（{"width"： "300px"}、200、 "linear"、function（）{ 		
        アラート（「アニメーションを最初に！」）;         		
         animation.next（）;     	
     }） 
 }

関数ロジック（）{ 	
    アラート（「ロジックファースト！」）; 	
     logic.next（）;
 } 

 persik.chain（アニメーション）.chain（ロジック）.start（）;

この例からわかるように、チェーン関数は、どこから呼び出されたのか、制御を転送する関数を知りません。 このアプローチには2つの主な利点があります。

1.開発者は、前のチェーン関数が完了した後にのみチェーン関数の実行が開始されると確信しています。 同時に、彼は関数の実行の一貫性を決定し、アニメーション関数のどこにでも次の（）呼び出しを配置できます。

2.匿名関数呼び出しの原則が実装され、プレゼンテーションモデルからビジネスモデルを最大限に分離します。



問題： JavaScriptがユーザーのブラウザーで無効になっている場合、AJAXアプリケーションは失敗します

解決策：本質的に、ActionWebリソースとは何ですか？ これは、非同期データ読み込みメソッドを使用するインタラクティブなWebアプリケーションであり、その状態はほとんどの場合、URLによって一意に決定されます。 JavaScriptをオフにすると何が変わりますか？ アプリケーションの状態はクライアント側で形成されず、データを非同期的にダウンロードする機能が利用できなくなり、アニメーション機能は実行されません。 この場合、サーバー側でアプリケーション状態を作成し、アニメーション関数からオブジェクトの最終状態（オープン/クローズ）を抽出し、それらを個別のクラスで選択し、クラスを使用してDOMオブジェクトの状態を形成できます（最も単純な例は現在のメニュー項目を強調表示します）、コンテンツの非同期読み込み従来のものに置き換えられ、その結果、アーキテクチャの観点から最も一般的なWebリソースを取得します。 サーバーでは、ユーザーのブラウザーでjsが有効になっているかどうかを判断する必要があり、この問題に基づいて、サイトのActionWebバージョンまたは通常の静的バージョンのいずれかを決定します。 もちろん、このアプローチの実装はすべてのAJAXアプリケーションで可能というわけではなく、静的バージョンではコンテンツをロードおよび表示するための機能のみが使用可能になりますが、最終的に開発者は、ユーザーのブラウザーの設定に関係なく、ユーザーが最小限のWebサイト機能を確実に受け取ることを保証します。







その結果、作成されたリソースは検索ロボットによって認識され、ユーザーのブラウザーでJavaScriptがオフになっても機能が失われることはありません。AJAXにより高速に動作し、JavaScriptアニメーションを使用することでプレゼンテーションの魅力が高くなります。