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.
Reactつかってみた 
MINORI TOKUDA @SNOWCRUSH
ReactRubyリリースしました。 
 https://github.com/minoritea/react_ruby 
ReactとRubyのブリッジ 
gem install react_ruby
Reactとはなんぞや 
 こっからずっとjavascriptのターン・・・
React is .... 
A javascript library for building user 
interfaces (facebook says...) 
コンポーネント指向のビュー・ライブラ 
リ(MVCのV) 
Flu...
Fluxアーキテクチャ 
Facebookが提唱するクライアント 
サイド向けアーキテクチャ 
単方向のデータフローが特色 
ぶっちゃけObserverパターン
Observerパターン 
なにかあったら 
教えて 
こっちから聞きに 
は行かないよ 
おまえら、 
新情報来てるぞ 
購読して更新を待つ 
変化があったら通知
Observerじゃないパターン 
まだ読書中なんだ 
よ、まっとけ! 外に遊びに行こうぜ!! 
状態確認のために 
毎回問い合わせしないといけな 
い
Fluxの構成 
http://facebook. github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html 
特徴 
• 単方向のデータフロー 
• データの受け...
React is a view library 
ReactはFluxのビューのみ担う 
 部品単位で個別に作れる(ボタン、ブログ記 
事、etc ) 
 Storeの状態変化を検知して自動的にビューを 
更新する 
 Storeにコー...
コード例 
var Component = React.createClass({ 
render: function(){ 
return <div> 
<div> Hello, World</div> 
<AnotherComponent ...
仮想DOM 
 Reactは直接DOMにレンダリングするのではなく、 
内部で持っている仮想のDOMツリーに更新を書き込む 
 仮想DOMは一定のタイミングで差分を実際のDOMに反映する 
 差分だけ適用すればよいのでDOM生成のコストが...
仮想DOMの隠れたメリット 
内部のDOMツリーからブラウザいら 
ずでHTMLを生成できる 
サーバサイドレンダリング
ReactRuby作った理由 
 Blogエンジン用にサーバサイドレンダリング 
したかったから! 
 ぶっちゃけ、他に理由はない 
CMSだとクローラに食わせたり、SNSで共有 
するときのメタデータ出したりしたいので静 
的にコンテン...
ReactRubyのコード例 
require ' react_ ruby' 
require 'sinatra' 
get '/' do 
src = File.read( ' component.jsx') 
ReactRuby.compi...
React感想 
 Fluxは良い(データフローが単方向だとわかりやすい、デバッグしやす 
い) 
 Reactiveプログラミングは意外と分かりやすい 
 Formみたいなのはつらい 
 単方向なのでデータバインディングしこしこ書かな...
おわり 
ぶっちゃけ 
クライアントサイドJS 全般 
つらい!!!!
Upcoming SlideShare
Loading in …5
×

Reactつかってみた

6,217 views

Published on

川崎.rb で発表したReactの感想文(?)です。
あと、ReactRubyの紹介も少し入っています。

Published in: Software
  • Be the first to comment

Reactつかってみた

  1. 1. Reactつかってみた MINORI TOKUDA @SNOWCRUSH
  2. 2. ReactRubyリリースしました。  https://github.com/minoritea/react_ruby ReactとRubyのブリッジ gem install react_ruby
  3. 3. Reactとはなんぞや  こっからずっとjavascriptのターン・・・
  4. 4. React is .... A javascript library for building user interfaces (facebook says...) コンポーネント指向のビュー・ライブラ リ(MVCのV) Fluxアーキテクチャにマッチしている
  5. 5. Fluxアーキテクチャ Facebookが提唱するクライアント サイド向けアーキテクチャ 単方向のデータフローが特色 ぶっちゃけObserverパターン
  6. 6. Observerパターン なにかあったら 教えて こっちから聞きに は行かないよ おまえら、 新情報来てるぞ 購読して更新を待つ 変化があったら通知
  7. 7. Observerじゃないパターン まだ読書中なんだ よ、まっとけ! 外に遊びに行こうぜ!! 状態確認のために 毎回問い合わせしないといけな い
  8. 8. Fluxの構成 http://facebook. github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html 特徴 • 単方向のデータフロー • データの受け渡しは Observerパターンで購 読 • Storeはデータの配信場 所(Modelとはちょっ と違う)
  9. 9. React is a view library ReactはFluxのビューのみ担う  部品単位で個別に作れる(ボタン、ブログ記 事、etc )  Storeの状態変化を検知して自動的にビューを 更新する  Storeにコールバックを登録する  Reactiveプログラミング  仮想DOMを持つ
  10. 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. 11. 仮想DOM  Reactは直接DOMにレンダリングするのではなく、 内部で持っている仮想のDOMツリーに更新を書き込む  仮想DOMは一定のタイミングで差分を実際のDOMに反映する  差分だけ適用すればよいのでDOM生成のコストが抑えられ、高速らしい レンダリング差分反映 Virtual DOM React DOM
  12. 12. 仮想DOMの隠れたメリット 内部のDOMツリーからブラウザいら ずでHTMLを生成できる サーバサイドレンダリング
  13. 13. ReactRuby作った理由  Blogエンジン用にサーバサイドレンダリング したかったから!  ぶっちゃけ、他に理由はない CMSだとクローラに食わせたり、SNSで共有 するときのメタデータ出したりしたいので静 的にコンテンツ表示するの大事
  14. 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. 15. React感想  Fluxは良い(データフローが単方向だとわかりやすい、デバッグしやす い)  Reactiveプログラミングは意外と分かりやすい  Formみたいなのはつらい  単方向なのでデータバインディングしこしこ書かないとダメ  Angularのありがたみがよく分かった  部品化しやすい、再利用しやすい  ライブラリがそろってくると上のフォームとかも楽になるかも  入れ子可能なのでコンテンツを構造化して配置したいときとかは楽  サーバサイドでレンダリングしたい向きにはよい
  16. 16. おわり ぶっちゃけ クライアントサイドJS 全般 つらい!!!!

×