Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-rails

 react-rails

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

December 19, 2014
Tweet

Transcript

  1. react-rails JSΦδαϯ #4

  2. @hokaccha

  3. React • Facebook੡ͷJavaScriptϥΠϒϥϦ • Virtual DOMͱ͍͏࢓૊ΈΛ࢖͍͍ͬͯײ͡ʹ ViewΛॻ͚Δ • Reactʹ͍ͭͯͷ࣭໰͸ @mizchi

    ࢯ @koba04 ࢯ
 ʹ͓ئ͍͠·͢
  4. reactjs/react-rails

  5. Features • react.js͕Asset Pipeline͔ΒrequireՄೳʹͳΔ • JSXͷίϯύΠϧ • scaffoldͰͻͳܗ࡞੒ • αʔόʔαΠυϨϯμϦϯά༻view

    helper
  6. αʔόʔαΠυϨϯμϦϯά

  7. Why? • APIΛ࢖ͬͯJavaScriptͰϨϯμϦϯά͢Δͱ • ॳظද͕ࣔ஗͍ • JS͕ཧղͰ͖ͳ͍ΫϩʔϥʔͳͲ͔Β
 ΞΫηεͰ͖ͳ͍

  8. Why? • ॳظඳը͸αʔόʔʢRubyͳͲʣͰɺ
 ࢒Γ͸ΫϥΠΞϯτͰͬͯ΍Δͱ • ViewͷςϯϓϨʔτ΍ϩδοΫ͕ೋॏʹ ͳͬͯ͠·͏

  9. ղܾࡦ • ViewΛڞ௨Խ͢Δ • ಉ͡ίʔυͰαʔόʔ/ΫϥΠΞϯτ྆ํͰ
 HTMLΛ࡞ΕΕ͹Α͍ • React͸αʔόʔαΠυͰHTMLΛ࡞ΕΔ

  10. DEMO HJUIVCDPNIPLBDDIBSFBDUSBJMTFYBNQMF

  11. ࢓૊Έ • execjsͱ͍͏ruby͔ΒJSΛ࣮ߦͰ͖ΔgemΛ࢖͏ • αʔόʔଆͰReact. renderToStringΛݺͿ • react_ujs͍ͬͯ͏΍͕ͭΫϥΠΞϯταΠυͰ
 ϨϯμϦϯάࡁΈͷComponentΛϚ΢ϯτ͢Δ

  12. app/assets/javascripts/components/post.js.jsx var Post = React.createClass({ getInitialState: function() { return {

    comments: this.props.initialComments }; }, render: function() { var post = this.props.post; var comments = this.state.comments; return ( <div className="post"> <PostHead title={post.title} created_at={post.created_at} commentLength={comments.length} /> <PostBody body={post.body} /> <Comments comments={comments} /> <CommentForm onSubmit={this.handleSubmit} /> </div> ); });
  13. app/views/posts/show.html.erb <%= react_component('Post', { post: @post, initialComments: @post.comments }, {

    prerender: true }) %>
  14. ͜Μͳײ͡ͷ͜ͱΛ΍ͬͯΔʢΠϝʔδʣ def react_component(component, props) jscode = <<-JS #{@react_js} #{@your_components_js} return

    React.renderToString( React.createElement('Post'), #{props.to_json} ); JS ExecJS.exec(jscode).html_safe end
  15. Performance

  16. 5JNFQFSSFRVFTU &3# NT )BNM NT 4MJN NT 3FBDU /PEFKT NT

    3FBDU UIFSVCZSBDFS NT BCOIUUQQPTUT
  17. Routing

  18. Turbolinksʹϫϯνϟϯ ͋ΔՄೳੑ

  19. Turbolinksͷͱ͖͸ prerender͠ͳ͍ <%= react_component('Post', { posts: @posts }, { prerender:

    !turbolinks_request? }) %>
  20. Thanks.