The document discusses introducing React into an existing PHP e-commerce application with millions of annual visitors. The existing application is large and difficult to maintain. The goals are to separate the frontend and backend for easier testing and maintenance, and allow refactoring the backend into smaller services. The approach is to introduce React iteratively by creating multiple React apps for different parts of the site, separating data loading from PHP to React, and gradually removing old PHP code. Server-side rendering is recommended over a single-page application to avoid possible SEO issues and ensure fast initial loading.

1. Introducing React into
PHP app
Piotr Wojnarowski
Tomasz Piekarczyk

2. ● Online shop, millions of visitors annually
● Big app, hard to maintain, slow
● Web app for desktop in PHP,
mobile in React
● 65k lines of PHP, 20k lines of JS
Italist

3. Extract template
rendering from PHP,
use React to create UI
Unify web app for
desktop and mobile
Separate apps for
different parts of the
page: shop, account,
admin, checkout
Divide backend into
smaller services
What are we aiming for?

4. Strong separation
of layers between
frontend and backend
Easier to test
the JS part of it
Easier to maintain
smaller apps
Allow an easier refactor
of the back end
What's to be gained?

5. Technology stack
GoalBefore Now

6. ● A big release when everything is ready
● Deadline we need to keep
● Risk of overlooking features or pages
How to do it? Just rewrite it!
Requirements
Design
Implementation
Testing
Deployment
Maintenance

7. ● Single React app for single page
● Small, iterative releases
● Working product at every point
● Gradually removing old code, nothing
should be overlooked
Introduce React iteratively

8. Multiple React Apps

9. Injecting data in React
PHP
Views
Controllers
Routing

10. Injecting data in React – approach 1
PHP
Page
API
Page
API
React
JSON

11. Injecting data in React – approach 2
PHP
React
Controllers
Routing

12. Injecting data in React – simplistic view

13. Before you start – automatic tests
• Regression risk – e2e at least for critical paths
• Prefer structure agnostic selectors
• Proper research before selecting testing tooling
• Tests have to run as part of CD/CI cycle

14. Before you start – common store
• Combining multiple apps into one
• Datatype mismatch will reveal at last stage – runtime
• Tackle by:
 Extracting common code to a library/module
 Introduce static typing – typescript

15. Our app’s html

16. Single Page Application
Download
minimal HTML
Download JS Execute React
Page fully
usable

17. Is SPA right for e-commerce
Possible SEO issues
Slow initial load
Nothing displays during initial load until done
Fast subsequent pages

18. Server Side Rendered html

19. Server Side Rendering
Download
pre-rendered
HTML
Download JS Execute React
Page fully
usable

20. Comparison
Possible SEO issues
Slow initial load
Nothing displays during initial
load until done
Fast subsequent pages
SPA
No issues with indexing and
ranking
Fast initial load
Displays content even before
react is loaded
Slower subsequent pages
SSR
Need a node server

21. • Build on top of React
• Supports Redux
• Requires Node backend
• Code needs to run on server
and client

22. Required changes - structure
Top level components reside
in pages directory

23. Required changes - data
Data usually fetched in
componentDidMount() in React
In next.js through
getInitialProps()

24. Required changes – client routing
Use Link for client side
navigation
Use withRouter to access
Router singleton

25. Conclusions
• It can be done ☺
• Iterative React introduction is easy
• Remember the e2e tests
• SSR works for online shopping
• 36k lines of PHP, 37k lines of JS

26. Thank you