シングルページアプリケーションを構築するためのJavaScriptフレームワーク[終了]


101

私の目標は、既存のWebアプリケーションをRESTful シングルページアプリケーション(SPA)に移行することです。現在、いくつかのJavascript Webアプリケーションフレームワークを評価しています。


私の要件は次のとおりです。

  • RESTfulデータレイヤー(ember-dataなど)
  • MV *構造
  • 動的ルート
  • テストサポート
  • 慣例によるコーディング
  • SEOサポート
  • ブラウザー履歴サポート
  • 良い(API-)ドキュメント
  • 生産準備完了
  • 生活コミュニティ

背骨

現在のアプリケーションはを使用していbackbone.jsます。全体としてbackbone.jsは素晴らしいプロジェクトですが、どこで何が発生し、どのように実装する必要があるかを決定する明確に定義された構造がありません。大きなチームで変化する開発者と作業することは、ある種の構造化されていないコードにつながり、メンテナンスが難しく、理解が困難になります。これが、フレームワークを探している理由です。このフレームワークはすでにすべて定義されています。

エンバー

私はember.js最後の日を調べました。このアプローチは私にとって非常に有望なようです。しかし、残念ながら、コードはほぼ毎日変更されます。だから、私はそれをプロダクションレディとは呼びません。そして、残念ながら、それがバージョン1.0になるのを待つことはできません。しかし、私はこのフレームワークの背後にあるアイデアが本当に好きです。

角度

Angular.js同様に広く普及しているフレームワークであり、Googleによって維持されています。しかし、私は角度に慣れることができませんでした。私にとっては、構造が不明瞭に思われ、フレームワークの各部分の全体的な責任の説明が欠落しており、実装は遠回りに感じています。正直に言うと、これは私の個人的な印象であり、知識の欠如に基づいている可能性があります。

バットマン流星

私が理解したように、どちらのフレームワークにもサーバー部分が必要です。また、RESTfulバックエンドが必要なだけなので、言語、技術、ソフトウェアに関係なく、これは私たちが望むものではありません。さらに、バックエンドAPIはすでに存在しています(RoR)。

ノックアウトCanJSSpine

これら3人の候補者については、これ以上詳しく説明しませんでした。多分これが私の次のステップになるでしょう。


だから今私の質問:

  • 優れたSPAフレームワークがありませんか?
  • どのフレームワークを提案/推奨しますか?
  • 言及されているフレームワークを回避しますか?
  • より大きなSPアプリケーションでの経験は何ですか?

PS:"JSの玉座"会議(2012年から)とJavaScriptフレームワーク全般について、スティーブンアンダーソン(Knockout.jsのコア開発者)からのすばらしいブログ投稿をお勧めしたいと思います。

PS:はい、私はSOについてすでにいくつかの質問があることを知っています。しかし、SPAの開発は非常に迅速かつ迅速であるため、それらのほとんどはすでに古くなっています。


私がオープンソース化したノックアウトベースのSPAフレームワークをチェックアウトします。knockout
spagithub.com/

回答:


81

最近、プロジェクトでもJavaScript SPAフレームワークを決定する必要がありました。

  • エンバー

    Emberを早い段階で見て、あなたと同じような考えを持っていました-私は本当にそれが好きでしたが、それを使用するにはまだ時期尚早であるように感じました...読んだチュートリアルの約半分は、最近の何かが原因で現在のバージョンでは機能しませんでしたテンプレートの動作方法が変更されました。

  • 背骨

    バックボーンは、私たちが真剣に検討した最初のフレームワークでした。「よく定義された構造」がないのはなぜだと思いますか?バックボーンは、モデルとビューのコードを分割する方法についてかなり明確です。たぶん、ある種のアプリテンプレートがないということですか?とにかく、Backboneはモデル/ RESTバインディングの部分に焦点を当てているようですが、ビューバインディングについては何も規定していません。モデルバインディングが重要で、Railsを使用している場合、これを行うのは簡単です。残念ながら、私のアプリのためのWebサービスが本当に一致しませんでした、と私は自分の書かなければならなかった.syncし、.parseすべてのもののための方法を。モデルとビューのコードの分離は良かったですが、すべてのバインディングを最初から作成する必要があるため、価値がありませんでした。

  • ノックアウト

    ノックアウトは、陰から背骨の陽のようなものです。バックボーンがモデルに焦点を当てている場合、ノックアウトはMVVMフレームワークであり、ビューに焦点を当てています。それは持っているobservableJavaScriptオブジェクトのプロパティのラッパーを使用していますし、data-bindあなたのHTMLにバインドプロパティに属性を。最終的には、ビューバインディングが主にアプリに必要なものだったので、Knockoutを使いました。(後で説明するように、他にも...)Knockoutのビューバインディングとバックボーンのモデルバインディングが好きな場合は、両方のフレームワークを組み合わせるKnockBackもあります。

  • 角度

    Knockoutの後でこれを見てみました-残念ながら、Knockoutがビューバインディングをどのように実行したかは、私たち全員がかなり満足しているようでした。Knockoutよりも複雑で入りにくいように思えました。そして、バインディングを行うために一連のカスタムHTML属性を使用しますが、それが好きかどうかはわかりません...フレームワークが本当に好きな複数の人に出くわしたので、後でAngularをもう一度見てみましょう。このプロジェクトを見るには遅すぎました。

  • バットマン流星CanJSスパイン

    これらのどれもあまりよく見ていない。Spineは明示的なControllerオブジェクトを持つBackboneに類似したフレームワークであり、CoffeeScriptで記述されていることは知っていますが。

  • あとがき

    私が述べたように、私たちのプロジェクトではビューバインディングに焦点を合わせることがより重要だったので、私たちはKnockoutを使用することになりました。また、ルーティングと履歴を処理するためのモジュール化、交差点ハッシャー、テスト用のJasmine、およびJQueryTwitter BootstrapUnderscore.js(そしておそらく、今は忘れているライブラリ)にRequireJSを使用することにもなりました。

    JavaScriptアプリの開発は、RailsエコシステムよりもJavaエコシステムに似ています。Railsは、すべてのアプリ(Railsフレームワーク)に使用する堅固なコア要素を提供し、コミュニティは、その上に多くのカスタマイズ(gems)を提供します。Javaは...言語を提供します。そして、Java EE、Spring、Play、Struts、Tapestryを選択できます。そして、JDBCまたはHibernateまたはTopLinkまたはIbatisを選択して、データベースと通信します。そして、Ant、Maven、またはGradleを使用してビルドできます。そして、それを実行するためにTomcatやJettyのか、JBossのかWebLoginを選択します。ですから、必要なものを選択して、何を選択するよりも、一緒に作品をより重視があります使用するフレームワークが。


詳しい回答ありがとうございます。knockout.jsに関するいくつかの質問:1)フロントエンド/バックエンドのモデルの同期を維持するための何らかのデータ層が提供されますか?2)テンプレートを別のテンプレートに含めるサポートはどのようになっていますか(おそらくrequireJSと一緒に)?3)すべてのファイル(モデル、ビュー、コントローラー、ヘルパーなど)を別々に別のフォルダーに配置するのは簡単ですか?あなたが多くの情報を提供したので、これらの質問のほかに、私はあなたの答えを受諾に設定しました。
Christopher Will

@ChristopherWillありがとう!1.)バックボーンがビューバインディングのためにあなたに任せるように、KnockoutはREST->モデルバインディングのためにあなたに任せます。ドキュメントのいくつかの例がある- knockoutjs.com/documentation/json-data.htmlか、バックボーンのREST->モデル人口を結合するためにノックバックを使用することができます。
2013年

2.)意味するところによって異なります。Knockoutには、モデルからコレクションを取得し、リストタグまたはテーブルタグにバインドして、指定したテンプレートをレンダリングする組み込みのデータバインディングがあります。全体的なビューを構築してそれらを交換する方法などの大規模なものの場合-それはまだいくらか手動です(少なくとも私がそれをどのようにしているか、まだ学習しています)-RequireJS w /テキストプラグインにより、これを少し簡単に行うことができます。ただし、ロジックを指定してdivをスワップアウトする必要があります。これは、ルートに応答するメソッドで行うだけです。ただし、これを行うためにKnockoutイベントをワイヤリングできる場合があります。
2013年

3.)RequireJSは、これを可能にするものです。
2013年

ネイト、ありがとう。私はKnockBackを試してみると思います。そしてもちろん、あなたの言及したライブラリ(requireJS、crossroadsなど)も
クリストファー・ウィル

8

多数のSPAを使用してクラウドサービスプロジェクトの開発を開始してから1年が経過したため、RESTfulアーキテクチャのニーズを満たすためにUIに使用するJavaScriptフレームワークを決定するのは大きな決断でした。そして、多くの研究の結果、私たちはDojoフレームワークを使用することになりました。

あなたが好きになる主な機能:

  1. 教育を受けたコミュニティと完璧なデザインパターンを考案したチーム。素晴らしい慣習とモジュール/オブジェクト指向アーキテクチャ。CrossBrowserプログラミングの姿勢:)
  2. MV *構造。外部.htmテンプレートを使用してUIウィジェットを作成し、本番用にすべてのJavaScriptとテンプレートを単一の縮小された小さな.jsに作成します
  3. 継承してクラスを構築します。プロパティセッター、多くの関数ツール。
  4. pub / subメカニズム(dojoでトピックと呼ばれます)
  5. 検証フォームコントロール、ダイアログ/ツールチップから、機能が多く高度にカスタマイズ可能な(ただし軽量)チャートおよびデータグリッドソリューションまで、多くのUIコントロール。
  6. DOHという名前の優れた単体テストシステム。また、マウスやキーボードのアクションを再現するロボットもあります。
  7. NodeListという名前のクエリツール(JQueryなど)。jqueryのすべての機能と、プラグインの多くを備えています。
  8. そして、良いがそれほど完全ではない部分。RESTサービスで使用するJsonRestモジュールがあります。便利なツールですが、多くの機能がありません。

これらの問題を克服するために、AJAXポーラー、エラー処理、および汎用のロードおよび通知ソリューションを開発しました。dojoフレームワークの規則と構造を使用して、それを非常に簡単に行いました。そうしたくない場合は、おそらくこの部分に別のフレームワークを使用する必要があります。

Webで素晴らしいSPAを見ると、それらすべてがカスタマイズされており、複数のフレームワークを使用していることがわかります。道場だけでの経験は素晴らしかったです。したがって、他のフレームワークについては考えないようにしてください。SPAのフレームワークはすべて不完全です。しかし、最終的には別のオプションもあります(これはお勧めしません。詳細情報はありません)。UIとJavaScriptを自動的に生成することにより、SPAを構築できるJAVAフレームワークを使用します。


こんにちは!今Dojoを使っていますか?Dojoについてブログを書いていますか?
Dunaevsky Maxim

こんにちは!はい、同じ製品に引き続き使用しており、維持しています。社内のフレームワークは道場の上に書かれており、毎日それに追加しています。いや、それについてのブログはありません。あなたがそれから始めるつもりなら、今日では古いツールと考えられています。彼らはまだDojo 2.0に取り組んでいますが、現時点では他のオプションを使用する方が良いでしょう。リストの一番上にReact / Angularがあります。
ユニコーニスト2016年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.