Reactボイラープレート-Rocket React

画像






React.js + Backboneに基づくボイラープレート(スケルトン)に注目して、あらゆる複雑なアプリケーションの開発をすばやく開始したいと思います。 このバンドルは、チームが時間内に最小限の問題で複雑なアプリケーションを作成するのに役立ちました。また、シンプルさにより、新しい開発者をプロセスに迅速に接続できました。



あらゆる種類の問題や熊手に遭遇するたびに、JSで長い間働いています。 一連のset折と失望から、ますます多くの自転車を作成し、フレームワークを発明し、ライブラリを作成し、新しいアプローチを開発します。 また、ユニコーンを探しており、開発にかかる時間を節約し、完成品に品質を提供できるようにするために、自分自身とチームに何かを提供しようとしています。



画像








主要なプロジェクトの1つで作業を開始すると、アーキテクチャの構築とフレームワークの選択について疑問が生じました。 AngularBackboneEmberでの大規模プロジェクトの経験があり、それらの長所と短所を思い出して、私たちをマイナスから救い、すべての利点を掘り起こし、新しいことを学びたいと思いました。 そのため、選択肢はまだ非常に新鮮な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リンク



All Articles