Best practices

While developing your new and awesome widget, make sure to follow these guidelines to streamline your code:

How to avoid CSS conflicts between the website and your widget?

Since your widget could be injected into any type of website, your widget will inherit from the CSS of this website, which can break the styling of your widget. To prevent this from happening, we recommend following these rules:

• Always prefix your class with a namespace: .abtasty-tooltip. Here, namespace is "abtasty". If the website has already a class named tooltip, it will not break your styles. You can use the BEM CSS notation for example (http://getbem.com).

• Use custom tags if possible: <tooltip>, so the styles from the website don't affect your HTML. If the website has a CSS rule like this: div {margin: 0 !important}, it will not impact your custom tag.

• Do not use IDs (#id). Widgets can be injected multiple times on a same webpage.

• Do not generate unique class or IDs (.tooltip-a3453). If your id is unique, the AB Tasty Editor will select this id for a modification, and lose it in production.

• Do not use iframe to avoid CSS conflicts. A Widget in an iframe will not be editable and stylable visually in the AB Tasty Editor.

// bad
<div class='tooltip'>
    <div class='content'>
        <ul class='list'>
            <li class='list-item'></li>
            <li class='list-item'></li>
        </ul>
    </div>
</div>

// good, prefix your class with a namespace
<div class='abtasty-tooltip'>
    <div class='abtasty-tooltip__content'>
        <ul class='abtasty-tooltip__list'>
            <li class='abtasty-tooltip__list-item'></li>
            <li class='abtasty-tooltip__list-item'></li>
        </ul>
    </div>
</div>

// best, use custom tags
<tooltip>
    <tooltip-content>
        <ul class='abtasty-tooltip__list'>
            <li class='abtasty-tooltip__list-item'></li>
            <li class='abtasty-tooltip__list-item'></li>
        </ul>
    </tooltip-content>
</tooltip>

Keep your widget size small

Your widget can be added on any webpage on any website. A heavy widget may slow the loading of the webpage down.
To do that, please try to:

• Use as few as dependencies as possible, especially the heavy ones like jQuery: http://youmightnotneedjquery.com/.
• Instead install the Widget utilspackage (https://www.npmjs.com/package/@abtasty/widget-utils) that contains small utility functions for your widget.
• Make the libraries that support the modulefield your first choice, then use ES6 modules and import the functions you use (instead of the entire library). The module bundler Rollup.js will take the module field by default to take advantage of this (https://rollupjs.org/#tree-shaking\.

Avoid adding events on window

When a user adds a widget on his website through the AB Tasty Editor, the configuration form has a built-in live reload that automatically resets the body of the page and re-injects the widget. The body is reset, but the windowis still the same, so your events linked to window will be piled up each time the user changes an option in your widget form. One way of preventing this from happening is to check if a given event is already linked to window before adding it. If so, simply remove it. You can do this by storing your event names and listeners in a global array.

Use automated unit testing to test your widget

In order for your new widget to be stable and secure, we recommend implementing unit tests as soon as it is bootstrapped. We recommend using Jest.