React.js - and how it changed our thinking about UI
- 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!
- 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
- 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?