What the HubSpot CMS Hub Means For Developers: 5 Things HubSpot Developers Need To Know Now

HubSpot’s CMS Hub launched this week and, boy, oh boy, are there some exciting new features! From the drag-and-drop page editor, to shared theme variables and functionality, to even serverless functions, the capabilities of the HubSpot platform have exploded seemingly overnight. 

What does this mean for developers already familiar with and building projects on the HubSpot CMS platform? How much will they need to change their workflow skill sets in order to rise to the challenge and get the most out of these new CMS Hub features? 

Let's dive into the five things HubSpot developers need to learn in order to adapt to the new CMS Hub:

1. Local Development Practices

Over the last few years, modern web development has made a triumphant return from cloud editors to the local development machine. Local development means that developers can use tools such as code compilers, package managers, linters, and other tools in conjunction with integrated development environments (IDEs) that allow us to write more high-quality code in less time.

This also means that we are not directly affecting live production websites, but rather working in “sandboxes” where no error messages can impact live traffic. Knowing how to use local development tools and setting up your own personal local development workflow will impact every step of your development process.

By far, the most popular IDE for general web work is Microsoft’s Visual Studio Code (also known as VSCode). It’s a cross-platform IDE, meaning it can run on Windows, Mac, or Linux. It has an intuitive and attractive interface, wide plugin support, customization features such as themes and code fonts, as well as an integrated terminal for running your command line code (more on that in a bit). Some plug-ins even allow for local live previews of your code output.

Once VSCode is installed and running, you'll want to install Node.js and the associated command line Node Package Manager, or npm. Node.js is a JavaScript runtime that runs on a server, meaning we can write server-side code using very similar JavaScript syntax compared to standard web JavaScript.

npm is our best friend when it comes to installing, managing, and using different dependencies to help us compile our code. npm allows us to use such tools as Gulp, SASS/SCSS, and JavaScript compilers such as Babel. These tools let us write more modern code (and less amounts of it) without having to worry about also writing for older browsers. The tools compile and automatically update our code with the appropriate syntax, fallbacks, and polyfills that we would typically have to write ourselves.

2. Command Line Interfaces (CLI)

Command line interfaces are crucial tools in modern web development workflows. They enable developers to install, manage, and use a multitude of lightweight applications built specifically for developers. Command line interfaces are applications that don’t have a graphical user interface (GUI) attached to them. They often serve a simple purpose, such as moving, creating, or otherwise processing files in a project folder.

HubSpot has created its own CLI for use with local development of CMS Hub assets. This is the tool that will facilitate developers downloading, creating, and uploading their work to and from the cloud. (Learn more about the HubSpot CLI.)

Modern web development is incredibly dependent on CLIs in three main areas: managing dependencies and local tools, Git usage, and deployment tasks (we’ll get into each of these further in the post). Understanding how basic CLIs function is crucial for a developer to follow HubSpot’s new best practices.

3. Version Control

Just because web development has moved back to the local development machine does not mean that developers can no longer work collaboratively on the same project. Version control systems—in addition to being tools for security, reliability, and backups for web development code—allow multiple developers to work on the same project at the same time without overriding each other's changes. How is this done?

The answer is Git, a tool that allows an individual developer to save every iteration of their code as a “commit.” Git’s true power, though, is in its organizational workflow. When working collaboratively on a Git project via a cloud repository tool like GitHub or Bitbucket, developers can create “issues” for the project. Although issues typically refer to bugs or other errors that need to be fixed, they can also be used as simple task lists. For example, when building out a website, each module could be logged as an individual issue. 

The individual tasks then can be assigned to separate developers within one project. The developer will then create a “branch” or project variant that is separate from the master version. Their code should only be scoped for the specific issue they are working on. Once complete, they can commit their code back to the repository and create a pull request for their work. Someone can then review their branch to verify it is ready for production and merge that branch into the master. Afterward, other developers working on other issues can pull the latest version of the master into their local branches.

HubSpot Academy "Prof Tip"

"The combination of themes, modules, and drag and drop HubL tags is a powerful toolkit for developers to optimize editor experiences. The secret sauce is communication. When developers take on a consulting role and work with marketers to design editing experiences, the full power of the HubSpot CMS makes both parties more efficient and successful."

- Rachel Sheldon, Inbound Professor

4. Serverless Functions

CMS Hub’s biggest new feature is the inclusion of serverless functions as part of website projects. From a high level, a serverless function is one that can use resources provided by a cloud provider instead of resources on a dedicated server (think of it like shared hosting for server-side functions). This means that a function that previously would require purchasing and provisioning a virtual personal server (VPS), installing an operating system, installing your runtimes and languages, installing a web server, and other developer operations (DevOps) tasks is now simplified. All you need to do is write code.

One of the most powerful features of serverless functions is the ability to do server-side authentication, meaning that you can utilize APIs using more secure methods than those available strictly on the client side of a webpage. This means that you can mask an API key or generate OAuth tokens without exposing any of these credentials to nefarious end users. 

This opens up all kinds of possibilities to do more asynchronous data management, as is commonplace in the world of front-end JavaScript frameworks and web apps. Data can be sent back and forth from a webpage to a server and database independent of the actual webpage load request.

A sample use case includes managing the HubDB API asynchronously, meaning data is sent to HubSpot and then received on the same page without needing an additional page load. The data loads in real time as the user is on the page, similar to Twitter loading new tweets at the top of a feed in the background. Beyond HubSpot-specific use cases, serverless functions allow developers to create more app-like experiences by dealing with real-time data without the overhead of setting up proxy servers or otherwise spending unnecessary time on mundane developer operations tasks when all they need to write is a few lines of server-side code.

5. Front-End Frameworks

Finally, one of the most important concepts HubSpot developers need to learn are front-end JavaScript frameworks. HubSpot has made it clear that it is building its CMS not for the web of yesterday or today, but for the web of tomorrow. That means more interactive and app-like experiences for the end user embedded within websites. 

These types of interactions are primarily built using front-end JavaScript frameworks, such as React and Vue. React and Vue have very distinct workflows when compared to traditional web development or even traditional app development, and learning the workflow for these types of frameworks will be a huge advantage when structuring your HubSpot CMS projects.

React isn’t important to learn just for the sake of using React. Rather, the value of React is in what's called “Thinking in React.” React has a strict structure of parent-child relationships, especially around the concept of components. React components had a major influence on HubSpot’s original rollout of custom modules, an isolated file that consists of self-contained HTML JavaScript and CSS and can be reused throughout a project.

If you're looking to learn more about React, especially from a web development point of view, I recommend spending a weekend, creating a Gatsby site, and learning about that ecosystem. Gatsby creates static HTML JavaScript and CSS files using React. Because many React tutorials are based around creating an app, Gatsby is a great alternative for learning React strictly from a web development point of view.

Bonus: Marketer Experience

Here's a bonus concept that developers should consider as the new CMS Hub begins dramatically changing the relationship between developers and marketers working in HubSpot portals:

Developers are no longer responsible for simply creating page templates and blog templates the way that we have been in the past. On CMS Hub, we are building website themes and modules that will serve as dynamic assets to be used by the marketers we work with. 

A marketer should no longer need to contact a developer if they need to change a website’s primary colors or other global content. Instead, we as developers should use CMS Hub tools to create assets with the marketer’s experience in mind. If we make our modules and themes/templates as flexible as possible, marketers can quickly and easily update their content. 

The more a marketer can do with the assets you build, the more time you’ll be able to dedicate to things like interactive experiences, animations, and other advanced features in order to differentiate the websites you build and create more powerful user experiences.

As a developer who has worked on the HubSpot platform for over six years now, there has never been a more exciting time to be a part of the developer community. HubSpot’s CMS Hub is a concrete sign that the company is focusing on the developer experience and pushing for its platform to be the best CMS on the market. Its team is taking inspiration from the biggest and the most cutting-edge platforms available, but never forgetting that the marketer experience lies at the core of its product. 

HubSpot developers have the task of learning from the rest of our industry just as HubSpot has. Now is the time to innovate, experiment, and push these new features to their limits. To see how the SmartBug^® team innovates on the HubSpot CMS for our clients, check out our client showcase.