SlideShare a Scribd company logo

React + Mobile

•
•
A
antriss

Reaktor is a Finnish company that provides mobile development services. They developed a single page application using React for the mobile site of a large Finnish retailer to improve performance. React allows rendering content on both the server and client sides, avoiding challenges of traditional progressive enhancement approaches. By sharing component code and state between server and client, React ensures synchronization and avoids bugs while reducing testing needs. Initial load and search engine indexing are also improved with this approach.

Related slideshows

Increasing performance with Elixir Tasks
Increasing performance with Elixir TasksIncreasing performance with Elixir Tasks
Increasing performance with Elixir Tasks
 
Advanced Application Architecture Symfony Live Berlin 2018
Advanced Application Architecture Symfony Live Berlin 2018Advanced Application Architecture Symfony Live Berlin 2018
Advanced Application Architecture Symfony Live Berlin 2018
 
Webconnection
WebconnectionWebconnection
Webconnection
 
1 of 10
Download to read offline
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
“low latency is a competitive advantage for the verkkokauppa.com mobile store”
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
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
Solution: node.js Browser React API Node.js
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.fi info@reaktor.fi Confidential ©2014 Reaktor All rights reserved

More Related Content

React + Mobile

  • 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