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