「Perfect Ajax」-実際のクライアント/サーバーWebアプリケーションを構築するための新しいアプローチ

「Perfect Ajax」-Webアプリケーションを構築する新しいアプローチ。Webサーバーは1行のHTMLコードを生成せず、Webサービスを通じてのみ外部とやり取りします。 クライアントインターフェイスは、クライアントHTML、CSS、JavaScriptに基づいてのみ実装されます。



この記事は2つの部分で構成されています。 最初の部分-より活発で挑発的な、私は問題に興味を持ち、Perfect Ajaxテクノロジーについて話をし、プロジェクト「Synthesis Interactive Knowledge Testing System」（サーバー側JavaScriptの使用など、多くの興味深い機能を備えたMozilla Rhinoプラットフォーム、プロトタイプ指向のORM、およびセマンティックWebのクエリ言語であるSPARQLのサポート）。



第二部-より退屈なものは多くの技術的な詳細が含まれており、次回リリースされます。



良い伝統によれば、建設的な批評家を含む議論のすべての参加者にプラスを授与しますが、その意見には同意しません。





推測してみてください：Webアプリケーションはどのアーキテクチャに属しますか？



クライアントサーバーと通信しますか？ 私はあなたがそのように答えることを期待しました:-)



さて、それを理解しましょう。 クライアント/サーバーアーキテクチャには、次のものがあります。

• サーバー - データの保存とアプリケーションのビジネスロジックの実装を担当します。
  
  
  
  
• クライアント - ユーザーとの対話を担当します ^[1] 。
  
  
  
  

サーバーでのビジネスロジックの実装とクライアントでのユーザーインタラクションは明確に分離されています。



クライアント/サーバーアーキテクチャの利点は明らかです。 私たちは皆それらを知っています：

1. ビジネスロジックはユーザーインターフェイスと混ざり合いません。
2. コマンドラインインターフェイス、ウィンドウ化されたWindowsインターフェイス、Flash、Webインターフェイス、モバイルインターフェイスなど、さまざまなユーザーインターフェイスで複数のクライアントを実装できます。
3. クライアントコンピューターはリソース集約型ではありません。
4. 等

しかし、Webアプリケーションはクライアントサーバーアーキテクチャに関連していますか？



実際、Webアプリケーションには、アプリケーションのビジネスロジックを担当するサーバーがあります。



しかし！ インターフェイスの実装はクライアントの責任ではなく、サーバーの責任でもあります。 クライアントはクライアントフォームを処理しています。 サーバーは、ユーザーインターフェイスのHTMLコードを生成します。



クライアント、つまり ブラウザは、インターフェースの既製のHTMLコードのみを視覚化します。 実際、これはモニターをサーバーに接続し、そのモニターをクライアントに宣言することと同じです...

注：



ただし、ここには微妙な点が1つあります。 2つの概念を区別する必要があります：WebアプリケーションとブラウザーWebサーバーシステム。 Javaアプリケーションが JVM 内で実行されるのと同様に、WebアプリケーションはブラウザとWebサーバー上で実行され 、.Netアプリケーションは .Net Framework 内で実行され、 HTTP は TCP / IP 上で実行されます。



ブラウザWebサーバーシステムには実際にクライアントサーバーアーキテクチャがあります。Webサーバーはリクエストを受信して​​処理し、ブラウザは結果を視覚化します。



ただし、ここでは「ブラウザ-Webサーバー」システムについてではなく、その内部で実行されるWebアプリケーションについて説明します。

このアプローチが本格的なクライアント/サーバーアーキテクチャと呼ばれることはまずありません。 それには多くの欠点があります：

1. ビジネスロジックとユーザーインターフェイスの混合。
2. 複数のユーザーインターフェイスを実装することは困難です。
3. サードパーティのプログラムはサーバーにアクセスできません（特別なAPIが記述されていない限り）。
4. インターフェイスの処理の負荷のほとんどはサーバーにあります。
5. 等

しかし、私たちは歴史的にそのようなアーキテクチャの例を知っています。 メインフレームは70年代に一般的でした。 メインフレームは、ワークステーション（クライアント）が接続された非常に大きな鉄箱（サーバー）です。 さらに、ワークステーションはキーボードを備えた単なるモニターでした。 また、ワークステーション上のクライアントアクションは、サーバー上で処理されました（キーストロークや画面レイアウトの処理などもあります^[2]） 。 さて、私たちは今日のメインフレームの人気を知っています...



もちろん、最新のWebアプリケーションでは、インターフェイスロジックの一部はJavaScriptを使用してクライアントに実装されます。 データの一部はAjaxを使用してロードされ、クライアントで視覚化されます。



ただし、それでも、ユーザーインターフェイスに関連する多くのアクションはサーバー上で実行されます。 Ajaxをさまざまな方法で使用すると、状況がさらに悪化します。 サーバーとクライアントのコード間のインターフェースの実装がばらばらになります。

そこで、私は「Perfect Ajax」アプローチを提案します。これは、Ajaxの概念を論理的に発展させ、 Webアプリケーションのユーザーインターフェイスを実装するサーバーの使用を完全に放棄することを要求します。

Perfect Ajaxのアプローチは、次の原則に基づいています。

• Webサーバー：
  • アプリケーションのビジネスロジックのみを実装し、1行のHTMLコードを生成しません。
    
    
    
    
  • Webサービスを介してクライアントと対話します 。テキスト要求を受信し、データのみを返します。
    
    
• Webユーザーインターフェイス：
  • クライアント HTML、CSS、JavaScriptに基づいてのみ実装されます。
    
    
    
    
  • Webサービス上のオブジェクト指向ラッパーライブラリを介してWebサーバーと対話します。
    
    
    
    
  • セマンティックレイアウトのみが使用されます。
    
    
    
    コントロール（タブ、メニュー、ツリー）は、高レベルのHTML構造によって記述されます。
    
    
    
    
  • コントロールのライブラリは 、要素のHTMLコードを変更せずに、必要なスタイルとイベントハンドラをアタッチするだけで、HTMLコンストラクトに対応するコントロールの外観と機能を提供します。
    
    
• サードパーティの開発者は、HTMLだけでなく、Flash、Windows、Macなどでもバージョンのユーザーインターフェイスを実装できます。

プロジェクトの「Perfect Ajax」

このアーキテクチャを、プロジェクト「知識の対話型テストシステム「 合成 」」の例として説明します。

サーバー

「Perfect Ajax」の概念では、サーバーは単一の条件を満たす必要があります。つまり、1行のHTMLコードを生成せず、Webサービスを介して外部と通信します。 他のすべての点で、その実装は無制限です。



ここで、プロジェクトのサーバー構造について説明します。 Mozilla Rhinoプラットフォームでのサーバー側JavaScriptの使用、プロトタイプ指向のORM、セマンティックWebのクエリ言語であるSPARQLの使用など、多くの興味深い機能があります。



ただし、サーバーの実装は当社とは完全に異なる場合があります。

サーバーアーキテクチャ

• DBMS-データを保存します。
  
  
  
  
• ビジネスロジックのプロトタイプオブジェクト指向コア -オブジェクトモデルとアプリケーション機能を実装します。
  
  
  
  
• ORM-データベースをビジネスロジックのプロトタイプコアに関連付けます。
  
  
  
  
• Webサーバー -Webサービスを介して外部のプログラム機能を開きます。
  
  

DBMS

• すべてのデータは通常のリレーショナルデータベースに保存されます。
  
  
  
  
• さらに、「純粋な」SQLのみが使用され、特定のDBMS（ストアドプロシージャなど）のアドオンは使用されません。 これにより、データベースは1つまたは別のDBMSから独立します。
  
  
  
  
• データベースは、プロトタイプ指向のORMを介して、アプリケーションのビジネスロジックのオブジェクトコアと接続されています。
  
  

ビジネスロジックの中核

• アプリケーションオブジェクトモデル全体とそのビジネスロジックは、プロトタイプ指向のカーネルに囲まれています。
  
  
  
  
• カーネルは、 Mozilla Rhinoプラットフォームに基づいて、サーバー側のJavaScriptで記述されています。
  
  
  
  
• 多くの開発者に過小評価されているにもかかわらず、JavaScriptは驚くほど強力で、柔軟で、美しい言語であり、JavaやC＃などのモンスターの柔軟性と機能よりも優れている場合もあります。 そして、プロトタイプ指向のOOP、オブジェクトのようなハッシュ、関数型プログラミング、クロージャなど、その機能を最大限に活用します。
  
  
  
  
• また、プロトタイプ指向のJavaScriptパラダイムにより、ORMを使用してデータベースをより柔軟に操作できます。
  
  
  
  
• Mozilla RhinoはJavaScriptをJVMバイトコードにコンパイルします。
  
  
  
  これにより、サーバー側のJavaScriptは「それ自体」にはなりませんが、Javaの世界での豊富な開発をすべて使用できます。
  
  
  
  
• 一般的に、Mozilla Rhinoに基づいたサーバーサイドJavaScriptは別の大きなトピックであり、この問題について多くの記事を書きます。
  
  

プロトタイプ指向ORM

• ORMは、リレーショナルデータベースをビジネスロジックのプロトタイプのオブジェクト指向コアに接続するために使用されます。
  
  
  
  
• , . : , 10 , 10
  
  
  
  .
  
  
  
  
• ORM - — !
  
  
  
  , . , , - ORM (., , « »).
  
  
  
  
• ORM .
  
  
  
  , , ; , .
  
  
  
  , SPARQL — Semantic Web.
  
  
  
  
• , . ORM ORM. .
  
  
  
  
• - ORM — , .
  
  

Web-

• Web- - — - web-.
  
  
  
  
• HTML-.
  
  
  
  
• Web- , .
  
  
  
  , , web- .

, .



, «» web-.



.

• — - , .
  
  
  
  
• - — - web-, .
  
  
  
  
• — () HTML-;
  
  
  
  
• — HTML- .

— - JavaScript-, web-:

• .
  
  
  
  
• web- -.
  
  
  
  
• () .
  
  
  
  
• web- .
  
  
  
  . -, GMaps, YouTube .., ; .
  
  
  
  , , , , .
  
  
  
  
• .
  
  
  
  , . , , , .
  
  
  
  
• .
  
  

• ( web-, ) - web-.
  
  
  
  
• , web- : .
  
  
  
  , - - web-. .
  
  
  
  

  :
  
  
  
  3 «» .
  
  
  
  web-, - Sintez
  
  
  
  .
  
  
  
  // <br> var objStudent1 = Sintez.getStudent ("this.firstName = '' and this.secondName = ''");<br> // 3 "" <br> var objClass1  = Sintez.getClass ("this.getClassNuber() = 3 and this.liter = ''");<br> // <br> objClass1.addStudent (objStudent1);<br>
  
  
  
  
  
  
  
  - web-, .

  
  
  
• , , - web- JavaScript, : .Net, Java, Delphi, Flash .
  
  
  
  - -, .
  
  
  
  
• , , .
  
  
  
  , , - .
  
  
  
  - , , , .

• xHTML, CSS JS.
  
  
  
  , xHTML/CSS/JS .
  
  
  
  
• ; – .
  
  
  
  , HTML- , , , ;
  
  
  
  « Ajax» !
  
  
  
  
• (, , ..) HTML-.
  
  
  
  , , , div
  
  
  
  ’.
  
  
  
  
• HTML .
  
  

• HTML- .
  
  
  
  
• HTML- , .
• HTML- , JS- .
  
  
  
  .
  
  
  
  HTML-, « » JS CSS-.
  
  
  
  

  :
  
  
  
  , HTML-: .
  
  
  
  <ul id = "ulTree1"><br>  <li><br>    1<br>   <ul><br>    <li><br>      1-1<br>    </li><br>    <li><br>      1-2<br>    </li><br>   </ul><br>  </li><br>  <li><br>   <!--...--><br>  </li><br> </ul><br>
  
  
  
  
  
  
  
  , JS- Controls.Tree
  
  
  
  . .
  
  
  
  // <br> var objTree1 = new Controls.Tree ($("ulTree1"));<br> // , selectAll () <br> objTree1.selectAll ();<br>
  
  
  
  
  
  
  
  , Controls.Menu
  
  
  
  :
  
  
  
  // <br> var objMenu1 = new Controls.Menu ($("ulTree1"));<br>
  
  
  
  

  
  
  
  
  
• : «HTML — ()».
  
  
  
  

« Ajax» — .

1. ↑ - . - « — », , , .
2. ↑ , « », , . web- Ajax.

.

, «Ajax-» «Hivext: ».