Widgets

#Widgets

When creating an UI (widget) solution for integration at a wide scale of websites, be aware that you don't own the page:

• Don't make any assumptions about the page code.
• Minimize as much as possible the page impact of your code.

For each section below guidelines are defined that should be adhered to, in order to minimize the page impact.

##CSS Follow the listed guidelines to avoid style conflicts:

• Do not define or override global CSS (selector) styles.
• Encapsulate all CSS styles to avoid style conflicts with hosting page.

##JS Follow the listed guidelines to avoid script conflicts:

• Don't pollute the Javascript global scope:
  • Encapsulate your functionality.
  • Minimize the number of global variables.
  • Namespace the global variables of your code.
• Don't modify shared (native) JS objects.
• Keep DOM manipulation to a minimum outside your application.
• Never use document.write statements, unless you have a very good reason for the need of blocking behavior.
• Manage your code dependencies (i.e. generic libraries/frameworks) carefully:
  • Avoid duplication and version conflicts:
    • Re-assign public library objects names to local variables inside your encapsulated code.
    • jQuery sample: use .noConflict() method.
  • Decide on which dependencies you might bundle or conditionally load (depending on availability on page level).
• Never use global library shorthand variables directly in your code. Use encapsulated references instead:
  • jQuery sample: only use the $ shorthand, as a variable reference (from global jQuery object) in your scoped code.
• Program your code defensively. Especially the initialization/bootstrap part of your widget is important. Take into account that your Javascript file may be loaded more than once during page life time.

##Security Follow the listed guidelines to minimize security risks:

• Make sure the code is SSL proof. Tip: Use protocol-less requests (//[your uri]).
• Prevent XSS (Cross site scripting) leaks. See OWASP for more information: https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet

##Performance Follow the listed guidelines to avoid performance issues.

• Make sure the code can be loaded asynchronously, on demand.
• Make sure that all code is delivered in an optimized state (minified, compressed and bundled) to the end user. This is the responsibility of the owner, who is hosting the solution.