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.

1. React.js
(and how it changed our thinking about UI)

2. Who am I?
Marcin Grzywaczewski
@Killavus
Working @ Arkency over a year

3. Background
• Over 50~ micro apps in the project
• Mostly direct mapping between screen and app
• ‘Smart’ backend

4. Developing UI was slow
• Handlebars Templates
• jQuery DOM manipulation
• Binding events
• Redrawing

5. Error-prone.

6. Exhausting.

7. No fun at all :(

8. React.js
• Declarative UI
• No manipulation of DOM by hand
• UI made of composable components
• Stateful

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.

11. Performance as a
bonus. Great!

12. First React example:
https://gist.github.com/Killavus/
a162468c7ad9dadaa14f

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

15. Example:
https://gist.github.com/Killavus/
29c1715aafad66bf8f57

16. Binding events
• via props (onChange, onClick etc.)
• React takes care of binding/unbinding during
updating
• No more double event handler invocation

17. Adding expand/hide feature:
https://gist.github.com/Killavus/
4ff03774c2226c4b3a5f

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

21. Interested?
We are making front-end techniques course.

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/

24. Thank you!

25. Questions?