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.

The First React on Rails

4,352 views

Published on

すでに動いているRailsアプリケーションにReact.jsを実践投入する
http://qiita.com/khrtz/items/a43d58cad54af2425ced

Published in: Engineering
  • Sex in your area is here: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2F7hN3u ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The First React on Rails

  1. 1. The First React on Rails 2016/2/19 @khrtz 1
  2. 2. 伊藤晃平 2 職業 Web Engineer 業務内容は主にグロースハックとかフロントエンド UI作ったり、ABテストしたり、Ruby書いたり、RailsのView作ったり Twitter @khrtz 自己紹介 アイコンと名前はころころ変わる Webサービスを運営している会社に所属 雑兵meetup参加は2回目でLT2回目
  3. 3. 今回の内容 3 RailsにReactを導入するまでの記事はたくさんある やってみた記事はたくさん溢れているけど、実際に運用してみた情報 があまりないのでまとめてみた 現在運用しているRailsアプリケーションにReact.jsを導入してみたの で、溜まった知見を少し 実際に運用しているコードを参考に説明していきます React.js JUST THE UI VirtualDOM DATA FLOW
  4. 4. JS Frameworkを導入した理由 4 スマホのEC購入って使いづらいという意識を変えたい Webページからの脱却 jQueryが複雑。もう再利用できない状態で管理もできていない。泣き ながら書いてる
  5. 5. Reactにした理由 5 ・Viewレイヤーだけ扱う ・サーバーサイドレンダリングに対応(SEOのため、ユーザーを待たせたくない場面 ) ・Adminの管理画面についてAngular2.0(今は時期が悪い)、Ember.jsなど 検討中(今はjQuery) ・書きたいから ・フレームワークのなかでも安定している ・腐ったらすぐ捨てられるし、気楽に入れた ・エンドユーザー向けページにおいて、データを渡せば描画できるReact 一択
  6. 6. 6 運用しているRailsアプリケーションにReact.jsを導入するにあたって ・SPA化は諦める ・とりあえずRubyで出力しているHTMLを JavaScriptで書き換えることを考える ・Fluxは使わない ・Railsがある程度わかってないと苦しい ・react-railsを使う ・ReactRouterを無理に導入しようとしない
  7. 7. 7 運営しているサービスのデザインをリニューアルするついでにReactにし た 実験のためとりあえずスマホサイトだけ(7割くらいはReactに書き換えた) 問題は特に起こってない。PCでもReact読み込ませているんだけどエ ラーは見られない(polyfillはいれてる) まだES2015の機能しか使ってない in progress ページングもまだ未実装 簡単なstatelessくらいしかしてない ほとんどjQuery書かなくて済んだのは良かった
  8. 8. 8 ルートディレクトリに/clientを作り、client/react- client/src/component/*.js のようなコンポーネント群を作っていく client/react-client/src/ClientGlobal.jsをエンドポイントとして、グローバル変数 を管理 import Items from ‘./comnents/items.js’ import CommentPage from './container/CommentPage' window.Items = Item window.CommentPage = CommentPage React
  9. 9. 9 gulp.task('compile-es6', function() { var files; files = glob.sync('./client/react-client/src/ClientGlobal.js'); return browserify({entries: files, debug: true}) .transform('babelify') .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('app/assets/javascripts/components')); }); import CommentPage from './container/CommentPage' window.CommentPage = CommentPage ClientGlobal.js gulpfile.js
  10. 10. 10 react-client/src/container/CommentPage.js import React from 'react' import Comment from '../components/comment.js' export default class CommentPage extends React.Component { render () { var commentsNodes = this.props.comments.map(( comment, i) => { return(<Comment comment={comment} key={i}></Comment>) }.bind(this)); return ( <div> {commentsNodes} </div> ); } }
  11. 11. 11 react-client/src/components/Comment.js import React from ‘react' export default class Comment extends React.Component { render() { return( <section className="comment Project-cheer"> <h1 className="u-d_none">コメント</h1> <article className="Project-cheer__comment Media"> <div className="Project-cheer__comment-img Media__img"> <img className="Project-cheer__comment-img-prop" src={this.props.comment.profile_image} width="20" height="20" alt={this.props.comment.user.name} /> </div> <div className="Project-cheer__comment-main Media__body"> <header className="Project-cheer__comment-header u-clrfix"> <h1 className="Project-cheer__comment-name u-d_ib"><b className="u- em">{this.props.comment.user.name}</b>さん</h1> <time className="Project-cheer__comment-date">{this.props.comment.days}</time> </header> <div className="Project-cheer__comment-body"> <p>{this.props.comment.body}</p> </div> </div> </article> </section> );
  12. 12. <%= react_component(‘CommentPage', render(template: '/projects/comments.json.jbuilder'), {prerender: false}) %> 12 comments_smart_phone.html.erb json.comments do json.partial! partial: 'comments', collection: @items, as: :item end comments.json.jbuilder
  13. 13. _comment.json.jbuilder 13 json.cache! [item], expires_in: 1.hours do json.days item.reserved_at.strftime('%Y年%m月%d日') if item.user.is_deleted? nil else json.user_link user_path(item.user) end json.profile_image asset_url item.user.my_image_url json.user item.user, :name if item.comment.present? json.body item.comment else json.body "頑張ってください!!" end end partial
  14. 14. _comment.json.jbuilder 14 json.comments do json.partial! partial: 'comments', collection: @orders, as: :order end
  15. 15. 15 DHH Say
  16. 16. 16
  17. 17. 17 Rails 5 feature ActionCable リアルタイム通信を標準で装備 React × ActionCableを使ったリアルタイムチャットアプリ、Twitter みたいな通知機能などを搭載したサービスが増える Turbolinks3 部分的な更新ができるように やってることは大体React RailsAPI バックエンドとReactを切り離した Rails + React + FluxのSPAアプリが 作りやすく rails-apiが標準搭載
  18. 18. 18 React導入してみて 土台を作ってからは、React、ES6書くの楽しい。 statelessなコンポーネントをたくさん作っていきたい でも…
  19. 19. 墓場にならないように、ここから抜けだしてやる という強い意思が必要 19 Railsはフロントエンドエンジニアにとっての牢獄
  20. 20. ありがとうございました 20 Enjoy! JavaScript

×