62

Java/C++ の経験が豊富なため、品質を落とさずに多少大きな JavaScript アプリケーションを開発できるのではないかと考えています。

以下に関するヒントをいただければ幸いです。

  • 開発環境
  • デバッグ手法
  • 単体テスト
  • プロファイリング
  • 計装
  • システムデザイン
  • インターフェイス設計
  • コード設計

また、 JavaScript PC EmulatorやJavaScript Game Engineなどのプロジェクトがこれらの問題をどのように処理したかにも興味があります。

4

9 に答える 9

41

開発環境 AJAX 通信をシミュレートするには、Apache や IIS などの Web サーバー (サーバー側のアーキテクチャによって異なります) が必要です。サーバーサイド開発言語のエディタには、javascript用のエディタが含まれている場合があります。

JavaScript IDE に関する興味深い質問があります: https://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support

デバッグ手法とプロファイリングFirebug などの組み込みのブラウザ デバッグおよびプロファイリング ツールを使用します。

このプロファイリング ツールも参照できます。

単体テスト jQuery を使用する場合は、http://docs.jquery.com/Qunitをお勧めします。javascrit アプリケーションの開発バージョンでは、javascript テスト ファイルがロードされます。アプリケーションが公開されるとき、テスト ファイルは読み込まれません。

安全

  • サーバー側ですべてを検証して計算する
  • XXS を防ぐ

デザイン

応用 - - - - - - - - - - - - - - - -

  • アプリケーション コンポーネント
  • カスタムウィジェット

フレームワーク - - - - - - - - - - - - - - - - -

  • ベースウィジェット
  • ベース AJAX 通信
  • UI コア (ヘルパー メソッド...)

フレームワークは基本機能を提供します。たとえば、基本フレームワークはjQueryとknockoutjsです。そして、このフレームワークの上にアプリケーションが構築されます。もちろん、アプリケーション用に独自のフレームワークを作成することもできます。しかし、たとえば 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/。この時点で、遅延読み込みも役立つかもしれません。

于 2011-07-02T15:52:16.017 に答える
14

私は、SproutCoreとCappuccinoの両方を使用し、「マクロフレームワーク」をまったく使用しない大規模な JavaScript アプリケーションの作成に参加しました。これは私が思うことです：

まず第一に、Java での作業で習得した「優れた設計」の原則はすべて適用されます。スパゲッティ コードを記述せず、カプセル化し、懸念事項を分離し、MVC を使用してください。

多くの人が "web 2.0" または "web 3.0" (それが何を意味するか) のアプリを書き始め、それに jQuery を追加するだけで、コードがどんどん大きくなり、完全に保守できなくなるため、苦痛と悲惨な道をたどります。

Cappuccino や SproutCore などの「大きな」フレームワークは、それを回避するのに役立ちます。Cappuccino はデスクトップ スタイルのアプリに最適ですが、SproutCore は 2.0 で New Twitter のような「Web スタイル」のアプリに焦点を移しましたが、アプリとコードを構造化する優れた方法を引き続き提供します。

次に、あなたの特定の分野または興味について:

開発環境

私は個人的にMacVimを使用しています。JS 開発用のブラウザー内 IDE であるCloud9IDEについて良いことを聞きました。Cappuccino の場合、Apple の Xcode IDE を使用して UI を設計することもできます (これは非常に優れています)。

Cappuccino アプリと SproutCore アプリはどちらも、Web サーバーを必要とせずにブラウザーで直接テストできます。Web サーバーと通信する必要がある場合 (おそらくそうなるでしょう)、Ruby on Railsまたはnode.jsを使用して、バックエンドを簡単に起動して実行することができます。

デバッグ手法

JavaScript の開発に関して言えば、デバッグは依然として厄介な問題です。Google Chrome 開発者ツールは、現時点で最高です。ブラウザでブレークポイントを設定したり、あらゆる種類の便利なものを設定したりできます。ぜひ使っていただきたいツールです。

単体テスト

SproutCore は QUnit を使用し、Cappuccino には OJUnit/OJSpec が付属しています。次に、サーバー上でブラウザーをシミュレートし、ブラウザーなしで自動テストを実行する環境を提供するJSDOMやenv.jsなどのプロジェクトがあります。

また、 SeleniumやJasmineなどのプロジェクトもチェックする価値があります。

プロファイリング/計測

Chrome Dev Tools でプロファイリングを行うことができます。 YSlowは、一般的な Web アプリケーションのプロファイリング (アセットの読み込みなどを含む) に最適です。

システムデザイン

最初から MVC を使用します。多くの人が小さなアプリから始めて、ここに JavaScript を追加してフィールドから値を読み取り、さらに JavaScript を追加してラベルを更新します。彼らはまたそれをします。そしてまた。そして夕食が提供されます：スパゲッティコード。SproutCoreやbackbone.jsなどのフレームワークを使用して、それを防ぎ、コードを構造化してください。

これはSproutCore の優れたチュートリアルです。これはbackbone.jsのチュートリアルです。

同じことがカプチーノにも当てはまります。これは、約 1 年前に書いたチュートリアルです。少し古いですが、一般的なアイデアを提供します。これは、私が 5 月に MacTech マガジンに書いた記事のために作成した最新のデモ アプリです。

そのため、他の開発環境と同じようにコードを構成してください。多分この本かこの本も読んでください。これらのビデオも優れたリソースです。

インターフェイス設計

Cappuccino の場合、Apple の Xcode Interface Builder を使用して UI をグラフィカルにレイアウトできます。他のほとんどのシステムでは、標準の HTML と CSS を使用して UI を設計します。

モバイル向けに開発したい場合は、この記事を読む必要があります。

コード設計

上記の本やビデオを参照してください。そして、この一般的なコーディング スタイルを参照してください。当然のことながら、このページに示されているスタイルのいくつかの側面について意見の相違がある人もいますが、これは良い出発点です。

JavaScript は開発するのにエキサイティングな環境であり、非常に活気のあるコミュニティがあります! あなたは楽しみに参加するべきです！私の意見がお役に立てば幸いです。

于 2011-07-07T13:34:35.257 に答える
10

ツールについて:

  • JSLintは、Douglas Crockford がhttp://www.jslint.com/で開発したオンライン ツールです。可能性が低い場合でも、コードが壊れる可能性がある理由がわかります。
  • JSMinは、C で記述された 1 ファイルの JavaScript ミニファイアーです。コンパイルして $PATH に入れ、それを使用してアプリのビルド スクリプトを作成します。縮小された JavaScript は読み込みが速いと考えられています。http://www.crockford.com/javascript/jsmin.htmlで入手してください。
  • JS の Read-Eval-Print ループがあると、常に便利です。最もダウンロードされているのはnode.jsで、これは Chrome の JavaScript エンジンである V8 に基づく REPL です。JavaScript スニペットをインタラクティブにテストできます。また、機知に富んだイベント ループ システムを通じて、最も強力な Web サーバーの 1 つとしても機能します。このような使い方をお勧めします！
  • JS プロンプトは優れていますが、優れたWeb Inspectorが必要です。これにより、寛大なデバッグが可能になり、コードの理解が深まります。その分野では、Google Chrome と Firebug の両方が一流と見なされています。違いは、Google Chrome が組み込まれていることです。右クリック>検査で完了です。しかし、そこにある最高の機能は、このカラフルなチートシートで
    しか発見できません。
  • JSFiddleは、スニペットを試すためのオンライン ツールでもあります。
  • @mathias は、JS スニペットをテストし、クロスブラウザーでどのアルゴリズムが最速かを判断できるアイテムのコレクションであるjsPerfを維持していることを非常に誇りに思っています。
  • YSlowは、ウェブサイトが高速かどうか、改善方法を機知に富んだアドバイスで教えてくれる、もう 1 つの非常に正確なツールです。

IDEに関する限り、これほど効果的であることが証明されている単一の開発環境はありません。この分野で最も優れた人々は、最も気に入ったテキスト エディタだけを使用します (たとえば、ImpactJS の背後にいる @phoboslab はKomodoEditを使用しています。ポール アイリッシュは TextMate を使用していますが、これは優れていますが、Mac のみです。多くの人が Vim を使用しています。 JSLinux の背後にいる人である Fabrice Bellard は、彼自身のバージョンの Emacs を使用していると思いますが、これはまったく問題ではありません)。

単体テストは重要ですが、それは決して問題ではありません。Javascript は非常に強力なため、数行で他のどのソフトウェアよりも適した単体テスト ソフトウェアを構築できます。重要なのは、node.js (上記で推奨する JS プロンプト) のおかげで、これらのテストを *.js スクリプト ファイルに入れて自動化し、すべてのテストを 1 行で開始できることです: $ node test.js.

効果的であるために本当に重要なことは、mdn javascriptドキュメントを枕元に置き、html 仕様を常に開いておくことです。私が指し示しているバージョンは広く知られていませんが、間違いなく最高です! オフラインのときに既にダウンロードしたページを再読み込みできるように、キャッシュ マニフェストも使用します。抜群の検索機能はもちろん！

そして今、私はその報奨金が本当に欲しいので、 Web アプリを構築するために必要なすべてのドキュメントをリストした気の利いたページを 1 つ提供します。本当に宝石です。必要なすべての情報へのリンクが含まれています。それはそこにあるすべての聖書の索引です。

最後に、あなたが疑問に思っていることを本当にターゲットにしている質問は、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>。

そして、さらにいくつかのリンク。

于 2011-07-07T17:10:00.073 に答える
7

Google のClosure ライブラリとコンパイラを確認できます。彼らはかなり大規模な Javascript アプリも作成しています。

于 2011-06-30T03:29:21.510 に答える
6

JavaScript のような環境にデプロイできる JavaScript の代替案を検討する必要があります。

大規模なアプリを作成する多くの場合、O(n**2) 問題である、全員が他の全員と通信する必要なく、個人やチームが簡単にコードを連携できるようにするツール チェーンが必要です。

GWTのようなものは Java で書くことができるので、Java または別の静的に型付けされたアプリケーション開発言語での開発を調整できるチームがあれば、JavaScript よりも GWT への移行がはるかに簡単であることに気付くかもしれません。GWT はまた、堅実なコア ライブラリ、テンプレート、Java-IDE 内デバッグ、ブラウザごとの最小化されたコード、およびその他の多くの優れた機能も提供します。

GWT は Java ユニット テスト機能、つまりjunitとも連携します。多くの Java チームは、junit を継続的なビルド システムやテスト ダッシュボードに統合する経験をすでに積んでいます。

于 2011-07-02T17:25:48.657 に答える
4

この投稿は、私が主に仕事をしているため、より Web に焦点を当てていることに注意してください。

開発環境

IDE の方が好きなら、JetBrains には非常に優れた Web エディターWebStormがあり、JavaScript での作業がはるかに簡単になります。Aptanaも良い選択肢です。それ以外の場合、テキスト エディターは常に優れたオプションです (TextMate が私の好みです)。

デバッグ手法

上で述べたように、firebug のようなブラウザー DOM 調整ツールは必須です。コードが使用されている環境でコードを宣言および評価できる必要があります。保存と再ロードを頻繁に行う必要はありません。

ここで言及するもう 1 つのポイントは、JavaScript の厳密な検証であるjslintです。これはコンパイル時のエラーに相当し、javascript の問題を修正する際に非常に役立ちます。

単体テスト

JavaScript の最適な単体テスト フレームワークはjasmineです (rspec スタイル テストに基づいています)。BDD スタイルの宣言を好まない人もいますが、TDD を使用するほとんどの人は、BDD が正しく行われた TDD であることを認めています。個人的には、BDD スタイルは、人々がテストしようとしていることに集中するのに役立つと思います。広範なアサーション サポートがあり、JavaScript の非同期の性質を処理するために多くの作業が行われていますが、あまり汚れることはありません。

プロファイリング/計測

ほとんどのブラウザーには、開発サポートが統合されています。ここでは、firefox と chrome の両方が優れています。ツールは詳細を提供しませんが、サーバーまたはクライアント側のコードに遅いポイントがあることを簡単に認識するために使用できます。その情報を使用して、より深い分析が必要になりますが、問題を追跡して修正するだけでよいはずです。

これは間違いなく、 nodejsの人気が高まるにつれて、ブラウザ以外で多くの成長が見られる分野です。

設計 (システム/コード/インターフェース)

主要な JavaScript アプリケーションはすべて、動的に型付けされた言語が直面するすべての問題に直面します。さらに、javascript には非常に長い歴史があり、毎日多くの悪いコードが書かれてきました。Javascript はあなたを成功へと導くものではありません。

一方、javascript は OOP だけでなく、関数型プログラミングも強力にサポートしています (関数は言語の第一級市民です)。オブジェクト リテラルは、クラスの意味でのオブジェクトと構造の意味での辞書の美しい組み合わせです。これに加えて、言語にも真にユニークな機能がいくつかあり、それらを使用すると多くの強力なことを達成できます。

これらの考慮事項により、他の言語で使用する任意のパターンを適用できます。これを利用するフレームワークは数多くあります。依存関係管理、コード編成、テンプレート化、モジュール通信、ビルド プロセス (ミニフィケーションを含む)、および最終的なテストのための一般的なフレームワークの多くを取り上げた素晴らしい記事があります。

大規模な jQuery アプリケーションの構築

于 2011-07-03T18:10:12.867 に答える
3

質問の大部分は既に回答されていますが、DynaTrace Ajaxをプロファイリング ツールとして言及する人が誰もいなかったことに非常に驚いています。なぜなら、DynaTrace Ajax は、現在市場で入手可能なブラウザー内 JavaScript アプリケーション プロファイリング用のツールの中で群を抜いて最高だからです。

デバッグには、組み込みのブラウザー デバッガー (Chrome/Safari の開発者ツール、IE の開発者ツール バー、Firefox の Firebug) に依存する必要がありますが、最も強力なデバッグ ツールは依然として IE + Visual Studio ですが、あまり快適ではありません。回。

于 2011-07-09T01:42:45.060 に答える
3

It's still possible to use Java like tools when developing with JS. The company that I work for has a 500K+ loc application, and we employ tools like Maven to deal with library dependencies. We also use Eclipse for JS development using the WTP plugin.

We use JS Test Driver for UnitTests and selenium for ATs. For degugging and profiling, we generally use Firebug and the IE debugger built into VS Web Express.

For code compilation, we use Google closure and a Java Servlet for serving JS during the development process, which is able to load the each JS file and it's dependencies in an order that ensures that class dependencies are available.

于 2011-07-02T17:33:10.287 に答える