Download to read offline
Uploaded bySparkbit
From PHP to React - case study
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.
From PHP to React - case study
- 1. Introducing React into PHPapp 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 fromPHP, 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 layersbetween 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.
- 6. ● A bigrelease 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 Reactapp for single page ● Small, iterative releases ● Working product at every point ● Gradually removing old code, nothing should be overlooked Introduce React iteratively
- 8.
- 9. Injecting data inReact PHP Views Controllers Routing
- 10. Injecting data inReact – approach 1 PHP Page API Page API React JSON
- 11. Injecting data inReact – approach 2 PHP React Controllers Routing
- 12. Injecting data inReact – 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.
- 16. Single Page Application Download minimalHTML Download JS Execute React Page fully usable
- 17. Is SPA rightfor e-commerce Possible SEO issues Slow initial load Nothing displays during initial load until done Fast subsequent pages
- 18.
- 19. Server Side Rendering Download pre-rendered HTML DownloadJS Execute React Page fully usable
- 20. Comparison Possible SEO issues Slowinitial 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 ontop 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 canbe done ☺ • Iterative React introduction is easy • Remember the e2e tests • SSR works for online shopping • 36k lines of PHP, 37k lines of JS
- 26.