This document discusses React.js and how it changed the author's thinking about building user interfaces (UI). It describes how developing UI was previously slow, error-prone, and not fun using Handlebars templates, jQuery DOM manipulation, and redrawing on every change. React.js introduced a declarative and component-based approach that is faster, less error-prone, and more enjoyable. Components have properties (props) and state, re-render only when needed for performance, and can be reused and remain independent. This new approach to UI development freed the author to focus more on experimentation rather than fighting the framework.
9. Declarative UI
• Components have properties (props) and state.
• You pass props when constructing component.
They are immutable.
• Whenever you set state of a component, it is
rendered again.
10. But re-render is slow!
• React makes changes in his VDOM (Virtual
DOM)
• Then it compares actual DOM with VDOM,
making minimal re-renders as possible.
13. Components are self-
contained
• Imagine you implement a list of elements.
• You create ItemList component, and Item
component
• You can re-use this part everywhere in the app.
It does not depend on ItemList at all.
14. Components can remain
open
• Every component has 2 arguments: props and
children
• You can access the second argument in
@props.children
16. Binding events
• via props (onChange, onClick etc.)
• React takes care of binding/unbinding during
updating
• No more double event handler invocation
18. More?
• You can reference owned (rendered in your
render function) via ref props
• You can access real DOM using getDOMNode()
• You can plug in to lifecycle of the component
19. It changed our thinking
about UI
• Creating UI is faster
• Less error-prone
• We can focus on what we like - trying new
things.
20. Future?
• Domain streams - every part of the app gets
notified about domain changes of a given
domain object
• Stand-alone components: they emit an event to
request for its state (we have it)
• Good technique to deal with state passing - we
have few ideas here
22. Course:
• Free!
• We’re going to tell you about:
• Refactoring to micro-apps (visit our blog, the post is already here)
• Using React.js in your components
• Techniques to deal with ‘front-end first methodology’
• Segregating apps by it’s purpose (and with React and RxJS it’s
easy)
• Many small apps vs. one big app
• Domain streams
23. Visit blog.arkency.com and register!
Direct link: http://blog.arkency.com/
2014/07/6-front-end-techniques-for-rails-
developers-part-i-from-big-ball-of-mud-to-
separated-concerns/