Getting the best of two worlds- a tryout with ReactJS and Symfony

During the hack a week I wanted to investigate how a hybrid web application can look like. My general idea was driven by the plans on splitting the frontend in smaller templates, that they can be deployed independently.  For this idea I wanted to use modern technology, which is already well known in the frontend teams, so I took Symfony as the middleware and ReactJS for the frontend part. I have chosen ReactJS, because of my personal experiences in the past.

My first idea was to implement the php bundle in our existing frontend, but after several try outs and more ideas dropping dead, I decided to use an example for the react bundle from github.

The integration of the bundle seems to be really obvious, because it is using twig. In twig you only had to set some flags and the ReactJS templates will be render inside these twig templates. For getting the data from Symfony to React they are using Redux which enrich the state of the templates with the data. But since Symfony is missing the interactivity for the user without reloading the page, React is filling this gap and makes it possible reload only some parts of the current page.

Code snippet for the place to render the React template

Symfony is calling data from the back end and renders the react template with initial state and provide it to the frontend. And this behaviour brings a huge feature which React is missing, because it makes the React components readable for crawlers. Basically crawlers don’t read JS and missing it for the whole page. Unfortunately React creates the HTML so for crawlers a React page is mostly blank. But not in this case and developers don’t have to provide pages which are only accessible by crawlers.

Diagram for the actual architecture

My conclusion is that something like this can be really interesting in our environment and can make the developers life easier in relation of the self written tons of lines of Vanilla JS to get something done for only one use case in our web shop.