Reaktor Mannerheimintie 2 00100, Helsinki Finland

tel : +358 9 4152 0200 www.reaktor.f iinfo@reaktor.f i

Confidential ©2014 Reaktor All r ights reser ved

react + mobile

Case: m.verkkokauppa.com

“low latency is a competitive

advantage for the verkkokauppa.com

mobile store”

single page app1.HTML

2.CSS

3.JavaScript

4.AJAX requests

User sees relevant content

5.User clicks on something

6.More AJAX requests

Progressive

enhancement1.HTML

User sees relevant content

2.CSS

3.JavaScript

4.User clicks on something

5.AJAX requests

• Which state is the DOM in as we move from backend to frontend?

• The DOM rendering code is written into two different places

• Rigorous testing causes loads of extra work

• Easy to forget -> bugs in production

Traditional challenges in

progressive enhancement

Solution: node.js

Browser

Node.js

React API

React 101

• Component = Mutable state + a rendering function

• The rendering function receives the state and returns a corresponding DOM tree (a pure function)

• The rendering function is run in a requestAnimationFrame loop

• When the state changes, the DOM follows. “One way binding”

• DOM cannot – or rather doesn’t have to – be changed by hand

• Performance optimisation built in via Virtual DOM (no manual work!)

Progressive enhancement

with react• A built-in `renderToString` function takes a React component and

returns a corresponding HTML string.

• The first rendition is done with renderToString and sent as the HTTP response body.

• The initial state of the component is sent in the same response for use in the frontend.

• When JavaScript is launched in the frontend, React takes up where the backend left off.

React’s solutions to challenges

in progressive enhancement• The browser and the server share not only the same code, but also the

same state. Therefore bugs related to synchronisation are categorically avoided.

• No time wasted fixing bugs or writing tests.

• Synchronisation code is restricted to one point in the codebase

• Rest of the codebase becomes simpler.

• The same React components are used in the backend and in the frontend.

• Views need to be written only once

Bonuses

• Initial load is way faster

• Search engine and social media indexing for free

• No separate tooling needed (such as PhantomJS, prerender.io)

• A relatively small framework

• Not much to learn

• Doesn’t decide everything for you

• Performance built in with the Virtual DOM

thanks.

Reaktor Mannerheimintie 2 00100, Helsinki Finland

tel : +358 9 4152 0200 www.reaktor.f iinfo@reaktor.f i

Confidential ©2014 Reaktor All r ights reser ved