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.
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.
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.
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
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
A lot of people were not happy with Turbolinks and most people remove it out of frustration.
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.
The child input isn’t even responsible for updating the state of the “value.” It is passed in after the searchQuery value changes.
The child input isn’t even responsible for updating the state of the “value.” It is passed in after the searchQuery value changes.
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.