せっかちな人のためのリンク 。
ウィッシュリスト
- プロジェクトの透明な構造。
- すべての日常業務の自動化。
- テストの自動化。
- モジュール性;
- コードの再利用。
- パフォーマンス。
何を達成しましたか
プロジェクトツリーは次のようになります。
. ├── app │ ├── app.js # │ ├── bower_components # , bower.json │ │ └── ... │ ├── index.html │ ├── scripts │ │ ├── controllers # Backbone │ │ │ └── src │ │ │ ├── hello.jsx │ │ │ ├── main.jsx │ │ │ └── notfound.jsx │ │ ├── router.js # │ │ └── ui-components # React │ │ └── src │ │ └── panel │ │ ├── panel.jsx │ │ └── panel.less │ └── styles # │ └── src │ └── main.less ├── bower.json # ├── Gruntfile.js ├── install-deps.bat # , ├── install-deps.sh # ├── install-env.bat # ├── install-env.sh # ├── package.json # node.js, (, node.js) ├── server └── test # ├── test.config.js └── ui-components └── src └── panel.test.jsx
そして、コード
ソースコード全体を検証するための詳細なポイントは表示されません。これにはgithubがあります。重要なポイントに焦点を当てます。
/* * app/app.js * index.html, require * (Backbone). */ 'use strict'; requirejs.config({ baseUrl: './', paths: { app: './scripts', controllers: './scripts/controllers/dest', // dest - "" .jsx .less ui: './scripts/ui-components/dest', // underscore: './bower_components/underscore/underscore', backbone: './bower_components/backbone/backbone', jquery: './bower_components/jquery/dist/jquery.min', react: './bower_components/react/react' } });
実際には、ルーティング自体。 コメントは不要だと思います。
/* * app/scripts/router.js */ 'use strict'; define(function(require) { var Backbone = require('backbone'); var AppRouter = Backbone.Router.extend({ routes: { '': 'MainCtrl', 'hello/:name(/)': 'HelloCtrl', '*actions': 'NotFoundCtrl' }, MainCtrl: require('controllers/main'), HelloCtrl: require('controllers/hello'), NotFoundCtrl: require('controllers/notfound') }); return new AppRouter(); });
ui-componentsは、個々のコンポーネントごとに.jsx構文とスタイルシートで通常のReactコンポーネントを記述します。 BEMと共通点があります。 各コンポーネントは個別のフォルダーにあり、React自体にのみ依存します。
インターフェースコンポーネントだけでなく、コントローラーも.jsx構文で記述されているため、次のようにすることができます。
/* * app/scripts/controllers/src/hello.jsx */ 'use strict'; define(['react', 'ui/panel/panel'], function(React, Panel){ /* */ return function(name){ /* * , , . * (). */ React.render( <Panel title="Hello controller"> <h1>Hello, {name}!</h1> </Panel>, document.body); }; });
。
テスト
UIのテストは難しいため、FacebookはReactコンポーネントのテスト専用のTestUtilsを親切に提供しています。テストは次のようになります。
テストするコード。 タイトルとコンテンツを含むブートストラップパネルを描画するコンポーネント。
/* * app/scripts/ui-components/src/panel.jsx */ define(['react'], function(React){ 'use strict'; var Panel = React.createClass({ render: function(){ return ( <div className="panel panel-default"> <div className="panel-heading"> <h1>{this.props.title}</h1> </div> <div className="panel-body"> {this.props.children} </div> </div>); } }); return Panel; });
また、これらはJasmineを使用して作成されたパネルのテストです。たとえば、React開発者がJestを使用するなど、任意のフレームワークを使用できます。 テストはKarmaを使用して起動されますが、残念ながらこれまでのところ、これらのテスト用にPhantomJSを取得することができなかったため、常にクロムをポップアップする必要があります。
/* * test/ui-components/src/panel.test.jsx */ 'use strict'; define(['react', 'ui/panel/panel'], function(React, Panel) { describe('Panel behaviour tests', function() { var TestUtils = React.addons.TestUtils; var panel; var p; /* * this.setUp() xxxUnit */ beforeEach(function(){ panel = TestUtils.renderIntoDocument(( <Panel title="Test"> <p>Paragraph content</p> </Panel>)); }); /* */ it('Should render itself into DOM', function(){ expect(TestUtils.isCompositeComponent(panel)).toBe(true); }); /* , */ it('Should render title from props', function(){ var h1 = TestUtils.findRenderedDOMComponentWithTag(panel, 'h1'); expect(h1.getDOMNode().innerHTML).toBe('Test'); }); /* */ it('Should render children from props', function(){ var paragraph = TestUtils.findRenderedDOMComponentWithTag(panel, 'p'); /* * Specific react feature, it does not render text node directly, * but renders <span ... >Paragraph content</span> */ expect(paragraph.getDOMNode().innerHTML).toContain('Paragraph content'); }); }); });
ちなみに、index.htmlはかなり短くてきれいに見えます。
<html> <head> <title>React+Backbone</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="styles/dest/styles.css"> </head> <body> <div id="main"></div> <script type="text/javascript" src="bower_components/requirejs/require.js"></script> <script type="text/javascript" src="app.js"></script> <script src="//localhost:35729/livereload.js"></script> </body> </html>
自動化
Gruntはすばらしい機能を発揮します。これは、より少ないjsxを「コンパイル」し、テストを実行し、ファイルを保存しながらブラウザーでページを更新し、 さらに多くのクールなことを行います。
再利用とモジュール性
原則として、UIコンポーネントは、スタイルとテストと共に、単純に取得して別のプロジェクトにコピーできます（もちろん、Reactも必要です）。 そして、彼（コンポーネント）は不要なジェスチャーなしですぐに動作します。 これは特に管理領域と典型的なコンポーネントに当てはまります。スタイルを変更する必要はありません。
そして、なぜこれがすべて必要なのでしょうか？
まず、必要なすべてのツールを1か所に集めて、それらも機能するようにしました。 第二に、私はReactが大好きです。軽量で、機敏で、拡張性のあるBackboneで使用する価値があります。また、Requireはアプリケーション構造をより透明にすることができます。 第三に、私は典型的なプロジェクトの小さな「テンプレート」を手に入れました（開発を始めると、単にリポジトリを引き出して「すべてがすぐに動作します」）。
それでは、次は何ですか？
すべてがすぐに機能するわけではありません。 近い将来、生産のためにプロジェクトのアセンブリを実装し、縮小できるすべてのものを縮小する計画です。 もう少し-足場コントローラーとコンポーネント用のyomanジェネレーターを作成します。