Rethinking the view using React.js

Talk given at RedDotRubyConf 2015

Transcript

1. Rethinking the View using React Prathamesh Sonpatki @_cha1tanya
3. Thank You!
4. React
5. Build UI
6. V in MVC
7. Simple
8. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();
9. if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding Completed</header> else <div>Loading…</div>
10. Unconventional ideas
11. Components
12. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ); } }); React.render(<Hello />,document.body);
13. Component is fn()
15. <TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />
16. Reusable
17. var TimeLine = React.createClass({ render: function() { return ( <div> <TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} /> </div> ); } });
18. Composable
19. Separation of concerns
20. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ) } });
21. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ) } });
22. ಠ_ಠ
23. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ) } });
24. JSX
25. JSX
26. JSX
27. JSX is so bad, it even trolls Google!
30. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ) } });
31. JSX is like a healthy vegetable that tastes like decadent chocolate cake. You feel guilty, but it’s good. Eric Elliot
32. JSX is like Durian Prathamesh Sonpatki
34. Give it 5 minutes https://signalvnoise.com/posts/3124- give-it-five-minutes
35. No templates
36. Any sufficiently complicated templating language contains an ad hoc, informally-specified, bug-ridden, slow implementation of a turing complete programming language. - Jasim A Basheer
37. var tweets = [……] tweets.map(function(tweet) { return ( <Tweet author={tweet.author} content={tweet.content} /> ); });
38. var tweets = [……] tweets.map(function(tweet) { return ( <Tweet author={tweet.author} content={tweet.content} /> ); });
39. React === JavaScript #=> true
40. Managing Data
41. Data changing over time is root of evil Pete Hunt
42. Props
43. <Tweet> <div> <h1> Updated the website with a list of the fringe events </h1> <p>@reddotrubyconf</p> </div> </Tweet>
44. Props come from above
45. <TweetsList> <Tweet author={tweet.author} content={tweet.content} /> <TweetsList/> <Tweet> <div> <h1> {this.props.author} </h1> <p>@{this.props.content}</p> </div> </Tweet>
46. One way data flow
47. Immutable
48. propTypes
49. var Tweet = React.createClass({ propTypes: { author: React.PropTypes.string, content: React.PropTypes.string, retweetCount: React.PropTypes.number, favoritesCount: React.PropTypes.number } });
50. State
51. State is internal
52. var Posts = React.createClass({ getInitialState: function() { return ( { posts: [] } ); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
53. Avoid state as much as possible
54. props > state
55. Responding to state changes
56. var Posts = React.createClass({ loadPosts: function() { // fetch posts }, componentDidMount: function() { this.loadPosts(); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
57. var Posts = React.createClass({ loadPosts: function() { // fetch posts this.setState({posts: fetchedPosts}); }, componentDidMount: function() { this.loadPosts(); }, render: function() { this.loadPosts(); var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
58. Refresh
59. Re-Rendering the component
60. loadPosts: function() { // fetch posts this.setState({posts: fetchedPosts}); }, componentDidMount: function() { this.loadPosts(); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
61. Re-Rendering the component tree
62. Re-Rendering
63. Isn’t it too slow?
64. Virtual DOM
65. var Hello = React.createClass({ render: function() { return ( <div> Hello React World! </div> ) } });
66. var Hello = React.createClass({displayName: "Hello", render: function() { return ( React.createElement("div", null, "Hello React World!" ) ) } });
67. var Hello = React.createClass({displayName: "Hello", render: function() { return ( React.createElement("div", null, "Hello React World!" ) ) } });
68. Diff
69. Minimal set of changes
70. Batch updates
71. Nothing is new!
72. React❤Rails
73. gem “react-rails”
74. rails g react:install
75. //= require react //= require react_ujs //= require components app/assets/javascripts/components app/assets/javascripts /component.js
76. JSX.to_js
77. <% @posts.each do |post| %> <tr> <td><%= post.author %></td> <td><%= post.content %></td> </tr> <% end %>
79. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, tag: 'tr' %> <% end %>
80. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, tag: 'tr' %> <% end %>
81. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, tag: 'tr' %> <% end %>
82. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, tag: 'tr' %> <% end %>
83. <tr data-react-class="Post" data-react-props=“{‘post’:{'id':9, ‘author':'Prathamesh', 'content':'Getting ready for my talk’, ‘created_at':'2015-05-31T05:55:27.318Z', 'updated_at':'2015-05-31T05:55:27.318Z'}}" > </tr>
84. # /app/assets/javascripts/components/posts.js.jsx var Post = React.createClass({ render () { return ( <tr> <td> {this.props.post.author} </td> <td> {this.props.post.content} </td> </tr> ); } });
87. <%= react_component 'Posts', posts_url: posts_path %>
88. render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
89. render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
90. render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
91. Syncs with asset pipeline
92. config.react.variant = :development config.react.variant = :production
93. Server side rendering
94. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, { prerender: true, tag: ‘tr' } %> <% end %>
95. <% @posts.each do |post| %> <%= react_component 'Post', { post: post }, { prerender: true, tag: ‘tr' } %> <% end %>
96. Caveats • No access to document • All the dependencies must be specified in components.js • Components must be in global namespace
97. Component Generator
98. rails g react:component Tweet content:string fav_count:integer
99. var Tweet = React.createClass({ propTypes: { content: React.PropTypes.string, favCount: React.PropTypes.node }, render: function() { return ( <div> <div>Content: {this.props.content}</div> <div>Fav Count: {this.props.fav_count}</div> </div> ); } });
100. React Native
101. A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT
102. Learn once, write everywhere
103. Learning Curve
104. Just JavaScript
105. Just JavaScript & JSX
106. Just JavaScript
107. Easy to sneak into existing projects
108. Let me know your experience!
109. Thanks! @_cha1tanya @BigBinary React video series http://videos.bigbinary.com/categories/react http://videos.bigbinary.com/categories/tiny-reactjs-concepts