Embedding React into legacy web pages
20.01.2017
The product I am enthusiastically working on - Navigo3 - was historically written as combination of XSLT and JSP. Do you remember XSLT?
Short time before I joined it it was decided that is should be remade in React.js. It was great decision but transition is not that easy.
Because Navigo3 is in production usage we have to transform from XSLT to React step by step. Some pages are that complex that it would be handy being able to combine XSLT and React on single page. Typically it is required on pages that combine many types of information - dashboards. A few graphs, tables, list of tasks, ... It would be hard to rewrite all at glance. But rewrite each one is quite simple.
At the same time we have new pages which are written completely in React and uses hashtag navigation. In main entry file index.js there is redux-router hierarchy and it expects that it runs on purely React page. This actually does not match with demand to embed some components into JSP/XSLT static page with classical URL navigation, right?
But I would like to share React components between brand new react pages and legacy XSLT pages! And at some moment just compose React page from existing components and abandon legacy ones. So how to do that?
- Prepare second entry file (like indexLegacy.js) and prepare build task for it (we use Webpack).
- Insert result bundle file via into JSP/XSLT pages right before