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

Who am I?Marcin Grzywaczewski

@Killavus Working @ Arkency over a year

Background

• Over 50~ micro apps in the project

• Mostly direct mapping between screen and app

• ‘Smart’ backend

Developing UI was slow

• Handlebars Templates

• jQuery DOM manipulation

• Binding events

• Redrawing

Error-prone.

Exhausting.

No fun at all :(

React.js

• Declarative UI

• No manipulation of DOM by hand

• UI made of composable components

• Stateful

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.

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.

Performance as a bonus. Great!

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

a162468c7ad9dadaa14f

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.

Components can remain open

• Every component has 2 arguments: props and children

• You can access the second argument in @props.children

Example: https://gist.github.com/Killavus/

29c1715aafad66bf8f57

Binding events

• via props (onChange, onClick etc.)

• React takes care of binding/unbinding during updating

• No more double event handler invocation

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

4ff03774c2226c4b3a5f

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

It changed our thinking about UI

• Creating UI is faster

• Less error-prone

• We can focus on what we like - trying new things.

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

Interested?We are making front-end techniques course.

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

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/

Thank you!

Questions?