Reactつかってみた

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）
Fluxアーキテクチャにマッチしている

Fluxアーキテクチャ
Facebookが提唱するクライアント
サイド向けアーキテクチャ
単方向のデータフローが特色
ぶっちゃけObserverパターン

Observerパターン
なにかあったら
教えて
こっちから聞きに
は行かないよ
おまえら、
新情報来てるぞ
購読して更新を待つ
変化があったら通知

Observerじゃないパターン
まだ読書中なんだ
よ、まっとけ！外に遊びに行こうぜ！！
状態確認のために
毎回問い合わせしないといけな
い

Fluxの構成
http://facebook. github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
特徴
• 単方向のデータフロー
• データの受け渡しは
Observerパターンで購
読
• Storeはデータの配信場
所（Modelとはちょっ
と違う）

React is a view library
ReactはFluxのビューのみ担う
 部品単位で個別に作れる（ボタン、ブログ記
事、etc ）
 Storeの状態変化を検知して自動的にビューを
更新する
 Storeにコールバックを登録する
 Reactiveプログラミング
 仮想DOMを持つ

コード例
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エレメントに出力する

仮想DOM
 Reactは直接DOMにレンダリングするのではなく、
内部で持っている仮想のDOMツリーに更新を書き込む
 仮想DOMは一定のタイミングで差分を実際のDOMに反映する
 差分だけ適用すればよいのでDOM生成のコストが抑えられ、高速らしい
レンダリング差分反映
Virtual
DOM
React DOM

仮想DOMの隠れたメリット
内部のDOMツリーからブラウザいら
ずでHTMLを生成できる
サーバサイドレンダリング

ReactRuby作った理由
 Blogエンジン用にサーバサイドレンダリング
したかったから！
 ぶっちゃけ、他に理由はない
CMSだとクローラに食わせたり、SNSで共有
するときのメタデータ出したりしたいので静
的にコンテンツ表示するの大事

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を出力する
• そんだけ！

React感想
 Fluxは良い（データフローが単方向だとわかりやすい、デバッグしやす
い）
 Reactiveプログラミングは意外と分かりやすい
 Formみたいなのはつらい
 単方向なのでデータバインディングしこしこ書かないとダメ
 Angularのありがたみがよく分かった
 部品化しやすい、再利用しやすい
 ライブラリがそろってくると上のフォームとかも楽になるかも
 入れ子可能なのでコンテンツを構造化して配置したいときとかは楽
 サーバサイドでレンダリングしたい向きにはよい

おわり
ぶっちゃけ
クライアントサイドJS 全般
つらい！！！！

Reactつかってみた

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

Similaire à Reactつかってみた

Similaire à Reactつかってみた (20)

Reactつかってみた