Geekly Articles each Day

RIAアプリケーションを作成するための最新技術の概要

はじめに


数年前、インターネットアプリケーションの作成分野では、標準のHTML / JavaScript / CSSテクノロジーから、デスクトップアプリケーションと外観や動作が変わらないプログラムを実行できるプラットフォームに移行する傾向がありました。 このタイプのソフトウェアは、一般に「リッチインターネットアプリケーション（ RIA ）」と呼ばれ、「リッチインターネットアプリケーション」を意味します。 一部のRIAテクノロジーはかなり前（90年代の終わり）にリリースされたという事実にもかかわらず、3〜4年前には広く使用されていました。
RIAの機能について話すことは始める価値があります HTMLベースのアプリケーションとは概念的に区別されています。 通常のサイトサービスは、ハイパーリンクを介して別のページに切り替え、Webブラウザーを使用してフォームをサーバーに送信するという原則に基づいて機能します。 つまり、このようなアプリケーションの作業は、 シンクライアントを 使用したクライアントサーバーアーキテクチャに集中しています 。 HTMLは、ドキュメントのマークアップ言語であり、ブラウザーで表示されるため、理想的です。 ユーザーアクションのシーケンスは、サーバーへのリクエストの継続的な送信です。 このアプローチには、いくつかの問題があります。
  1. アプリケーションセッションとサーバーとの同期の間でユーザーデータを保存します。
  2. 各ユーザーのアクションではなく、必要な場合にのみサーバーとの間でデータを送受信する問題。
  3. ネットワーク接続がないときにアプリケーションを起動する問題。

RIAコンセプトはどのようなソリューションを提供しますか？ アーキテクチャの観点から、彼女はそのようなプログラムをシッククライアントを使用するアプリケーションのカテゴリに変換します。 すべてのRIAには同様の機能があります。中間部分が存在し、ネットワーク経由でクライアントに送信され、サーバーとやり取りし、HTMLに比べてはるかに優れたユーザーインターフェイスを表示します。 図1に、HTMLおよびRIAアプリケーションの場合のユーザーインタラクションを整理する原則を示します。
画像
図1-HTMLおよびRIAアプリケーションの原理
ユーザーデータを保存する問題の解決策は、RIAプラットフォーム（RIAアプリケーションを起動するためのプラットフォームに依存しない環境）を犠牲にして発生します。 ネットワークからダウンロードされた中間部分は、それにアクセスして情報を保存および読み取ります。 ここからは、クライアント側のキャッシュにより、必要な場合にのみサーバーとのデータの送受信が可能になります。 不安定な接続の問題も解決されています。 RIAプラットフォームは、ユーザーのコンピューターにアプリケーションをインストールできます。 これは、ディスクスペースがプログラムファイルに割り当てられ、ネットワークなしで起動できることを意味します。 したがって、RIAの主な特徴は次のとおりです。

インターネット標準の段階的な開発により、実際にそのような技術が実装されています。 現時点で最も有名なものは次のとおりです。
役職
製造会社
発売日

Google Web Toolkit（GWT）
Google Inc.
2006
Adobe Flex / AIR
Adobe Inc.
2008年
Javafx
サン/オラクル
2009
Silverlight

マイクロソフト株式会社
2007年
Javaアプレット
サン/オラクル
1995

表1-最も一般的なRIAテクノロジー

これらの製品の選択は、インターネットの普及と、ユーザーがRIAを起動するためのインストール済みプラットフォームの可用性によるものです。 この記事の以下のセクションでは、各技術の主な技術的特徴を示すコンパクトなアプリケーションを作成します。 プログラムのタスクは、一定期間後にアプリケーションサーバーの負荷の簡単な統計を取得し、それをユーザーに表示することです。 各リクエストへの応答として、サーバーはJSONにパックされた次のデータを送信します 。

したがって、デモアプリケーションのクライアント部分は異なり、サーバー側ではJavaサーブレットがリクエストを処理します。

GWTアプリケーション


テクノロジーの簡単な説明。 RIA開発者はJavaプログラムのインターフェースとロジックを作成し、GWTはソースコードを慎重に最適化されたJavaScriptにコンパイルします。 スクリプトファイルはWebページに接続し、起動時にアプリケーションインターフェイスを表示します。 同時に、まず、特別なブラウザープラグインの問題が解決されます。実際、GWTの場合、Javascriptスクリプトを有効にする必要があります（すべての最新ブラウザーがサポートします）。 第二に、GWTには本格的なRIAを作成するためのコンポーネントの大きなライブラリがあり、その数は開発者の大規模なコミュニティのおかげで絶えず増加しています。 これらのコンポーネントに基づいて、ブラウザで従来のウィンドウインターフェイスを作成できます。
利点：

さらに、Javaでの作業では、次を使用できます。

ライブラリの内容に関しては、GWTには以下が含まれます。

短所

アプリケーションコードスニペット
currentRequest = requestBuilder.sendRequest(query.toString(), new RequestCallback() {
public void onResponseReceived(Request request, Response response) {
pleaseWaitLabel.setVisible(false);
if (response.getStatusCode() == 200 && response.getText() != null && !response.getText().equals("")) {
JSONValue resVal;
JSONObject resObject;
JSONString serverName;
JSONNumber totalMemory;
JSONNumber freeMemory;
JSONNumber maxMemory;
JSONNumber threadCount;
try {
resVal = JSONParser.parse(response.getText());
} catch (JSONException e) {
Window.alert(" . ");
return;
}
if ((resObject = resVal.isObject()) == null) {
Window.alert(" . ");
return;
}
if ((serverName = resObject.get("serverName").isString()) == null) {
Window.alert(" . ");
return;
}
…..............................................................................................................
setServerName(serverName.stringValue());
setTotalMemory(Integer.toString((int) totalMemory.doubleValue()));
setFreeMemory(Integer.toString((int) freeMemory.doubleValue()));
setMaxMemory(Integer.toString((int) maxMemory.doubleValue()));
setThreatCount(Integer.toString((int) threadCount.doubleValue()));
} else {
Window.alert(" . ");
}
}
public void onError(Request request, Throwable exception) {
pleaseWaitLabel.setVisible(false);
Window.alert(" . ");
}
});

Flex / AIRアプリケーション


テクノロジーの簡単な説明。 Adobe Flexは、ActionScript 3言語を使用してAdobe FlashプラットフォームでRIAを開発するための一連のユーティリティであり、Flashには、インタラクティブ機能の点でHTMLから得られる機能よりも多くの機能があります。 それにもかかわらず、Flashでの開発は、単純なプログラマにとって非常に複雑なプロセスです。 Flashはよりデザイナーを対象としています。 Flexは、RIAを開発するソフトウェア方法を提供することにより、この障壁を取り除きます。 XMLベースの言語であるMXMLを使用してユーザーインターフェイスの形式と動作を記述し、強力なオブジェクト指向プログラミング言語であるActionScript™3を使用して、クライアントプログラムの論理的な動作モデルを作成します。
メリット
Flexで作成されたRIAアプリケーションは、AdobeFlash®Playerソフトウェアを使用してブラウザーで実行できます。OSにクロスプラットフォームAdobe AIR™アプリケーションがある場合は、通常のプログラムとして実行できます。 これにより、Flexアプリケーションは、デスクトップオペレーティングシステムだけでなく、多くの一般的な種類のブラウザーでの作業をサポートします。 AIRを使用する場合、FlexアプリケーションはローカルPCデータとシステムリソースにアクセスできます。 ただし、AIRセキュリティモデルでは、隔離された環境でアプリケーションを実行することによるユーザー情報とシステムファイルの損傷は許可されません。 Flash PlayerおよびAdobe AIRは、Adobe.comから無料でダウンロードできます。 現在、 99％のPCにはFlash Playerが最新バージョン（9または10）の1つが搭載されています。 ユーザーインターフェイスは、比較的シンプルで直感的な言語であるMXMLを使用して作成されているため、経験豊富な開発者がすぐに習得できます。
短所

アプリケーションコードスニペット
<mx:HTTPService
contentType="application/x-www-form-urlencoded"
id="service"
method="GET"
resultFormat="text"
showBusyCursor="true"
url="/status"
fault="httpFault(event)"
result="httpResult(event)"
useProxy="false"
/>
public function httpResult(event:ResultEvent):void {
//get the raw JSON data and cast to String
pleaseWaitLabel.setVisible(false);
var jObj:Object = JParser.decode(event.result.toString());
serverNameValueLabel.text = jObj.serverName;
totalMemoryValueLabel.text = jObj.totalMemory;
freeMemoryValueLabel.text = jObj.freeMemory;
maxMemoryValueLabel.text = jObj.maxMemory;
threadCountValueLabel.text = jObj.threadCount;
}
public function httpFault(event:FaultEvent):void {
Alert.show(" , ");
timer.stop();
}

Javaアプレットアプリケーション


テクノロジーの簡単な説明。 Javaアプレットは、バイトコードJavaアプリケーションです。 Javaアプレットは、Java仮想マシン（JVM）を使用するWebブラウザー、またはスタンドアロンのアプレットテストツールであるSunのAppletViewerで実行されます。 Javaアプレットは1995年にJava言語の最初のバージョンで導入されました。Javaプログラミング言語で作成されますが、JythonなどのJavaバイトコードにコンパイルされる他の言語で作成することもできます。
メリット

短所

アプリケーションコードスニペット
private void updateServerStatus() {
clearStatistics();
pleaseWaitLabel.setVisible(true);
Timer t = new Timer(3000, new AbstractAction() {
public void actionPerformed(ActionEvent actionEvent) {
try {
pleaseWaitLabel.setVisible(false);
URLConnection conn = new URL(url).openConnection();
String json = readStreamToString(conn.getInputStream(), "UTF-8");
JSONObject j = new JSONObject(json);
serverNameValueLabel.setText(j.getString("serverName"));
totalMemoryValueLabel.setText(j.getString("totalMemory"));
freeMemoryValueLabel.setText(j.getString("freeMemory"));
maxMemoryValueLabel.setText(j.getString("maxMemory"));
threadCountValueLabel.setText(j.getString("threadCount"));
} catch (Exception e) {
e.printStackTrace();
}
}
});
t.setRepeats(false);
t.start();
}

JavaFXアプリケーション


テクノロジーの簡単な説明。 JavaFXは、パーソナルコンピューターおよびモバイルデバイスで実行できるRIAを作成するためのプラットフォームです。 JavaFXテクノロジーを使用すると、マルチメディアコンテンツ、ビジネスアプリケーションのグラフィカルユーザーインターフェイス、パーソナルコンピューターとモバイルデバイスのゲーム、豊富なグラフィックス、マルチメディアWebサイトなどを操作するためのアプリケーションを作成できます。JavaFXアプリケーションは、 宣言型プログラミング言語 JavaFX Scriptを使用して作成されます。 JavaFX Scriptアプリケーションを開発するには、JavaFX SDKをダウンロードしてインストールする必要があります。 JavaFX Scriptで記述されたコードから、任意のJavaライブラリにアクセスできます。 したがって、JavaとJavaFX Scriptの併用により、さまざまな問題を解決できます。たとえば、ビジネスアプリケーションのロジックをJavaで記述したり、グラフィカルユーザーインターフェイスをJavaFX Scriptで記述したりできます。 JavaFX Script言語で記述されたアプリケーションは、Javaランタイム1.5以降がインストールされているコンピューターで実行できます。 現在サポートされているオペレーティングシステムは、Windows、Mac OS X、GNU / Linux、およびSolarisです。
メリット

短所

アプリケーションコードスニペット
var parser = PullParser {
documentType: PullParser.JSON;
onEvent: function (e: Event) {
if (e.type==PullParser.INTEGER and e.name.equals("freeMemory")) {
freeMemoryValueLabel.text = Integer.toString(e.integerValue);
}
if (e.type==PullParser.INTEGER and e.name.equals("maxMemory")) {
maxMemoryValueLabel.text = Integer.toString(e.integerValue);
}
if (e.type==PullParser.TEXT and e.name.equals("serverName")) {
serverNameValueLabel.text = e.text;
}
if (e.type==PullParser.INTEGER and e.name.equals("threadCount")) {
threadCountValueLabel.text = Integer.toString(e.integerValue);
}
if (e.type==PullParser.INTEGER and e.name.equals("totalMemory")) {
totalMemoryValueLabel.text = Integer.toString(e.integerValue);
}
}
}

Silverlightアプリ


テクノロジーの簡単な説明。 Silverlightは、 Windows Presentation Foundationに似たグラフィカルシステムを提供し、マルチメディア、グラフィックス、アニメーション、および対話性を1つのソフトウェアプラットフォームに統合します。 XAMLおよびMicrosoft .NET言語で動作するように作成されました。 XAMLは、ベクターグラフィックスとアニメーションを含むページのレイアウトに使用されます。 このプラットフォームには、RIAで一般的なアニメーション、ベクターグラフィックス、オーディオビデオクリップを含むアプリケーションを実行できるブラウザープラグインが含まれています。
メリット

短所

アプリケーションコードスニペット
void refreshStatistics(object o, EventArgs sender)
{
WebClient proxy = new WebClient();
proxy.OpenReadCompleted += new OpenReadCompletedEventHandler(proxy_OpenReadCompleted);
proxy.OpenReadAsync(new Uri(uri));
}

void proxy_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
JsonObject jsObject = (JsonObject)JsonObject.Load(e.Result);
serverNameValueLabel.Text = jsObject["serverName"];
totalMemoryValueLabel.Text = jsObject["totalMemory"].ToString();
freeMemoryValueLabel.Text = jsObject["freeMemory"].ToString();
maxMemoryValueLabel.Text = jsObject["maxMemory"].ToString();
threadCountValueLabel.Text = jsObject["threadCount"].ToString();
}

結論


最新のRIAテクノロジーの比較とアプリケーション作成実験の結果に関する結論を表2に示します。さらに、各パラメーターの比較について詳しく説明します。
プラットフォーム

Gwt

フレックス/ AIR
Javafx

Javaアプレット

Silverlight

開発者

Google Inc.

Adobe Inc.

日
マイクロシステムズ

日
マイクロシステムズ

マイクロソフト

作成言語
用途

Java

Actionscript

JavaFXスクリプト

Java

C ++、
C＃、Visual Basic、

Object Pascalおよび多く
その他

サポート
ブラウザ
顧客

100％オン
Javascript

ブラウザの97〜98％

〜70％のブラウザ

〜70％のブラウザ

ブラウザの約50％

勉強時間
初心者向け
3-6時間
3-6時間
3-6時間
3-6時間
3-6時間
タイムオン
デモンストレーションの開発
申込み
〜1時間
〜2時間
〜3時間
〜1時間
〜3時間
免許

アパッチ
免許
2.0
Mozillaパブリック
ライセンス/アドビ
AIRユーザー
合意
JavaFXユーザー
救急車
合意
サン/オラクル
ユーザー
合意
Microsoftユーザー
救急車
合意
手段
開発
日食
（無料）
NetBeans（無料）
Adobe Flex（商用
手がかり
製品）
日食
（無料）
NetBeans（無料）
Eclipse（無料
でも）
NetBeans（無料）
Microsoft Web開発者
スタジオ（無料
でも）
作成
グラフィカルエディターのインターフェイス
開発ツール
はい（で
利用可能
コマーシャル
人間
プラグイン）
はい
いや
はい
はい

表2-RIAテクノロジーの比較
初心者のための学習時間。 この場合の初心者は、問題のテクノロジーになじみのない中級レベルのプログラマーです。 著者によると、必要なすべてのプログラムのインストール時間とドキュメントの読み取りを考えると、各アプリケーションの作成には3〜6時間かかります。
デモアプリケーションを開発する時間です。 この記事の著者は、アプリケーションの作成時に3つのテクノロジー、すなわちGWT、Adobe Flex / AIR、およびJavaアプレットに精通していました。 したがって、1つのプログラムの最大時間は3時間でした。 既知の技術を使用した作業は1〜2時間続きました。
クライアントブラウザのサポート。 クライアントにRIAを実行するために必要なプラットフォームと拡張機能がインストールされているという事実は、サイトhttp://riastats.comの統計によって判断できます。 ユーザーにリーチするリーダーはGWTとAdobe Flex / AIRです。 これは、最初のケースでは追加のプログラムをインストールする必要がないという事実によるものであり、2番目のケースでは、インターネットユーザーのコンピューターでのAdobe Flashプレーヤーの広範な使用が反映されています。
これに続いて、JavaFXおよびJava Appletsテクノロジーが続き、ユーザーの約70％をカバーしています。 彼らの仕事の主な条件は、PCにインストールされたJREの存在です。 JavaFXのライブラリはバージョン1.5以降に含まれており、アプレットのサポートは長い間存在していました。 ブラウザでJava Appletsテクノロジを起動しても問題はありませんでしたが、JavaFXの場合、作成者はこれを行うことができず、アプリケーションはウィンドウモードでのみ実行されました。 おそらくこれは、アプリケーションが最新のOperaおよびFirefoxブラウザーで実行を停止したJavaFXの最近の更新によるものです。
開発者向けのライセンスおよびエントリコスト。
  1. GWTはApache License 2.0の下でリリースされています。 ユーザーに、あらゆる目的でソフトウェアを使用する権利、変更されたコピーを自由に配布、変更、および配布する権利を与えます。 GWTは、開発者のサイトから無料でダウンロードできます。 GWTを使用して作成された製品は、どのような方法でもライセンスを取得できます。
  2. Adobe Flex / AIR。 Flex SDKはMozilla Public Licenseの下で利用でき、Adobe AIR SDKはAdobeとのユーザー契約の下で利用できます。 両方の製品は、開発者のサイトから無料でダウンロードできます。 Flex SDKおよびAIR SDKを使用して記述されたRIAは、任意のライセンスの下でリリースできます。
  3. JavaFX SDKは、SUN / ORACLEとのユーザー契約の一部として配布されます。 このライセンスは、JavaFXベースのアプリケーションの配布に特別な制限を課すものではありません。また、それらは商用のものでもあります。
  4. Javaアプレット。 Javaアプレットのコンポーネントは、JREライブラリの一部です。 これらは、SUN / ORACLEとのユーザー契約の一部として利用可能です。 JREは、製造元のWebサイトから無料でダウンロードできます。
  5. Microsoft Silverlightは、Microsoftとのユーザー契約の一部としてリリースされます。 Silverlight SDKを使用して記述されたプログラムに特別な制限を課しません。 SDKは、Microsoftから無料でダウンロードできます。

クライアント/サーバー相互作用の組織の特徴
一般的なケースでサーバー負荷統計を取得するタスクは、2つのステージで構成されます。 まず、サーバーにHTTPリクエストを送信し、次にサーバーの応答からデータを受信します。 すべての例で、2つのオブジェクトがアプリケーションのこれらのアクションを担当します。 1つ目はHTTP要求を作成し、応答が受信されると、2つ目のオブジェクトにデータを渡します。 次に、応答から統計を抽出し、ユーザーインターフェイスが更新されます。
HTTPリクエストの実装を担当するコンポーネントは、各テクノロジーの標準SDKライブラリに含まれています。 ただし、JSON応答から統計を抽出するコンポーネントでは状況が異なります。 GWT、JavaFX、SilverlightがSDKに含まれている場合、Flex / AIRはさらに、JSONでの作業にJSwoofライブラリ（ www.waynemike.co.uk/jswoof ）を使用し、Javaアプレットではorg.jsonパッケージ（ http ：//json.org ）Javaの場合。
クライアント/サーバー相互作用コードは、行数で比較できます。 結果を表3に示します。
プラットフォーム

Gwt

フレックス/ AIR
Javafx

Javaアプレット

Silverlight
行数
クライアントサーバーサーバーを整理するためのコード
相互作用
〜40
〜30
〜30
〜20
〜30

表3-クライアント/サーバー相互作用の組織のコードの行数の比較
ライブラリ内の必要なコンポーネントの存在。
デモアプリケーションを作成するには、2種類のコンポーネントが必要でした。

表4は、標準SDKに必要なコンポーネントの存在について説明しています。
テクノロジー
在庫状況
視覚コンポーネント
在庫状況
クライアントサーバーコンポーネント
相互作用
Gwt

はい
はい
フレックス/ AIR
はい
オプショナル
JSWoofがJSONを操作するために使用
Javafx

はい
はい
Javaアプレット

はい
オプショナル
org.jsonパッケージを使用して作業した
ジョンソン
Silverlight

はい
はい

表4-SDKコンポーネントの使用
Flex / AIRおよびJavaアプレットの場合、追加のライブラリを使用してサンプルが作成されますが、これらは標準SDKの一部ではありません。
ユーザーインターフェイスの説明メソッド
テクノロジーインターフェイスを説明するために、2つのアプローチが使用されます。

Silverlight、Adobe Flex / AIR、およびJavaFXで使用されるアプローチにより、インターフェイスの説明とアプリケーションのプログラムコードを分離できます。 この方向で、GWTの最新バージョンは、HTMLデザイナーとプログラマー間のコラボレーションを整理するためのUIBindツールを提供します。 ソースコードには、HTMLコードを含むファイルを含めることができます。HTMLコードは、埋め込みのユーザーインターフェイス要素です。 コンパイル段階で、これらはプログラムコードに関連付けられます。 これにより、HTMLでデザインを個別に操作できます。
技術文書と開発者コミュニティ。 各テクノロジー専用の情報リソースは、次の3つのカテゴリに分類できます。

GWT：

Adobe Flex / AIR

JavaFX：

Javaアプレット：

Silverlight


特定の技術に対する開発者の関心、したがってコミュニティの作成は、たとえばGoogle Codeディレクトリ（http://code.google.com）などのプロジェクトの数によって間接的に判断できます。 一方、重要な役割は、各テクノロジー（ 実際に.comサイト）の求人の数によって果たされます。 データを表5および図2に示します。
プラットフォーム

Gwt

フレックス/ AIR
Javafx

Javaアプレット

Silverlight
数量
Google Codeディレクトリ内のプロジェクト
1475
2388/703
119
166
180

画像
図2-RIA開発者の空席数
問題の解決に最適な技術を選択する
著者によると、どの技術もタスクを解決するための優先事項であるとは言えません。 実際には、初期状態では、クライアントコンピューターのソフトウェアの制限、特別な操作モードなどは指定されていませんでしたが、タスクに関しては、同じテクノロジを使用して問題を解決できます。 これは、書かれたデモアプリケーションで判断できます。
ソースはここからダウンロードできます （InelliJ IDEA 9プロジェクト）

Source: https://habr.com/ru/post/J84320/

More articles:


All Articles