Launching Crayons — Our New Web Component Library

Struggling to provide a great user experience for your apps on the Freshworks Developer Platform?

Source:Giphy

Wishing for an easy way to make your apps look and feel like they belong within the product they work with?

Do we have some news for you today! We are proud to launch a new web component library to help you build stunning apps for Freshworks. The icing on the cake is that it is open source too! Going with the “fresh but simple and powerful” theme that all Freshworks experiences bring, we decided to name this library “Crayons”. 🎉

😭 The Problems

We learned a lot from listening intently to the feedback our community — you — shared with us.

1. It’s hard to replicate the design system of the product. Developers spend a lot of time trying to make their apps look as close to the product as possible.
2. To make a UI component work and feel native to the product the app works within, developers inevitably spend more time writing loads of CSS rather than solving the business problem.
3. More code directly translates to more review effort causing delays in code reviews. Eliminating this would result in faster app reviews.
4. There were no out-of-the-box solutions for UI development for apps, except for a customized Bootstrap CSS file for each product that was usually behind the curve when the product’s styles changed.
5. When products change their UI design, apps would need to be re-written to accommodate the change.

All these problems demanded a solution that:

1. Works out-of-the-box.
2. Works across multiple frameworks and browsers. This is important as a lot of our developers use frameworks like React, Vue, Angular, and so on.
3. Is easy to use. We preferred not having a steep learning curve for the same.
4. Allows developers to focus on the business problem they are trying to solve and leave the rest to us.

🤩 The Solution

Searching for solutions that primarily work on multiple frameworks led us straight to Web Components.

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
-webcomponents.org

This means that you can build custom HTML elements similar to <video>,<audio>,<input>, and so on, and use them the same way you use native HTML.

Although custom elements can be built using vanilla JavaScript, we contemplated using Polymer, Svelte, and StencilJS to build these elements. And after a lot of experimenting, we settled for StencilJS!

An additional reason to adopt StencilJS is that it auto-loads polyfills based on your web browser.

Browser support for Stencil — Source

As it so happens, as an organization, Freshworks has been evolving a standard Design System for all its products. There was no better opportunity for us to build a component system that implements this design system.

🤔 How Do I Use Crayons?

To use it directly in your HTML file, use the CDN version from UNPKG.

Just add the following lines in your file:

Source: Giphy

Crayons is also available as an NPM module:

@freshworks/crayons

You can use any of the Crayon components just as you use HTML tags.

For example, for a button, you can use the following syntax:

<fw-button color="primary"> My Button </fw-button>

This will render a button like the one below:

Rendered button

How about a select component?

<fw-select label="Names" value="1" placeholder="Select the GOT house" state-text="Choose the house where you belong" multiple>
  <fw-select-option value="1">Starks</fw-select-option>
  <fw-select-option value="2" >Lannisters</fw-select-option>
  <fw-select-option value="3">Sand</fw-select-option>
  <fw-select-option value="4">Greyjoys</fw-select-option>
  <fw-select-option value="5">Tyrell</fw-select-option>
</fw-select>

Rendered Select component

It doesn’t get easier than this!

To check out and use other components, follow the docs hosted at:

Crayons

Sample Apps

Do check out our sample app repository to continue exploring how you could use Crayons in your apps.

freshdesk/marketplace-sample-apps

Celebrating Our Early Adopters

Earlier this year, we ran an Early Access Program (EAP) for Crayons with the challenge of developers using our new library to not just build apps, but also to get them published to our Marketplace. Three of our developer partners rose to the challenge and shared tons of feedback.

We would like to thank all our EAP partners for their feedback which helped us shape Crayons and iron out creases.

Also, we would like to celebrate the three apps that are already live and in the hands of customers today!

⭐️ Salesforce App by Success-Craft

Salesforce app

⭐️ Attachment Manager by Spritle

Attachment Manager

⭐️ Bitbucket for Freshservice by Nearsoft

Bitbucket for Freshservice

🎉 Start Contributing!

Crayons is officially Open Source under the MIT license. And, with the guidance from our developer community, the possibilities for this component library could be endless. We encourage the use of this library in unique and novel ways and would love to get your feedback. Also, your contributions to shape Crayons for the future that beckons is deeply valued.

Here are some handy links to get started today!

Github Repo🌟: https://github.com/freshdesk/crayons

Contribution Guidelines 🧑‍💻: https://github.com/freshdesk/crayons/blob/next/CONTRIBUTING.md

Community 💁: https://community.developers.freshworks.com/

We eagerly await your feedback, and maybe even a few PRs! 🚀

Source: Giphy