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をRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから

10,721 views

Published on

AWS Startup Tech Meetup #008 発表資料

Published in: Engineering
  • Be the first to comment

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

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

×