A design system is a collection of reusable components that go from very small things like icons to larger ones that may be made up of many of the smaller components. Design systems are popular among growing businesses and often simplify development and make code bases and designs easier to scale. In addition, they also help create a brand identity and a consistent experience for the user.
There are some key ways that modularization can make life easier for developers. The more you repeat patterns and the less you similar CSS, the easier it is to keep things accessible and the simpler it is to maintain. CMS Hub's components were made to enable building design systems that work for both developers and marketers, composed of different sized building blocks: Themes, templates, partials, dnd areas, sections, and modules - being the smallest.
What are web components?
Then to display the component itself you write HTML:
Using web components in HubSpot custom modules
You may already be seeing how this can fit in with custom modules that you build for CMS Hub. The HTML, CSS, and JS that's all tied to the display and interactions with that web component can be taken advantage of inside your modules to simplify their code and make your code more DRY (Don't Repeat Yourself). This lets you keep your module code focused on what it does that's different from your other assets that use that component, and reduces the duplication of code across a website project.
To use a web component in your module, you add the
require_js HubL function to your module.html file and then add the custom HTML tags you created.
If you have module field values you want to pass to the module, you do it the same as you would with standard HTML elements.
Using web components in HubSpot templates
Very similar to how you would approach modules, with HubSpot templates you would include that same
require_js HubL function and then add your HTML tags.
I personally like the idea of keeping the require statement close to the code that actually requires it (pun intended). It helps you find where the web component is coming from if you or a coworker needs to find it later. The
require_js statement by default loads in the footer and the same file will only be called once per page.
A useful tool in your web development toolbox
Since web components are largely self-contained, using
require_js in HubL makes it easy to call them when and where you need them and the same component can be used in multiple modules and templates at the same time. Using all of the CMS components and web components together can make your website builds faster and maintenance easier.