Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React.js - and how it changed our thinking about UI

2,417 views

Published on

Published in: Internet
  • Be the first to comment

React.js - and how it changed our thinking about UI

  1. 1. React.js (and how it changed our thinking about UI)
  2. 2. Who am I? Marcin Grzywaczewski @Killavus Working @ Arkency over a year
  3. 3. Background • Over 50~ micro apps in the project • Mostly direct mapping between screen and app • ‘Smart’ backend
  4. 4. Developing UI was slow • Handlebars Templates • jQuery DOM manipulation • Binding events • Redrawing
  5. 5. Error-prone.
  6. 6. Exhausting.
  7. 7. No fun at all :(
  8. 8. React.js • Declarative UI • No manipulation of DOM by hand • UI made of composable components • Stateful
  9. 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. 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. 11. Performance as a bonus. Great!
  12. 12. First React example: https://gist.github.com/Killavus/ a162468c7ad9dadaa14f
  13. 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. 14. Components can remain open • Every component has 2 arguments: props and children • You can access the second argument in @props.children
  15. 15. Example: https://gist.github.com/Killavus/ 29c1715aafad66bf8f57
  16. 16. Binding events • via props (onChange, onClick etc.) • React takes care of binding/unbinding during updating • No more double event handler invocation
  17. 17. Adding expand/hide feature: https://gist.github.com/Killavus/ 4ff03774c2226c4b3a5f
  18. 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. 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. 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. 21. Interested? We are making front-end techniques course.
  22. 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. 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. 24. Thank you!
  25. 25. Questions?

×