UI

Today, if you're doing web development, there are countless options you may be utilizing to present content to your users. Some of these options include server-side rendering using languages like Ruby, Python, or Javascript. Other options include client-side rendering using frameworks like React, Vue, Ember, or Angular.

Because of this, we chose to build out our component library using a newer feature in web development called web components. Using a symphony of browser features, we are able to create custom HTML elements, complete with their own attributes, styling, and features.

Each of the components that Tecton publishes goes through an extensive design review, is well-tested, and is built with accessibility in mind. Additionally, when bugs or necessary improvements are identified, we address them in our codebase, and then all the teams using the components get to reap the benefits.

Because web components get registered with the browser as HTML elements, their use is pretty straightforward. For example, if you want to display a q2-btn element with a q2-icon on the left side, it's as simple as this:

<q2-btn intent="workflow-primary">
  <q2-icon type="edit"></q2-icon>
  <span>Edit</span>
</q2-btn>

Additionally, you can use JavaScript to easily update properties on the element, just like you can with any other HTML element:

const btn = document.querySelector("q2-btn");
btn.disabled = true;
btn.intent = "workflow-secondary";

Lastly, you can even listen for events that get emitted from the element:

const btn = document.querySelector("q2-btn");

// Using event listeners
btn.addEventListener("click", () => {
  // Do something
})

// Using native attributes
btn.onclick = () => {
  // Do something
}

We are really excited about web components and the benefits they bring to any technology stack. Feel free to explore the list of components we offer as the list keeps growing along with the features of each.