Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure

Hello, everyone, and welcome to Accelerating Value with HubSpot's deployment process and team structure. I'm Bree, a frontend engineer turned developer advocate here at HubSpot, and I'm so excited to be your host for the next 20 minutes while we discuss ways that HubSpot accelerates value to its customers through engineering practices. I'm from the Atlanta, Georgia area, which is in the southeastern part of the United States, and when I'm not working, you can usually find me creating fun technical content online, playing video games, or snuggled up with a good book.

Over the next 20 minutes or so, we're going to discuss HubSpot. We'll discuss ways that we help our customers grow and the engineering philosophy and principles that we follow that allow us to continuously integrate. By the end of our time together, my goal is to leave you with strategies to ignite creative dialogue about innovation, ultimately leading to accelerated value for both you and your customers.

So let's start with what is HubSpot? HubSpot is a leading growth platform that empowers over 228,000 businesses of all sizes in 135 different countries to scale and succeed in the digital age. HubSpot provides a comprehensive suite of tools designed to enhance and optimize sales, marketing, customer service, and customer relationship management. Our overall goal is to help organizations attract and engage customers by providing seamless, integrated solutions that foster meaningful connections and drive sustainable growth. HubSpot's robust suite of products is designed to support businesses at every phase of their growth journey, but what really sets us apart isn't just the tools that we offer. It's our commitment to putting customers at the heart of everything that we do.

So let's dive into our customer-centric approach and how it defines the value that we deliver and drives our mission to empower every business that we serve. This is a quote from Whitney Sorenson, who is HubSpot's CTO, and I believe it perfectly captures our customer-centric approach. It reads, we'll only stay in business if we continue to provide value to and maintain trust with our users. Customers don't care about our teams, organization, processes, or promises. They care about what they're seeing, using, and feeling in the tools that they use every day.

So how does this translate into what we do every day? Well, the first thing is we focus on value delivery. The true measure of our success comes from how effectively we provide real, tangible value to our users. The second thing is we prioritize the user experience. So our priority is to ensure that everything that we create is intuitive, effective, and beneficial to the user. We prioritize the user experience in a few different ways, two of which being, number one, creating tools that seamlessly integrate into other platforms our customers are already using. The HubSpot Marketplace plays a very important role in extending functionality of our core offerings. We enable developers to build on HubSpot with familiar tools, like React, to build custom experiences for our users.

Another thing we do is invest heavily into UX research, and this allows us to create intuitive interfaces. HubSpot's internal design system provides a foundational framework for consistency and enables our front-end engineers to quickly prototype and create new features. HubSpot has also created a UI component library for our app developers that seamlessly blends both native and extended functionality. The third thing is we work hard to build and maintain trust. Trust isn't built on promises, it is cultivated through consistent, reliable interactions. We work to build and maintain trust in a few ways, two of which being, one, maintaining open lines of communication with our customers, and we do this by providing regular updates on product enhancements, changes, and outages. We also build our products on a platform that scales to accommodate growth and optimize resource utilization. This really helps us to ensure that customers experience uninterrupted service and can rely on consistent performance.

To our customers, results matter more than our methods, but behind the scenes, it's our team structure and engineering principles that allow us to deliver. HubSpot's engineers need to be able to move quickly to deliver continuously, improving on the product based on customer feedback. We do this by working in small, specialized, autonomous teams, typically around five people or less. And while the tech industry sees a surge in full-stack development roles, HubSpot also sees the unique value and benefit in offering specialized team roles. So many teams within HubSpot's product organization are split by front-end and back-end specialization. In smaller teams, there is a greater likelihood of developing psychological safety. A safe team environment encourages continuous learning and experimentation, which are both vital for innovation. Small team autonomy also allows engineers to think like a product manager, where every team member has both the opportunity and responsibility to make decisions. Working on small teams, knowledge sharing and cross-team collaboration are absolutely crucial. Having a unified tech stack between teams makes that a lot easier.

HubSpot's front-end tech stack currently includes TypeScript, React, Redux, Styled Components, and GraphQL, among others. By selecting one tech stack, we can create opinionated support, tooling, and guidance around them to empower our developers to work and innovate quickly. By leveraging the strength, power, and agility of small teams, HubSpot creates an environment where innovation truly thrives. This team structure accelerates development and empowers our engineers to take ownership of the product's direction.

Now that we've discussed who we are and how we work, let's dive further into the magic behind the scenes. From a front-end architecture that keeps our front-end flexible to continuous delivery and developer experience tools that make the development process quick and smooth. As HubSpot has evolved as a company, so has our front-end architecture. HubSpot's UI is comprised of many client-rendered SPAs, or single-page applications that are built with React, React Router, and our internal design system, in addition to a few other core libraries. As we develop hundreds of these vertically split applications, HubSpot has had to continuously adapt and innovate our front-end architecture and practices to maintain high performance and also support consistent user experiences.

Delivering value quickly and reliably is a top priority, and our CICD process is at the core of that mission. By automating integration, testing, and deployment, we sustain a rapid flow of product enhancements. To make this process possible, we rely on the amazing developer experience tooling our front-end platform team has created and strategic testing strategies. These two components streamline our workflow and help us to guarantee the quality and reliability of our products.

HubSpot's front-end platform truly makes life easier for our developers. Crafting our own tooling means that we can design everything the way that we like, perfectly fitting our workflow. This ensures, even as our team and products evolve and expand, we keep workflows efficient and consistent across the board. Our comprehensive testing philosophy comes into play to ensure that our features are reliable. We've built a robust testing framework that uses great tools, starting with Jasmine and RTL, or React Testing Library for unit testing. We also harness the power of mock service worker to simulate API calls during testing, ensuring that we can test components in isolation without needing live back end services. And for our end-to-end testing, we use Selenium to automate the testing of our user journeys.

Next is a package manager to efficiently handle static dependencies, simplifying the process of managing and updating libraries, which allows our engineers to focus more on building features rather than on dependency management issues. Also created a deployment and test management platform that oversees deployments and tracks acceptance tests. This helps us to align with our CICD philosophy to automate and to simplify release cycles while maintaining high assurance in code quality. We've also created a code modification tool that's designed to run code modifications uniformly across numerous repos and modules. This tool substantially offloads the technical burden for engineers, enabling them to implement changes quickly and confidently. With our custom tooling, we really streamline workflows and reduce some of the technical load on our engineers.

Ensuring that our features are reliable is just as important, and that's where our comprehensive testing philosophy comes into play. We've built a robust testing framework that uses some great tools, starting with Jasmine and RTL, or React Testing Library for unit testing. We also harness the power of mock service worker to simulate API calls during testing, ensuring that we can test components in isolation without needing live back end services.

And for our end-to-end testing, we use Selenium to automate the testing of our user journeys. Our front end teams at HubSpot dive into three main types of testing. The first one is unit tests that involve verifying the smallest units or components of our applications function as anticipated. The next one is integration tests that involve verifying the interactions between multiple units to ensure they function as expected, essentially conducting unit tests at a container or a full page scale. And the third is acceptance tests or end-to-end testing. This involves testing complete workflows or paths that the user will take within the application.

To help our developers navigate this landscape, our front-end testing team has created helpful documentation. And what it does is it guides them in choosing the right type of tests by considering factors like whether the functionality is crucial, how predictable and maintainable the test will be, and if an API is involved. This helps to ensure that each test strategy aligns perfectly with the needs of the code base. In essence, our philosophy is about looking at the bigger picture while making sure the details are perfect. This balances both depth with breadth to keep everything running smoothly for our users.

Alongside our decision-making framework, we've developed internal tools that allow you to run your branch against code in other repositories. This proactive approach helps us to catch and fix potential breaking changes before they hit production. Now I will say bugs, sneaky as they are, still sometimes find a way through. And when this does happen, the same tools are invaluable for tracing back the specific builds affected by the changes. This capability means that we can swiftly roll back to a stable version and tackle the error without hassle, ensuring minimal disruption and a smooth user recovery.

So as we've journeyed through various different facets of HubSpot's approach, from our customer-centric philosophy and team structure to our innovative front-end architecture and comprehensive testing strategies, it's clear that every element intricately is designed to accelerate value to our customers. And here's how we do it. We embrace a customer-centric approach, keeping customer needs at the forefront, iterating quickly based on user feedback, and ensuring the solutions provided deliver real and tangible value. We foster innovation with specialized small teams by encouraging agility and ownership. By structuring teams to be small and specialized, we accelerate deployment and empower teams to make impactful decisions. We enhance developer efficiency with custom tooling by creating internal tools that are tailored to our specific workflow. These tools streamline processes, reduce manual efforts, and improve the overall developer productivity, allowing our engineers to continue to focus on innovation. And lastly, we prioritize comprehensive testing for quality assurance by integrating a testing philosophy that includes unit integration and end-to-end tests. This allows us to maintain high standards of both quality and reliability and also address issues early in the development cycle.

I want to thank you all so much for taking the time to join me here at React Summit today, and I want to shout out my amazing colleagues on HubSpot's developer relations team. If you're interested in developing on HubSpot or you're curious about the ways that you can use React on HubSpot, you can check out our QR code that will head over to developers.hubspot.com/react on HubSpot. We would also love to connect with you. You can follow us on the HubSpot developer socials like LinkedIn, YouTube, and Twitter for more. And if you have any questions for me or would like to connect, you can find me just about everywhere at Bytes and Free. Thank you!