
React.js + Backboneに基づくボイラープレート(スケルトン)に注目して、あらゆる複雑なアプリケーションの開発をすばやく開始したいと思います。 このバンドルは、チームが時間内に最小限の問題で複雑なアプリケーションを作成するのに役立ちました。また、シンプルさにより、新しい開発者をプロセスに迅速に接続できました。
あらゆる種類の問題や熊手に遭遇するたびに、JSで長い間働いています。 一連のset折と失望から、ますます多くの自転車を作成し、フレームワークを発明し、ライブラリを作成し、新しいアプローチを開発します。 また、ユニコーンを探しており、開発にかかる時間を節約し、完成品に品質を提供できるようにするために、自分自身とチームに何かを提供しようとしています。

主要なプロジェクトの1つで作業を開始すると、アーキテクチャの構築とフレームワークの選択について疑問が生じました。 Angular 、 Backbone 、 Emberでの大規模プロジェクトの経験があり、それらの長所と短所を思い出して、私たちをマイナスから救い、すべての利点を掘り起こし、新しいことを学びたいと思いました。 そのため、選択肢はまだ非常に新鮮なReactでしたが、アプリケーションでのデータの保存に問題があり、 Backboneが私たちの助けになりました。 一般的に、 React + Backboneの共生が好きで、アプリケーションが実稼働に入り、クライアントは満足しました。私たちはあなたと共有したい素晴らしい開発ツールを手に入れました。

その利点は何ですか? シンプル。 私たちは新しいものを発明しませんでした。それは既成の、テストされた、実績のある製品です。 Reactは、非常に効率的なデータバインディングと優れたルーターを備えた優れたコンポーネントアプローチを提供します。 Backboneを使用すると、モデルとコレクションを作成できます。 gulpがbabelを通じてコンパイルしたES6構文により、よりコンパクトで快適なコードを記述し、テストと理解に適したモジュールに分割できます。
提示された例では、 Node.js + express.js + Mongoを使用して、ジョブのリストを操作するためのRestfullサービスとして小さなTODOリストを作成しました。 クライアントアプリケーションのソースは「client \ source \」にあります
Rocket Reactに含まれるもの:

ビルドシステム
Gulp-構成済みコレクター。構成はtasks / configにあります。
NPM-依存関係マネージャー。 その助けを借りて、ライブラリがアプリケーションにインストールされ、続いて呼び出しが行われます。
BrowserifyはDIマネージャーです。
Babel -ES6構文のサポート。
babelify -JSでのReactテンプレートのコンパイル。
フロントエンド
React-アプリケーションの基礎。 ページとその要素は、独自のバックボーンモデルまたはコレクションを持つ小さなコンポーネントに分解されます。
バックボーン -モデルとコレクションの作成のみに使用されます。
react.backbone-モジュールはReactとBackboneをバインドします。
wolfy87-eventemitter-コンポーネント間のメッセージングのためにMixinに投稿されました。 例は「app \ views \ pubsub \」にあります。
反応ルータ -ルーティング。
テストツール
Mocha、Chai、Sinon、jsdom-設定済みで動作するように準備され、JSX構文をサポートします。 テストは「tests \ specs \」にあります。
ドキュメンテーション
jsdoc-ドキュメントジェネレーターにはバグがありますが、私が理解している限り、問題はESSD構文がJSDocで完全にサポートされていないことです。つまり、コードに矢印関数が存在する場合、コンパイラはドキュメントを作成しません。
サーバー側
Node、Express、Mongo、Mongoose、Winston-このテクノロジースタックに基づいて、CRUDテスト用のシンプルなサーバーアプリケーションが作成されました。 「サーバー\」にあります。
インストールと起動
1. npm installをサーバーフォルダーだけでなくルートでも実行する必要があります。
2. gulp b-ソースマップを使用してクライアントアプリケーションのビルドを作成します。
3. gulp b --productionは、コンソールログとデバッガーとJSを切り取り、コードを縮小することにより、アプリケーションを収集します。
4. gulp w-ウォッチャー、livereload、およびアプリケーションのクライアント部分を備えたサーバーを起動します。
5. gulp d -FTPにアプリケーションをデプロイします。 デプロイの前に、JSの有効性がチェックされます。JSがエラーを出した場合、アプリケーションはアップロードされません。
6. gulp doc-独自の設定とカスタムテンプレート、JSXサポートを使用したJSDocによるドキュメント生成。 jsdoc.conf.jsonの設定を参照してください。
7. gulp lint -JSHintを介して検証を実行します。 ルート.jshintrcの設定ファイル。
8. gulp test- 「tests \ spec」からテストを実行します。 「show_test_results.html」からテスト結果を表示できます。
9. gulp test-w-テストのために一晩起動します。 tests \ specフォルダを監視し、変更が発生した場合は再構築します。
基本設定は、ファイル"tasks / config.js"にあります。
mongo.bat-アプリケーションへのパスを示すMongoを起動します。
copyright.txt-著作権のテンプレートは、組み立てられたJSとCSSに組み込まれます。 設定は「tasks / config.js」にあります。

Githubリンク