How React Can Offer a Dynamic User Interface Experience on HubSpot

The Sky's the Limit

Throughout the course of ones HubSpot journey, you will discover and find all kinds of neat tricks and random, hidden features that really expand the ability of HubSpot to do something special. Eventually, after jumping into the HubSpot Design Manager and creating custom templates & custom modules, you start to feel like you hit a brick wall with the ability to do stuff with HubSpot's front end technologies. 

Enter React, a "JavaScript library for building user interfaces" (reactsjs.org). Boiling React down to it's very very bare basics, it effectively allows you to dynamically update and render the front-end of a JavaScript based code base as data changes, without the need of a hard refresh of the page. Additionally, React allows the ability to utilize a modular design for your program making it very easy and fun to program dynamic user interfaces and programs that change based on what your user does.

Now, what does that mean in non technical terms? Well, imagine you are a bus driver driving around the city to bring passengers to their destinations. With normal web & JavaScript functionality, every time the bus driver picked up a passenger, they would have to drive the passenger to their destination and then pick up the next passenger; not unlike a taxi driver. This makes the trip very long and unoptimized.

With React, the bus driver now has the ability to pick up lots of passengers, put them on the bus, and dynamically change and continue the route instead of individually dropping a passenger off at their destination before picking up a new passenger. This allows the bus driver to react to what is going on and not have to essentially start from scratch upon each pickup & drop-off of a passenger.

This is accomplished by what React calls "state management". Essentially, you assign something to a variable such as:

passengers = ["Thomas"]
busroute = ["Thomas' House"]

and anytime that variable is changed - whether it be adding, removing, updating etc. - React notices this, and re-renders any piece of code that is attached to that variable. So in our bus example, using traditional JavaScript, the bus driver would have to clear out that busroute and passengers variable before it can continue on, where with React we can just add as we need to the passengers & busroute variables and continue on our journey and shift accordingly:

passengers = ["Thomas", "Pawl"]
busroute = ["Thomas' House", "Pawl's Cat House"]

What seems like a very simple thing has suddenly opened the doors to interactive content on the HubSpot ecosystem.

Ok....What does this have to do with HubSpot?

Hidden away in a lightly used HubSpot git repository is a secret key to unlocking the unlimited potential of what you can accomplish with HubSpot. In a vaguely named repository called "cms-react-boilerplate" is the ability to generate and upload custom modules into the HubSpot ecosystem that allows the usage of React within.

Game Changer.

By cloning this git repository, connecting it to your HubSpot account and running a simple npm start command, the HubSpot React Module Boilerplate (please just rename it to this HubSpot!) creates and uploads a custom React based module right to the HubSpot Design Manager. You can now utilize the power of React with HubSpot wide system of content that support custom modules, including:

• Website Pages
• Landing Pages
• Blog Posts
• Quotes

Even better, HubSpot allows you to utilize the very powerful fields ability of normal custom modules inside your React module. So not only can you have dynamic content from outside the HubSpot ecosystem, you can also have it from INSIDE the ecosystem with content generated by users. How cool is that?! This alone is extremely powerful when wanting to utilize the dynamic features of React with the ability to easily provide a UI for page admins to  manipulate content. Imagine being able to let your users input data within the drag & drop editor which would then dynamically populate within the React application, essentially removing the need to use HubDB for smaller projects. How cool is that?

This also means that you can now load in external React based JavaScript libraries into HubSpot. Ever wanted to create a 3D world to showcase your new products directly from the HubSpot Product Library? How about creating a game to entice users to further interact with your content, ending with a HubSpot form to capture players information? Better yet, how about creating a really cool data driven dashboard for your clients data? The possibilities are endless (no, really, there are over 200,000 packages on NPM utilizing react)!

Aptitude 8 <> React

As the teams here slowly begin to integrate React based custom modules into our HubSpot installations, our creativity and imaginations start to run wild. For example, we had examined that HubSpot doesn't offer the ability to quickly and easily manage inventory without having to navigate a maze of menus and submenus that are confusingly named. 

The solution? A custom React based module.

By leveraging the dynamic ability of React to re-render without a full page load, we could now develop a front-end module that would allow authenticated users the ability to quickly and easily manipulate their HubSpot inventory, all within a HubSpot page itself. 

Let's review exactly what this module is doing:

1. React reads from the HubSpot product library all of the requested products we want/need.
2. React then takes that data, assigns it to a state variable (productLibrary) and iterates over it, creating a HTML based table.
3. If a user decides to edit a field, React listens to a onClick event handler on a field and then dynamically reacts to the input, inserting a input field. 
4. Once a user clicks Save, a trigger is sent to React to take the input in that field, send it via a PATCH request to the HubSpot product API to update the specific product and then triggers a GET request to get all of the new product data and assign it to the productLibrary state.
5. React notices that productLibrary has changed and re-renders the UI without a page refresh (instead, we have a placeholder "Loading..." text while React fetches the updated data).

A very barebones usage at its core, but immensely powerful and expandable for all kinds of functionality including the ability to add & delete products, create a shopping cart functionality with checkout & payment ability for end-users and much much more. 

While all of this is cool, there's room also for experimentation and having fun with users by utilizing React. As a proof of concept, we here at Aptitude 8 created a React module utilizing the react-three-fiber library, a react version of the popular WebGL JavaScript library three.js, that offers the ability to make 3D scenes right within the browser.

By filling out a form, we were able to collect user data and then dynamically model and populate a 3D environment showcasing the user entered data. The best part? Once we have that data, we can do anything with it. If we wanted to open a link to the users profile, we can do that! If we wanted to query the Spotify API to then play a preview of the submitted song within the page? You bet we did that! 

Notice how the song I entered dynamically shows up in the 3D space once processed by HubSpot? The best part is this is all within the HubSpot ecosystem! So we have access to user data, analytical data, other objects and so much more.  

What exactly is this module doing? Let's discuss:

1. React queries the HubSpot Contacts database for users who have a assigned favorite song.
2. React assigns that data to a state variable called userswithSongs.
3. React loads in the third party libraries such as react-three-drei, sending the above data to them.
4. react-three-drei generates a 3D space and creates 3d text modules by iterating over the userswithSongs variable.
5. React - on a timer - re-pulls data from the HubSpot Contacts database. If it see's a difference, it re-renders the scene without a page refresh.

So quite a few operations are occurring all in a split second within HubSpot. 

Limitations

Of course, there are some slight limitations. Outside of the normal limitations with React (questionable SEO, arguably JSX utilization, higher level of development required), you do have to deal with the extremely small package size that HubSpot supports uploading via webpack. The good news is you can tell webpack to minimize the project, affording you even more space and the ability to load bigger libraries in. As always though, it's best practice to only use external libraries that are essential to the project and not just there as bloat.

Overall

So we've learned about the basics of what React can accomplish within HubSpot. We can see through the above two examples the ability to offer an evolving, changing user interface experience right on pages hosted on HubSpot, while grabbing and interacting with data. What lies in the future of React & HubSpot is exciting and we look forward to future creations both that the team at Aptitude 8 creates, and our loyal blog visitors and HubSpot eco-system friends.

For one last parting tip, if you do decide to check out React modules and want to upload multiple custom React modules to your HubSpot account, make sure you go into the webpack.config.js file and change this line of code to something more descriptive:

plugins: [
  new HubSpotAutoUploadPlugin({
    portal,
    autoupload,
    src: 'dist',
    dest: 'cms-boilerplate-react',
  }),

If not, every time you upload a React module to HubSpot via the HS CLI, you will overwrite whatever existing one was there that had this name assigned to it within webpack!