Progressive Enhancment with Rails and React
Download as PPTX, PDF1 like80 views
This document discusses using React with Rails to add interactivity and improve performance over traditional Rails development with full page refreshes. It explains that React uses reusable components with immutable data to render views, and integrates well with Rails by allowing components to be rendered on the server for SEO. The react-rails gem handles mounting React components and cleaning up references to prevent memory leaks when used with Turbolinks. Overall React is presented as a good solution for progressive enhancement of Rails applications with JavaScript.
Progressive Enhancment with Rails and React
- 2. My Name is Tyler Johnston
- 3. What is Progressive Enhancement?
- 4. Traditional development with Rails works great. Full page refreshes, static content, all HTML generation.
- 5. But clients and customers want interactivity and performance.
- 7. Keep your Rails workflow but add Javascript where it’s necessary.
- 9. ails 4 it is now a default gem in the generated G
- 10. ert your application in to a single page applica
- 11. Download all of the Javascript and Stylesheets once and reuse for multiple page views.
- 12. s. Turbolinks replaces the content of the <body
- 13. Turbolinks gracefully falls back to browser defaults for POST/PUT/DELETE requests as well as the absence of Javascript.
- 14. While Turbolinks provides lots of benefits there are a few caveats which caused a lot of developers to not use it.
- 15. Turbolinks causes most requests to not yield a full page refresh. This means you must think differently about how you organize and handle your Javascript.
- 16. Your application is now a long living Javascript application. You must be wary of memory leaks. This means ensuring no circular references and writing your Javascript in a way that allows for garbage collection when the controller changes actions.
- 17. $(document).on('page:load', function() { // wire up javascript events for a page load }); $(document).on('page:before-unload', function() { // cleanup references from before });
- 18. This means that just about every jQuery plugin you may find will cause memory leaks. Most of these plugins are poorly designed and with a fresh page load in mind. They don’t tend to track references or have a way to clean them up.
- 19. al solutions to these problems that we’ve all tri
- 20. if ($('.organization').length > 0) { $('.organization').each(function(index, element) { var $el = $(element); $.getJSON('/meetup/group/' + $el.prop('data-meetup-id'), function(data) { $el.find('a.title').prop('href', 'http://meetup.com/' + data.meetup_id) $el.find('a.title h1').html(data.title); $el.find('span.members').html(data.members_count); $el.find('img.meetup-logo').html(data.images.group_logo_large); }); }); }
- 21. Now HTML is rendered by Rails and we have this pyramid of doom to update our content. What if we needed logic for different pieces? What if the Meetup API starts replying with varying data based on something in their state? What if we want to poll repeatedly for changes?
- 22. We could move HTML rendering to templates and now we need another gem to precompile Handlebars/Jade/Haml Javascript templates. Even more logic going in to this single function.
- 23. ot a good fit for this style of development. They
- 24. Enter React React is the light-weight functional view layer from Facebook designed for building UIs with a focus on immutable data structures.
- 25. React is designing your UI around reusable and self-contained components.
- 26. No separation of files with controllers, views, templates and models. Allows for ease of maintainability for even the most of Javascript novices. React has a wonderfully simple API that will take 15 minutes to learn.
- 28. var Organization = React.createClass({ componentWillMount: function() { $.getJSON('/meetup/group/' + this.props.meetup_id) .then(function(json) { this.setState(json); }.bind(this)); }, meetupURL: function(path) { return "http://www.meetup.com/" + this.props.meetup_id + path; }, render: function() { return <div> <OrganizationImage photos={this.state.group_photo} /> <OrganizationName name={this.state.name} meetupURL={this.meetupURL} /> <OrganizationEvent event={this.state.next_event} meetupURL={this.meetupURL} /> <OrganizationMembers members={this.state.members} meetupURL={this.meetupURL} /> </div>; } });
- 29. React is designed around a one-way data flow. Views are considered to be immutable and state should be kept to single place. When state changes the views are created from scratch and render and all mutated state/properties are replaced.
- 30. var Organization = React.createClass({ componentWillMount: function() { $.getJSON('/meetup/group/' + this.props.meetup_id).then(function(json) { this.setState(json); }.bind(this)); }, meetupURL: function(path) { return "http://www.meetup.com/" + this.props.meetup_id + path; }, render: function() { return <div> <OrganizationImage photos={this.state.group_photo} /> </div>; } }); var OrganizationImage = React.createClass({ render: function() { return <img src={this.props.photos.highres_link} width="80" height="80"/>; } });
- 31. data. What about collecting data or doing things
- 32. t unidirectional flow. Data goes down and eve
- 33. why was the end of Lost so bad? SearchAutocomplete
- 34. var SearchAutocomplete = React.createClass({ handleAutocomplete: function(event) { var query = event.target.value; this.setState({ searchQuery: query }); $.getJSON(this.props.autocompleteUrl, { q: query }) .then(function(autocompleteOptions) { this.setState({ options: autocompleteOptions }); }); }, render: function() { return <div> <SearchAutocompleteInput value={this.state.searchQuery} handleChange={this.handleAutocomplete} /> <SearchAutocompleteResults options={this.state.options} /> </div>; } });
- 36. var SearchAutocomplete = React.createClass({ handleAutocomplete: function(event) { var query = event.target.value; this.setState({ searchQuery: query }); $.getJSON(this.props.autocompleteUrl, { q: query }) .then(function(autocompleteOptions) { this.setState({ options: autocompleteOptions }); }); }, render: function() { return <div> <SearchAutocompleteInput value={this.state.searchQuery} handleChange={this.handleAutocomplete} /> <SearchAutocompleteResults options={this.state.options} /> </div>; } });
- 38. Whats with all the Javascript? Isn’t this about Rails?
- 40. unctionality and dependencies of React while t
- 41. Remember the Organization component?
- 42. <% @organizations.each do |organization| %> <%= react_component('Organization', organization.to_json) %> <% end %>
- 43. Mounts the React component Sets the properties of the component from the given hash Automatically cleans up references and handles memory management with Turbolinks callbacks
- 44. But what about SEO and search engine crawling?
- 47. React knows how to pre-render using ExecJS so the component will boot using the existing HTML that is valid for React.
- 48. I’ve come full circle on my thinking of front end development. Rails development feels better than every alternative, no matter how polished. React and React-Rails allows for a really great convergence of great and fast front end tooling with Rails fast development cycle.
- 49. Go forth and try React with Rails! Questions? Comments?
Editor's Notes
- #15: A lot of people were not happy with Turbolinks and most people remove it out of frustration.
- #31: In this example we can see the state is contained to the “Organization” component. That is responsible for creating and passing data to the child views. When it is “mounted” it sends a network request.
- #35: The child input isn’t even responsible for updating the state of the “value.” It is passed in after the searchQuery value changes.
- #37: The child input isn’t even responsible for updating the state of the “value.” It is passed in after the searchQuery value changes.
- #49: Testing works out of the box. Javascript unit testing works out of the box with `jasmine-rails`. JSX compilation with Sprockets works out of the box.