Why React is not a good idea for HubSpot CMS?

According to a 2021 Stack Overflow survey, React is the most popular web framework. Because of its wide popularity, it’s no surprise that many developers are tempted to use React when building a codebase for HubSpot CMS. But is gravitating to React by default a good software architectural decision? Take a closer look.

How is React used in HubSpot CMS? By applying a workaround

If you have spent time researching this subject, you likely came across this GitHub repository under the HubSpot organization. It’s usable, but it’s way too much code just to display a simple component. Actually, it's a whole freakin’ React application.

Let's break this repository down:

1. In the `src/modules/app.module`, <script> tag with type as `application/json` is defined to entail the HubSpot CMS module content. The HubSpot CMS user enters module content.
2. In the `src/index.js`, the <script> tag is parsed to pass on the module content to React component.

Why do we need a workaround?

The previous section described a workaround that makes React work with HubSpot CMS, and it is the recommended method of using React with HubSpot CMS.  Why is this workaround necessary? Here are the two reasons:

  1. React requires compilation

React uses a template language known as JSX. Because JSX requires a special type of compiler called Babel to translate JSX to Javascript, a compilation process is mandatory. We need the above workaround to pass CMS module content to compiled React code. React applications use the NPM ecosystem and almost always have NPM dependencies. Another reason you need an additional compilation step.

  2. React templating language incompatible with HubL

JSX is compiled and processed on the client side, whereas HubL (the HubSpot CMS template language) is processed on the server side (inside the HubSpot CMS cloud). But that's not what causes the incompatibility, it's because you cannot use HubL code inside the JSX as Babel cannot digest it and spits it out!

Therefore, we need the above workaround to let HubL communicate with JSX.

5 challenges of using React with HubSpot CMS

  1. Using React is overkill

We have seen developers use React to build a widget for their HubSpot CMS website. But layering a full-fledged React application to build a widget is overkill! One of the most basic principles of software engineering is to“Keep it Simple, Stupid (KISS). React is not the only game in the town; look for simpler solutions!

  2. Compatibility issues

React was not built by Facebook with HubSpot CMS in mind and vice versa. Hence, you’ll become well-versed in the world of workarounds. React is suitable for complex web applications where more than one developer collaborates, whereas HubSpot CMS is a platform that allows creators to manage their websites. And since it’s only designed to manage websites, any functionality beyond standard website functionality requires integration with HubSpot.

  3. Technical Debt

The above repository demonstrates a simple React component. What if it wasn’t a simple component? Clutter can quickly build up. It's like signing up for technical debt, and that comes with the cost of added labor.

  4. SEO

Search engine optimization is the key that drives your website's traffic, making it crucial for your business. React is for single-page applications (SPA), which are notoriously bad for SEO. If you want to build a website as a SPA, then you should check search engine friendliness off the list. Never build a website as a SPA.

  5. Security

Did you see how the module content was rendered plain in `src/modules/app.module`? Many cybersecurity experts recommend obfuscating code and content, making it difficult for hackers to reverse engineering or exploit security vulnerabilities. Always obfuscate your code before pushing it to production!

Recommendations

We recommend using vanilla Javascript or lightweight frameworks like Alpine.js in your HubSpot CMS websites instead of React. We use Alpine.js at HubBase and highly recommend it for its flexibility and ease of integration with the HubSpot CMS ecosystem.

Using a framework like Alpine.js helps reduce the boilerplate code and integrates very well with HubL.