大規模なJavaScriptアプリケーションを開発するためのベストプラクティス
Java/C++に強いバックグラウンドを持っているので、品質を落とさずに、いくらか大きなJavaScriptアプリケーションを開発できるのではないかと思います。
以下に関するヒントをいただければ幸いです。
- 開発環境
- デバッグ手法
- ユニットテスト
- プロファイリング
- 計装
- システムデザイン
- インターフェイスデザイン
- コードデザイン
JavaScript PC Emulator や JavaScript Game Engine のようなプロジェクトが、ご存知の方もいらっしゃると思いますが、これらの問題をどのように処理したかについても興味があります。
開発環境さて、シミュレートするには、ApacheまたはIIS）のようなWebサーバー（サーバー側のアーキテクチャに依存）が必要ですAJAX通信。サーバー側の開発言語のエディターにjavascriptのエディターが含まれている場合があります。
Javascript IDEについて興味深い質問があります： https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support
デバッグ手法とプロファイリングFirebug のような組み込みのブラウザデバッグおよびプロファイリングツールを使用します。
this プロファイリングツールもご覧ください。
ユニットテストjQueryを使用する場合は、 http://docs.jquery.com/Qunit をお勧めします。 javascritアプリケーションの開発バージョンでは、javascriptテストファイルがロードされます。アプリケーションが公開されると、テストファイルはロードされません。
セキュリティ
- サーバー側のすべてを検証して計算します
- XXSを防ぐ
デザイン
応用 - - - - - - - - - - - - - - - -
- アプリケーションコンポーネント
- カスタムウィジェット
フレームワーク - - - - - - - - - - - - - - - - -
- ベースウィジェット
- ベースAJAXコミュニケーション
- UIコア（ヘルパーメソッド...）
フレームワークは基本機能を提供します。たとえば、基本フレームワークは jQuery および knockoutjs です。そして、このフレームワークの上にアプリケーションが構築されます。もちろん、アプリケーション用に独自のフレームワークを作成することもできます。しかし、たとえばjQueryを選択する場合、jQueryがそれを行うので、ほとんどの場合、クロスブラウザーのバグに対処する必要はありません。
サーバーとの通信：通信には RESTfulサービス を提供することをお勧めします。また、JSONとXMLのどちらかを選択する必要があります。 JSONはXMLよりも軽量であるため、JSONが選択されることがよくあります。
デザインパターン：javascriptアプリケーションが非常に大きい場合は、MVCやMVVMなどのデザインパターンを実装することをお勧めします。
Javascriptの外部にいくつかのMVC/MVVMフレームワークがあります（たとえば、 knockoutjs ）。
これはjavascriptのデザインパターンに関する本当に役立つ記事です： http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
ただし、最終的には、アプリケーションをどのように構成するかなどを自分で決定する必要があります。デザインパターンは良い方法を示しますが、アプリケーションはそれぞれ異なり、すべてのソリューションがすべての問題に対して機能するとは限りません。
また、JavaScriptを使用する場合、パフォーマンスが重要であることを忘れないでください。したがって、javascriptファイルを圧縮して結合することをお勧めします： http://code.google.com/intl/de/speed/articles/ 。この時点で 遅延読み込み も役立つ可能性があります。
SproutCore と Cappuccino の両方を使用し、「マクロフレームワーク」をまったく使用しない大規模なJavaScriptアプリケーションの作成に参加しました。これは私が思うことです：
まず第一に、Javaでの作業で習得したものと同じ「優れた設計」の原則はすべて適用されます。スパゲッティコードを記述したり、関心を分離したり、MVCを使用したりしないでください。
多くの人が「web2.0」または「web3.0」（それが意味するものは何でも）アプリを書き始め、それにjQueryを追加するだけで、コードがどんどん大きくなり、完全に保守できなくなるので、苦痛と悲惨の道をたどります。
CappuccinoやSproutCoreのような「大きな」フレームワークは、そうすることを避けるのに役立ちます。カプチーノはデスクトップスタイルのアプリに最適ですが、SproutCoreは2.0の焦点を新しいTwitterのような「ウェブスタイル」のアプリに移しましたが、アプリとコードを構造化するための優れた方法を提供します。
今あなたの特定の分野や興味に：
開発環境
私は個人的にMacVimを使用しています。 Cloud9IDE 、ブラウザ内IDE JS開発用。カプチーノの場合、AppleのXcode IDEを使用して、UIを設計することもできます（とてもかっこいいです）。
CappuccinoアプリとSproutCoreアプリはどちらも、Webサーバーを必要とせずに、ブラウザーで直接テストできます。 Webサーバーと通信する必要がある場合（おそらくそうするでしょう）、 Ruby on Rails または node.js を使用して、バックエンドを簡単に起動して実行します。
デバッグ手法
JavaScriptの開発に関しては、デバッグは依然として一種の悩みの種です。 Google Chrome開発者ツール は現時点で最高です。ブラウザでブレークポイントを設定でき、あらゆる種類の優れた機能を備えています。これがあなたのツールです。使いたいと思います。
ユニットテスト
SproutCoreはQUnitを使用し、カプチーノにはOJUnit/OJSpecが付属しています。次に、 [〜＃〜] jsdom [〜＃〜] や env.js のようなプロジェクトがあり、サーバー上のブラウザーをシミュレートして、実行する環境を提供します。ブラウザなしの自動テスト。
Selenium や Jasmine のようなプロジェクトもチェックする価値があります。
プロファイリング/インストルメンテーション
Chrome Dev Tools を使用したプロファイリング。 YSlow は、一般的なWebアプリケーションのプロファイリング（アセットの読み込みなどを含む）に最適です。
システムデザイン
最初からMVCを使用します。多くの人が小さなアプリから始めて、ここにJavaScriptを追加してフィールドから値を読み取り、さらにJavaScriptを追加してラベルを更新します。彼らは再びそれをします。そしてまた。そして夕食が出されます：スパゲッティコード。 SproutCore または backbone.js のようなフレームワークを使用して、それを防ぎ、コードを構造化します。
これは SproutCoreのすばらしいチュートリアル 、これは backbone.jsの1つ です。
同じことがカプチーノにも当てはまります。ここでは 私が約1年前に書いたチュートリアル 。それは少し時代遅れですが、あなたに一般的な考えを与えます。これが 最新のデモアプリ 5月にMacTechマガジンに書いた記事のためにやった。
したがって、他の開発環境と同じようにコードを構造化します。たぶん この本 または この本 も読んでください。 これらのビデオも素晴らしいリソースです 。
インターフェイスデザイン
カプチーノの場合、AppleのXcode InterfaceBuilderを使用してUIをグラフィカルにレイアウトできます。他のほとんどのシステムでは、標準のHTMLとCSSを使用してUIを設計します。
モバイル向けに開発したい場合は、 この記事を読む必要があります 。
コードデザイン
私が上で言及した本とビデオを参照してください。そして、 この一般的なコーディングスタイル を参照してください。当然のことながら、人々はそのページに配置されているスタイルのいくつかの側面に同意しませんが、それは良い出発点です。
JavaScriptは開発のためのエキサイティングな環境であり、非常に活気のあるコミュニティがあります。あなたは楽しみに参加する必要があります！私の意見がお役に立てば幸いです。
ツールについて：
- JSLintは、Douglas Crockfordが http://www.jslint.com/ で開発したオンラインツールです。可能性が低い場合でも、コードが破損する可能性がある理由がわかります。
- JSMinは、Cで記述された1ファイルのJavaScriptミニファイアです。コンパイルして$ PATHに入れ、それを使用してアプリのビルドスクリプトを作成します。 。縮小されたJavaScriptは、読み込みが速いと見なされます。 http://www.crockford.com/javascript/jsmin.html で入手してください。
- JS Read-Eval-PrintLoopを使用すると常に便利です。最もダウンロードされたものは node.js 、a REPL V8に基づく、 Chrome javascriptエンジン。javascriptスニペットをインタラクティブにテストできます。また、機知に富んだイベントループシステムを通じて、最も強力なWebサーバーの1つとして機能します。この方法で使用することをお勧めします。
- JSプロンプトは優れていますが、優れたWebインスペクターが必要です。それは寛大なデバッグとあなたのコードのより良い理解を提供します。そのフィールドでは、Google ChromeとFirebugの両方が一流と見なされます。違いは、Google Chromeが組み込まれていることです。右クリック>検査すれば、完了です。
しかし、そこにある最高の機能は、 このカラフルなチートシートで しか発見できません。 - JSFiddle は、スニペットも試すためのオンラインツールです。
- @mathiasは、JSスニペットをテストし、クロスブラウザーでどのアルゴリズムが最速かを判断できるアイテムのコレクションである jsPerf を維持できることを非常に誇りに思っています。
- YSlow は、ウェブサイトが高速かどうか、そしてウェブサイトを改善する方法を、機知に富んだアドバイスで伝えるためのもう1つの非常に正確なツールです。
IDEに関する限り、より効果的であることが証明されている単一の開発環境はありません。この分野で最高の人々は、彼らが最も好きなテキストエディタのみを使用します（たとえば、ImpactJSの背後にいる@phoboslabは KomodoEdit を使用します。PaulIrishはTextMateを使用します。これは優れていますが、Macのみです。多くの人がVimを使用しています。JSLinuxの背後にいるFabriceBellardは、彼自身のEmacsバージョンを使用していると思います。これは少しでも問題ではありません。
ユニットテストは重要ですが、それが問題になることはありません。 Javascriptは十分に強力なので、他の何よりも数行で、より適した単体テストソフトウェアを自分で構築できます。重要なのは、node.js（上記で推奨するJSプロンプト）のおかげで、これらのテストを* .jsスクリプトファイルに入れて自動化し、すべてのテストを1行で起動できることです。_$ node test.js_。
本当にが効果的であると見なされるのは、 mdnjavascriptドキュメント 枕の下で、 html仕様 常に開いています。念のために言っておきますが、私が指摘するバージョンは広く知られていませんが、これは群を抜いて最高です。キャッシュマニフェストを使用するので、オフラインのときにダウンロード済みのページを再度読むことができます。優れた検索機能はもちろん！
そして今、私は本当にその賞金が欲しいので、あなたがすべての ドキュメントをリストした気の利いたページを1つあげますWebアプリを構築する必要があります。それは本当に宝石です。必要なすべての情報へのリンクが含まれています。それはそこにあるすべての聖書の索引です。
結局のところ、あなたが疑問に思っていることを本当に対象としている質問は、javascriptで巨大なアプリを実行できるかということです。
答えはイエスです。 Javascriptには、Crockfordが「悪い部分」と呼ぶものがありますが、JSLintを使用すると警告が表示されます。一方、Javascriptには強力な武器があります。
- クロージャ：別の関数内で関数を定義でき、外部関数の実行が完了した後でも、外部変数にアクセスできます。
- ファーストクラスの関数：関数の配列を作成したり、関数をパラメーターとして他の関数に渡したり、別の関数から関数を返したりすることができます。これらはすべて無料です。
- オブジェクトリテラル、配列リテラル：これはJSONの基礎です。とても使いやすいです。すべてのJavaScriptエンジンに、
JSON.parse(aString)とJSON.stringify(anObject)の組み込みオブジェクトが追加されました。 - プロトタイピング：オブジェクトは、以前に定義した任意の変数から継承できます。
これにより、作業が効率的かつ簡単になります。 Javascriptで使用できる特定のパターンがいくつかあります。 ポール・アイリッシュがあなたを啓発します 。
ブラウザでJavaScriptを使用する場合の最後のアドバイスは、_<script>/* some javascript here */</script>_を絶対に使用しないことです。常に_<script src="javascript-file.js"></script>_を使用してください。
そして、さらにいくつかのリンク。
- http://my.opera.com/emoller/blog/2011/05/01/javascript-performance またはブラウザにZipを実装することを恐れない方法。
- http://paperjs.org/features/ 今どこまで行けるかについて。外出先でプリコンパイルされたJavaScriptを編集する！
- http://brendaneich.com/2011/05/mozillas-nodeconf-presentation/ javascriptの将来について。
あなたはグーグルの クロージャーライブラリとコンパイラ をチェックすることができます。彼らはかなり大きなJavascriptアプリも書いています。
JavaScriptのような環境でデプロイできるJavaScriptの代替案を検討する必要があります。
大規模なアプリを作成する多くの場合、個人やチームがコードを簡単に連携させることができるツールチェーンがあり、全員が他の全員と通信する必要はありません。これはO（n ** 2）の問題です。
[〜＃〜] gwt [〜＃〜] Javaで記述できるので、Javaなどで開発を調整できるチームがある場合静的に型付けされたアプリケーション開発言語の場合、JavaScriptよりもGWTへの移行がはるかに簡単であることがわかるかもしれません。 GWTは、堅固なコアライブラリ、テンプレート、Java-IDE内デバッグ、ブラウザごとの最小化されたコード、およびその他の多くの機能も提供します。
GWTはJavaユニットテスト機能、つまり junit とも連携し、多くのJavaチームはjunitを継続的ビルドシステムとテストダッシュボードに統合した経験があります。
この投稿は、私が主に仕事をしている場所であるため、よりWebに焦点を当てていることに注意してください
開発環境
IDEを好む場合、JetBrainsには非常に優れたWebエディターがあります WebStorm これにより、JavaScriptでの作業がはるかに簡単になります。 Aptana は別の良いオプションです。それ以外の場合、テキストエディタは常に優れたオプションです（TextMateが私の好みです）。
デバッグ手法
上で述べたように、firebugのようなブラウザのDOM調整ツールは必須です。コードを継続的に保存および再ロードしなくても、コードが使用されている環境でコードを宣言および評価できる必要があります。
ここで言及するもう1つのポイントは、 jslint です。これは、JavaScriptの厳密な検証です。これはコンパイラの時間エラーと同等であり、JavaScriptの問題を修正するときに非常に役立ちます。
ユニットテスト
Javascriptに最適なユニットテストフレームワークは jasmine （rspecスタイルのテストに基づく）です。 TDDを使用するほとんどの人がBDDを受け入れるのは、TDDが正しく行われているだけですが、BDDスタイルの宣言を好まない人もいます。個人的には、BDDスタイルは人々がテストしようとしていることに集中するのに役立つと思います。広範なアサーションサポートがあり、JavaScriptの非同期性を処理するために、汚れすぎずに多くの作業が行われています。
プロファイリング/インストルメンテーション
ほとんどのブラウザには統合開発サポートがあります。ここでは、firefoxとchromeの両方が優れています。ツールは詳細を提供しませんが、サーバーまたはクライアント側のコードに低速点があることを簡単に認識できます。その情報、より詳細な分析が必要になりますが、問題を追跡して修正するだけで十分です。
これは間違いなく、ブラウザ以外で多くの成長が見込まれ、 nodejs の人気が高まっているスペースです。
設計（システム/コード/インターフェース）
主要なJavaScriptアプリケーションでは、動的に型指定された言語で発生するすべての問題が発生します。さらに、javascriptには非常に長い歴史があり、多くの悪いコードが毎日書かれています。 Javascriptは、成功の落とし穴にあなたを押し込むことは何もしません。したがって、「Javascript、良い部分」のような本です。
一方、javascriptは、関数型プログラミングだけでなく、OOPも強力にサポートしています（関数は、言語の第一級市民です）。オブジェクトリテラルは、クラスの意味でのオブジェクトと構造の意味での辞書の美しい組み合わせです。これに加えて、いくつかの本当に ユニークな機能 言語もあり、それらはあなたが多くの強力なことを成し遂げることを可能にすることができます。
これらの考慮事項により、他の言語で使用する任意のパターンを適用できます。これを利用するフレームワークはたくさんあります。依存関係の管理、コードの編成、テンプレート作成、モジュール通信、ビルドプロセス（縮小化を含む）、そして最後にテストするための一般的なフレームワークの多くを通過するすばらしい記事があります。
JSで開発する場合、ツールのようにJavaを使用することは可能です。私が働いている会社には50万以上のlocアプリケーションがあり、ライブラリの依存関係を処理するためにMavenなどのツールを使用しています。Eclipseも使用しています。 WTPプラグインを使用したJS開発用。
UnitTestsにはJSTest Driverを使用し、ATにはSeleniumを使用します。デバッグとプロファイリングには、通常、FirebugとVS WebExpressに組み込まれているIEデバッガーを使用します。
コードのコンパイルには、GoogleクロージャーとJavaサーブレットを使用して、開発プロセス中にJSを提供します。これにより、各JSファイルとその依存関係を、クラスの依存関係が確実になる順序で読み込むことができます。利用可能です。
あなたの質問の大部分はすでに回答されていますが、プロファイリングツールとして DynaTrace Ajax が言及されていないことに非常に驚いています。これは、ブラウザ内JavaScriptで現在市場で入手可能な最高のツールだからです。アプリケーションプロファイリング。
デバッグには、組み込みのブラウザーデバッガー（Chrome/Safariの開発者ツール、IEの開発者ツールバー、FirefoxのFirebug）に依存する必要がありますが、最も強力なデバッグツールは依然としてIE + Visual Studioですが、快適ではない場合もあります。
この記事 理解に役立つかもしれませんJavaScriptの戦略パターン