The First React on Rails

22
-1

Published on

Introduction React on Rails react-rails

Published in: Engineering
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
22
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×