ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから

ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから

• 1.
  ReactをRailsとどっぷり使ってみた話と、 フロントエンド AWSのこれから Presented byBEST10 Inc. 1 2015/11/12 村田佑介
• 2.
  2 自己紹介 BEST10 Inc. CTO村田佑介 @muratayusuke http://muratayusuke.com 京都大学経済学部 ↓ 楽天の人事（新卒採用） ↓ 楽天のエンジニア ↓ BEST10株式会社CTO 略歴
• 3.
  3 自己紹介 スタンディングデスク派
• 4.
  4 行きつけグルメアプリ BEST10
• 5.
  5 MagicMovie for Instagram
• 6.
  6 旅行系サービス ？
• 7.
  7 旅行系サービス •React •Rails •Coffeescript •Jade •Browserify •Gulp
• 8.
  8 React •これなに？
 A JAVASCRIPT LIBRARYFOR BUILDING USER INTERFACES 
 → View用のjavascriptライブラリ
 
 https://facebook.github.io/react/
• 9.
  9 React導入の経緯 •JSで細かいことし出すとjQueryがどんどんしんどくなる •サーバー構築秘伝のタレ→chefと同じように、jQueryでゴリゴ リ操作→Reactに変えることで状態を管理することなく宣言的に DOMが作れる！
 →大きめのJSのメンテがしやすくなりそう！ ※参考：伊藤直也氏が語る、モダンなWebテクノロジーに共通する傾向とは？ http://www.publickey1.jp/blog/15/qcon_tokyo_2015_1.html
• 10.
  10 React導入にあたって考えたこと •バックエンド（Rails）とモノリシックに作る？ソース分ける？ •React部分的に使う？まるっと使っちゃう？ •flux使う？ •asset pipelineはどこまで使う？ •サーバーサイドレンダリングどうする？
• 11.
  11 React導入にあたって考えたこと •バックエンド（Rails）とモノリシックに作る？ソース分ける？
 
 → デプロイめんどいし、どうせバックエンドと連動するのでソー スもコミットも一緒にしよう。どうしても分けたくなったら考え よう。
• 12.
  12 React導入にあたって考えたこと •React部分的に使う？まるっと使っちゃう？
 
 → 部分的に始めて後から拡張すんのめんどそうやから最初から まるっとReactで書いちゃおう。テンプレートはjsx気持ち悪い からjadeでがんばってみよう。 ※参考：React.jsをCoffeeScriptとjadeで書く https://uzimith.github.io/2015/02/13/react-jade-coffee/
• 13.
  13 React導入にあたって考えたこと •flux使う？
 
 → とりあえず使ってみよう。
 
 → やっぱstoreとかdispatcherとかいちいちファイル増やすの めんどい。flux使わずに1ページ1ファイルでsetStateでがんばっ てみよう。storeとかactionとか分けたくなったら考えよう。 ※参考：React.jsとFlux http://qiita.com/koba04/items/b32ba449d753fdb2b597
• 14.
  14 React導入にあたって考えたこと •asset pipelineはどこまで使う？componentのファイル達は全 部application.jsで結合しちゃう？それともgulpでビルドしたファ イルだけapplication.jsに書く？
 
 → gulp全然慣れてないしとりあえずまるっとapplication.jsで つないじゃおう。
 
 → やっぱり他のnpmモジュール使い出すとこんがらがってくる からgulpでビルドした1ファイルだけapplication.jsに書こう。
• 15.
  15 React導入にあたって考えたこと •サーバーサイドレンダリングどうする？
 
 → react-railsでサーバーサイドもreactで描画しよう。 ※参考：react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高 になった http://qiita.com/mizchi/items/c34c3ff88d73a7bd2c88
• 16.
  16 React周りの構成 routes.rb controller view(.haml) リクエスト Rails component(.coffee) template(.jade) React = react_component('T.Home', {},prerender: true)
• 17.
  17 フロントエンド AWSの今後 http://www.slideshare.net/keisuke69/ss-52562743
• 18.
  フロントエンド AWSの今後 http://www.slideshare.net/keisuke69/ss-52562743 18
• 19.
  フロントエンド AWSの今後 •サーバーサイドレンダリングって必要？ •Google botにクロールしてもらう必要ある？
 → 必要ないならサーバーサイドレンダリングいらない •というかGooglebotはもうJS実行した状態で動いてる？
 → もしそうならサーバーサイドレンダリングいらない → サーバーサイドレンダリングいらなければ、サーバーレスアー キテクチャーありかも 19
• 20.
  20 Contact BEST10 Inc. CTO村田佑介 @muratayusuke http://muratayusuke.com