攻撃的

こんにちは 複雑なWebアプリケーションのインターフェースの開発に役立つ興味深い新しいテクノロジーについて少しお話したいと思います。



過去数年間で、Webアプリケーションは驚くほど開発され、強みを獲得し、traditional慢な従兄弟である従来のデスクトップアプリケーションから軽de的な笑を恐れなくなりました。 しかし何よりも、私たちの目の前に、Webインターフェース開発ツールの分野で小さな革命がありました。それは、インターフェース開発者とその感謝するユーザーの両方の生活を大いに促進しました。









ExtJで行われたデスクトップシミュレーション

背景

プログラマーは、おそらく、プロの若さで草がより緑になり、女の子がきれいになり、仕事が楽になったと泣き出さない、同種の唯一の専門家です。 多かれ少なかれ経験豊富なインターフェイス開発者は、2つの画面解像度、3つのエンコーディング、4つの異なるブラウザでページコードをデバッグするメモリが1つだけという夢で叫び続けています。

石炭紀

そのため、草が緑になり、女の子が優しくなり、モニターが厚くなったとき、HTML、CSS、およびjscriptまたはvbscriptから選択できる弱いスクリプト言語しかありませんでした（まったく役に立ちません）。



スライドルールで地球を掘ることは難しく、HTMLを使用して多かれ少なかれ複雑なインターフェイスを構築することは困難です。 残念ながら、Tim Berners-Leeは、誰かが銀行のアプリケーションや電子メールクライアントを開発するためにドキュメントの構造を説明するために宣言型言語を使用することを想定していませんでした。



一部の向こう見ずは、ActiveXおよびJavaアプレットを使用しようとしました（「アプリケーションは実行中ですか？」）、しかし、大した成功はありませんでした。 なかなか難しい話でした。

中世

時間が経つにつれて、スクリプト言語は徐々に力を増し、DHTML（ダイナミックHTML）という用語がプロの語彙にしっかりと定着しました。 すぐに、ドロップダウンメニューがなければ大規模な商用サイトはできませんでした。 dhtmlページが洗練されていればいるほど、ブラウザに表示されるときにエラーが増えました。 読み書きのできないコードが豊富にあるため、多くのサイトは単に使用することが不可能でした。 平均的な開発者はまだ一連のプラットフォームで作業する運命にあり、それぞれが独自の問題を追加しました。

新しい時間

善意のすべての人々の大きな喜びに、jscriptはvbscriptを打ち負かし、私たちの自由で成功した統合ユーティリティライブラリが現れ始め、開発プロセスを大幅に簡素化し、多かれ少なかれ互換性のあるコードの作成を可能にしました。 さらに、開発者（そして重要なのは顧客）の頭の中にすでに定着しているAjaxは、インターフェース開発のアプローチを永久に変えました。



並行して、最近までプログラマーの誰も真剣に受け止めていなかったMacromediaとそのFlashは、Webアプリケーションを開発するためのそれほどおもしろくないツールを提供し始めました。

私たちの日々

これは、黄金時代が到来したと言っているわけではありませんが、私は繰り返しますが、リッチインターネットアプリケーションの開発において小さな革命がすでに起こっています。 最新のフレームワークにより、Webインターフェースプログラマーは、ペーパークリップやチューインガムから宇宙ロケットを製造する人のようには感じなくなります。







バックベース-強力なミドル農民

プラットフォームの問題

ブラウザが頭痛の専用薬である理由：

• HTMLは要素を正確に配置するのに悪い
  
  Jscriptは他の解釈されたもののように遅くなります
  
  DOMが遅くなります
  
  DOMのリアルタイム変更が非常に遅い
  
  異なるブラウザとOS間のJscriptの互換性はまだ不十分です
  
  コードに小さなエラーがあると、アプリケーション全体がクラッシュする可能性があります。
  
  

  解決策

  
  
  すべての人とすべての人のための単一のメイン互換ユニファイドブラウザの作成は、Jade Emperorの時代のCelestial Empireでも可能ですが、私たちの狂った時代には、それを忘れた方が良いでしょう。 したがって、賢明なプログラマーは唯一の可能な動きをしました-彼らはブラウザーと開発者の間にレイヤーを作成しました。
  
  
  
  このようなレイヤーを使用すると、document.allまたはdocument.layers、XMLHttpRequestまたはMicrosoft.XMLHTTPを実際に使用するかどうかは関係ありません。必要なすべての変換は、参加することなく舞台裏で実行されます。
  
  
  
  これは、Flex、ExtJ、GWT、BackBase、および高度なWebアプリケーションを作成するための他のいくつかの現代的なフレームワークの作成者が行った方法です。
  
  
  
  

  分類

  
  
  これらすべての優れた開発技術は、大きく4つのタイプに分類できます。表を参照してください。
  
  
  
  

  	コンパイル済み	解釈済み
  宣言的	フレックス Silverlight

  
  
  オブジェクト指向コード Gwt Extjs
  
  
  
  
  
  

  コンパイル済みvs解釈済み

  
  
  コンパイルされたテクノロジーは、コードをコンパイル（サプライズ）し、バイナリ実行可能ファイル（Flex、SilverLight）またはプレーンHTML + Jscript（GWT）に変換します。
  
  
  
  通訳者は、通常どおり、ブラウザを使用してJscriptを実行しますが、標準DOM（ExtJsのExt.Element、PrototypeのElement）の代わりに、別のレベルの抽象化をオブジェクトモデルに追加します。
  
  
  
  もちろん、コンパイラーは良いことですが、それにはかなりの価格があります：コンパイルステージが追加されるため、開発サイクルが長くなります-コンパイル、デプロイ、実行、コンパイル、デプロイ、実行...そしてFlexの場合、お気に入りのIDEには、ActionScriptサポートを追加する必要があります（SilverLight、私が理解しているように、.NETと統合し、GWTとJavaを統合します）。
  
  
  
  

  OOPと宣言的

  
  
  一部のフレームワークは宣言的なXHTMLのようなコードを使用してインターフェイスを構築します（BackBase： <b:listGrid width="auto" height="100%" />
  
  
  
  ）、他のオブジェクト指向のコードを使用します（ExtJs： new Application.GridPanel(…).add(new Application.Button(…)
  
  
  
  ）。
  
  
  
  個人的には、OOPアプローチを好みます。宣言型アプローチでは、標準ウィジェットの機能を拡張するために追加の非宣言型コードを記述する必要があるためです。 たとえば、BackBaseのコードスニペットは次のようになります。
  
  <e:handler event="click" type="text/javascript">

var oMask = document.getElementById("maskContainer");

oMask.style.zIndex = "3";

[...]

</e:handler>
  
  
  
  
  
  
  
  このスタイルには利点があります-HTMLエンコーダー（タグ！タグ!!）に近く、理解しやすいですが、普通のプログラマーを怖がらせることができます。
  
  
  
  

  Ajax vsプラグインベース

  
  
  MSとMacromedia（つまり、Adobeのせい）の人たちは、コンパイルされたコード（Flex、SilverLight）を実行する仮想マシンとして動作するプラグインをブラウザにインストールすることにshしていません。 プラグインには、まず第一に、実行速度という多くの利点があります。 解釈されたコードは実行可能コードに追いつきません。
  
  
  
  さらに、このプラグインは、ソースコードをほとんど変更することなく、さまざまなプラットフォームに移植できます。 アドビはすでにFlex開発者がAIRに「ほぼ本物の」デスクトップアプリケーションを書くことを可能にするテクノロジーを作っています。
  
  
  
  ただし、欠点も明らかです-すべてのユーザーがプラグインをインストールする準備ができているわけではなく、定期的に更新することさえできません。 さらに、開発者であるあなたは、プラグインの製造会社にしっかりと結び付けられます。 更新およびサポートが終了した場合、アプリケーションを再度書き換える必要があります。 従来のJscriptフレームワークのメーカーが倒産した場合、アプリケーションを自分で動作状態に維持することができます。すべてのコードが揃っています。
  
  
  
  
  
  フレックス-非常に高速ですが、非常に面倒です
  
  
  
  

  新旧モデル

  
  
  言及されたすべてのオブジェクト指向技術は、インターフェース自体の記述に対して多かれ少なかれ同じアプローチを使用します。 HTML / CSSコードは、一連のオブジェクトに取って代わります。 代わりに
  
  
  
  <table …>

My application


  
  
  
  

  <table …>

My application


  
  
  
  

  <table …>

My application









New Panel({ header: “My application” })
  
  
  
  ようなものを書いていますNew Panel({ header: “My application” })







<input type=”button” value=”My Button” … />
  
  
  
  代わりに<input type=”button” value=”My Button” … />





New Button( {label: “My button”, handler: Buttons.myButton.click} )
  
  
  
  
  
  
  
  などなど。 舞台裏では、こうしたコードはすべて同じHTML / CSSに変換されますが、インターフェイスの明示的な構築は、通常のデスクトップアプリケーションの開発者に馴染みのある形式で行われます。
  
  
  
  

  選択方法

  
  
  はい、開発に最適なテクノロジーを選択する方法は？ 正解は存在しません。 あなたを作る決定。 このような考えについては、少なくとも次の基準を考慮することをお勧めします。
  
  
  • テクノロジーが提供する新しい機会
    
    新しい開発者のトレーニング時間（エントリのしきい値）
    
    相対開発速度
    
    アプリケーションのパフォーマンス
    
    開発環境で行われる変更
    
    迅速なアプリケーション構築（RAD）のためのツールの可用性
    
    サーバーコードと統合する機能
    
    免許
    
    メーカー（またはオープンソースの場合はマニアのチーム）の評判と寿命
    
    技術サポート/マニア向けフォーラム
    
    デフォルトで利用可能なグラフィックテーマの品質（残念なことに、いくつかの非常に深刻なフレームワークには、追加のファイル処理なしでは「そのまま」使用できない無力なテーマセットが装備されています）
    
    ドキュメントの品質
    
    ローカリゼーションと国際化
    
    拡張性-独自のコンポーネントを作成する機能
    
    ...そしてさらに100万の考え。 どの要素があなたにとって重要で、何をあきらめることができるかを自分で決めてください。
    
    
    
    

    おわりに

    
    
    Webインターフェース開発者の生活は、最近大幅に簡素化されました。 ExtJ、GWT、Flex、SilverLight、BackBase、およびその他の多くの最新の開発は、アプリケーションプラットフォームとしてのブラウザーの欠点を事実上中和します。 既製の優れた技術を使用し、車輪を再発明しないでください。すべてがうまくいきます。
    
    
    
    PSこの記事およびその他の記事は、サイトemdin-here.ruで読むことができます。