Reactつかってみた
Download as PPTX, PDF•6 likes•6,937 views
川崎.rb で発表したReactの感想文（？）です。 あと、ReactRubyの紹介も少し入っています。
Reactつかってみた
- 1. Reactつかってみた MINORI TOKUDA @SNOWCRUSH
- 2. ReactRubyリリースしました。 https://github.com/minoritea/react_ruby ReactとRubyのブリッジ gem install react_ruby
- 4. React is .... A javascript library for building user interfaces (facebook says...) コンポーネント指向のビュー・ライブラ リ（MVCのV） Fluxアーキテクチャにマッチしている
- 5. Fluxアーキテクチャ Facebookが提唱するクライアント サイド向けアーキテクチャ 単方向のデータフローが特色 ぶっちゃけObserverパターン
- 6. Observerパターン なにかあったら 教えて こっちから聞きに は行かないよ おまえら、 新情報来てるぞ 購読して更新を待つ 変化があったら通知
- 7. Observerじゃないパターン まだ読書中なんだ よ、まっとけ！ 外に遊びに行こうぜ！！ 状態確認のために 毎回問い合わせしないといけな い
- 8. Fluxの構成 http://facebook. github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html 特徴 • 単方向のデータフロー • データの受け渡しは Observerパターンで購 読 • Storeはデータの配信場 所（Modelとはちょっ と違う）
- 9. React is a view library ReactはFluxのビューのみ担う 部品単位で個別に作れる（ボタン、ブログ記 事、etc ） Storeの状態変化を検知して自動的にビューを 更新する Storeにコールバックを登録する Reactiveプログラミング 仮想DOMを持つ
- 10. コード例 var Component = React.createClass({ render: function(){ return <div> <div> Hello, World</div> <AnotherComponent /> </div>; } }); var el = document.queryFilter('#main'); React.render(<Component />, el); • XMLを埋め込める（独自記法） • コンポーネントはXMLタグで表記 • 入れ子に出来る • DOMエレメントに出力する
- 11. 仮想DOM Reactは直接DOMにレンダリングするのではなく、 内部で持っている仮想のDOMツリーに更新を書き込む 仮想DOMは一定のタイミングで差分を実際のDOMに反映する 差分だけ適用すればよいのでDOM生成のコストが抑えられ、高速らしい レンダリング差分反映 Virtual DOM React DOM
- 12. 仮想DOMの隠れたメリット 内部のDOMツリーからブラウザいら ずでHTMLを生成できる サーバサイドレンダリング
- 13. ReactRuby作った理由 Blogエンジン用にサーバサイドレンダリング したかったから！ ぶっちゃけ、他に理由はない CMSだとクローラに食わせたり、SNSで共有 するときのメタデータ出したりしたいので静 的にコンテンツ表示するの大事
- 14. ReactRubyのコード例 require ' react_ ruby' require 'sinatra' get '/' do src = File.read( ' component.jsx') ReactRuby.compile( jsx: s r c) erb <<-ERB <html><head></head> <body> <%= ReactRuby.render('<Component />')%> </body> </html> ERB end • まずgemを読み込みます。 • javascriptソースをコンパイルする （ExecJS） • その後render メソッドにXMLタグを 指定してHTMLを出力する • そんだけ！
- 15. React感想 Fluxは良い（データフローが単方向だとわかりやすい、デバッグしやす い） Reactiveプログラミングは意外と分かりやすい Formみたいなのはつらい 単方向なのでデータバインディングしこしこ書かないとダメ Angularのありがたみがよく分かった 部品化しやすい、再利用しやすい ライブラリがそろってくると上のフォームとかも楽になるかも 入れ子可能なのでコンテンツを構造化して配置したいときとかは楽 サーバサイドでレンダリングしたい向きにはよい
- 16. おわり ぶっちゃけ クライアントサイドJS 全般 つらい！！！！