How React goes well with mobile websites by making progressive enhancement easier.

1. Reaktor
Mannerheimintie 2
00100, Helsinki Finland
tel: +358 9 4152 0200
www.reaktor.fi
info@reaktor.fi
Confidential
©2014 Reaktor
All rights reserved
react +
mobile
Case: m.verkkokauppa.com

2. “low latency is a competitive
advantage for the verkkokauppa.com
mobile store”

3. single page app
1.HTML
2.CSS
3.JavaScript
4.AJAX requests
User sees relevant content
5.User clicks on something
6.More AJAX requests
Progressive
enhancement
1.HTML
User sees relevant content
2.CSS
3.JavaScript
4.User clicks on something
5.AJAX requests

4. Traditional challenges in
progressive enhancement
• 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

5. Solution: node.js
Browser
React API
Node.js

6. 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!)

7. 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.

8. 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

9. 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

10. thanks.
Reaktor
Mannerheimintie 2
00100, Helsinki Finland
tel: +358 9 4152 0200
www.reaktor.fi
info@reaktor.fi
Confidential
©2014 Reaktor
All rights reserved