Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Start React with Browserify

2,870 views

Published on

春のJavaScript祭 in GMO Yours の資料ですよー

Published in: Technology
  • Be the first to comment

Start React with Browserify

  1. 1. Start React with Browserify
  2. 2. About me me = { name: "muyuu", Twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer" };
  3. 3. Agenda • React • browserify • gulp
  4. 4. About React
  5. 5. About React • Facebook製Viewフレームワーク • コンポーネント指向 • VirtualDOM
  6. 6. About React var Hello = React.createClass({ render: function(){ return ( <div className="hello"> Hello World! </div> ); } }); React.render( <Hello />, document.getElementById('helloBox') );
  7. 7. 何が良いのか • DOM操作を単純化 • コンポーネント単位での設計 • 可読性が高い • メンテしやすい • 壊れにくい
  8. 8. DOM操作を単純化 jQueryは「今ある要素に対して処理をする」方式 <ul> <li class="list" data-item="1">list1</li> <li class="list" data-item="2">list2</li> <li class="list" data-item="3">list3</li> </ul> // js $('.list').on("click", function(){ $(this).toggleClass('delete'); });
  9. 9. DOM操作を単純化 • DOM変更に弱い • 現状の状態がDOMにしかない • 拡張しずらい
  10. 10. DOM操作を単純化 Reactは「今のデータを元にDOMをレンダリングする」方式 var dataList = React.createClass({ render: function(){ var items = this.props.items.map( function(item){ return <li>{item}</li>; } ); return( <ul>{items}</ul> ); } });
  11. 11. コンポーネント単位での設計 • 構成要素をコンポーネントに分ける • 各コンポーネントの実装とDOMを1箇所に記述 • htmlライクな記述をJSファイル内に記述(JSX)
  12. 12. JSX? JavaScript内にxmlライクなシンタックスで記述できる var name = React.createClass({ render: function(){ return( <div className="Wrap"> <div className="first">{this.props.first}</div> <div className="last">{this.props.last}</div> </div> ); } });
  13. 13. DEMO
  14. 14. Points • React.createClass() でコンポーネントを作成 • renderメソッドにコンポーネントのDOMを記述 • propはコンポーネントに渡されるデータ • stateはアプリケーションの状態を持つデータ • stateに変更があった際には再描画される • コンポーネント間で値を受け渡す
  15. 15. Components • 1つのコンポーネントは機能もviewも1箇所に記述 • like Web components
  16. 16. Everything can be Component!
  17. 17. Components これからはアプリケーション設計の際には • コンポーネント単位での設計 • 各コンポーネントの組み合わせ これらをより重視して作らなければならない
  18. 18. Require?
  19. 19. JSはモジュールの仕組みがない <script src="jquery.js"></script> <script src="underscore.js"></script> <script src="something.js"></script> <script src="more.js"></script> <script src="inquisitive.js"></script> <script src="app.js"></script> </body> </html>
  20. 20. importしたい!
  21. 21. Browserify Browserify
  22. 22. Browserify // moduleA.js module.exports = { log: function(){ console.log('it is moduleA'); } }; // moduleB.js module.exports = { log: function(){ console.log('this is moduleB'); } };
  23. 23. Browserify // main.js var moduleA = require('moduleA'); var moduleB = require('moduleB'); moduleA.log(); moduleB.log(); // it is moduleA // this is moduleB
  24. 24. Browserify • jQueryを使う場合 // main.js var $ = require('jquery'); $('.ele').on("click", anything);
  25. 25. Browserify npm install -g browserify npm install --save jquery browserify main.js -o bundle.js // make bundle.js
  26. 26. React Components with Browserify var React = require('react'); var Child = require('./child'); // React component var main = React.createClass({ render(){ return ( <div className="main"> <Child data={this.state.data}/> </div> ); } });
  27. 27. Watchify • ファイルを監視してBrowserifyのビルドを自動化 • 通常はrequireしたファイル全てを結合する • 速度が遅い(Reactは130KB,jQueryは84KB) • watchifyなら差分ビルドが可能
  28. 28. Browserify on Gulp • jsだけではなくcss等のビルドもやってる • gulp watch? • gulp watchでは差分ビルドできない • 遅い • 1コマンドでwatchもwatchifyも動かしたい
  29. 29. DEMO
  30. 30. https://github.com/muyuu/ searchKindle
  31. 31. After AJAX
  32. 32. JSの必須スキルは 増える一方
  33. 33. MVW Framework
  34. 34. Unit Test
  35. 35. E2E Test
  36. 36. Node.js
  37. 37. AltJS
  38. 38. Build Tool
  39. 39. おなかいっぱい
  40. 40. フロントエンドは進化の 速度が早すぎる
  41. 41. じゃあやめる?
  42. 42. 人はいつ死ぬかって? 自らを成長させることを 辞めたときさ — おれ
  43. 43. like tuna?
  44. 44. like hamster?
  45. 45. No!
  46. 46. Have Frontier Spirit
  47. 47. 走って走って走って なお走り続けてこそ 良い未来に進める
  48. 48. さ、Reactやろう

×