react-rails

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. 5JNF
    QFS
    SFRVFTU &3# 
    NT )BNM 
    NT 4MJN 
    NT 3FBDU
    /PEFKT NT 3FBDU
    UIFSVCZSBDFS 
    NT BC
    O
    
    IUUQQPTUT
17. Routing
18. Turbolinksʹϫϯνϟϯ ͋ΔՄೳੑ
19. Turbolinksͷͱ͖͸ prerender͠ͳ͍ <%= react_component('Post', { posts: @posts }, { prerender: !turbolinks_request? }) %>
20. Thanks.