Creating a javascript widget for other sites

Question

I am looking to create a javascript widget that can be hosted on other sites. For example. I want to host javascript code on my website:

http://scripts.mysite.com/mywidget.js

(Think like Google Analytics).

Basically I want to distribute data using this javascript. But I am not sure of the following:

• Are there different rules for development when creating javascript for another site (cross site).
• Are there any sites explaining these differences?

Answer 1

I would try:

• Make it customizable

  • Download external style sheets?
  • Where can I find the resources I need? (images, style sheets)
  • What layout / size should I have?

  By doing this, you allow the user to decide whether he wants your widget to automatically load the stylesheet or if he wants to accept it. If he does, he can also update the styles to better match the page on which the widget is located.

• Provide a wizard to create a code snippet for inclusion on the page
  • Ensures that even moderately technical users can use your widget
• Make it easy.
  • Serve all thumbnails and compressed
  • Serve with cache headers, electronic tags, the latest changes and all the useful headers you can think of. This will reduce the load on your servers and also make your widget more responsive.
  • Try to avoid library dependencies or check if they are loaded on the page where the widget is used before they are loaded.
• Beware of conflicts
  • The prototype uses $ as well as jQuery. If your widget depends on Prototype, and the page it is hosting uses jQuery without noConflict-mode , problems will occur
  • Do not shrink the global namespace!
    • If you do not want anyone to interact with your widgets, put it in an independent executable function in the closure and do not create global variables at all
    • If you want users to be able to interact with your widgets, say, to add event listeners, etc., require one global variable, say ExampleComWidget as an object literal and put your methods there. The user can then interact as: ExampleComWidget.addListener('update', callback);

• Use smart markup

  • Be sure to use the scope of your classes and identifiers to avoid conflicts as much as possible

    those. if your company name is example.com, you can use classes like: com-ex-widget-newsItem

  • Confirm your markup! You do not want to break the user site.
  • The semantic markup is fine, but you can avoid the <h1> -tags, as they have a particularly high SEO ranking. You could probably use <h4> and less. This bullet may be slightly disabled. If in doubt, using semantic markup is much better than not.
• Get data from your site by inserting script elements
  • This is a reliable way to make sure that you deal with restrictions of the same origin.
  • Attach onload-listener to the script element to find out when the data is ready, or use jsonp

Answer 2

I think this is a great entry on how to implement an inline script. http://alexmarandon.com/articles/web_widget_jquery/

Answer 3

Your script should not interfere with the rest of the page.

• Keep the number of global minimums (one namespace object should be enough)
• Do not add properties to inline objects for no reason
• Don't expect to be the only script that listens for events like window.onload
• If you use for.in loops, keep in mind that other scripts may add material to Array.prototype
• Consider style sheets. The default HTML style may have been changed.
• Do not update your script for no reason, as you risk breaking many sites.

Answer 4

What PatrickAkerstrand said is 100% true.

Here I want to add a development environment to vanilla JS, which can save you a lot of time and effort to implement it, since everything is thought out, honed and tested. It remains only to define your own widgets and use them.

Here is an example of how it looks.

Widget code

 // inside a js file of a widget class (function () { var Module_Path = ["WidgetsLib", "a1", "Button"]; var curr = this; Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]}); specialize_with(curr, { CSS_Literal: ' .{{WIDGET_CLASS_ID}}_Something { color: hsl(0, 0%, 20%); } ', HTML_Literal: ' <div onclick="{{WIDGET_INSTANCE}}.onclick(event)" class="{{WIDGET_CLASS_ID}}_Something" > SOME SUPER COOL WIDGET </div> ', new: typical_widget_new, }); })(); 

HTML:

 <div id="w1" style="background-color: hsl(200, 50%, 50%);"></div> <script src="WidgetsLib/a1/Button/js"></script> 

Custom JavaScript Code:

 var b1 = WidgetsLib.a1.Button.new("w1", { onclick: function(ev) { ev.target.style.color = "#ffff00"; console.log("====== HERE"); } }); 

Please download and open Widget_v2.md.html in a browser, this is https://github.com/latitov/JS_HTML_Widgets .

What do you get:

• very interesting article about this;
• code fragments and examples;
• ready to use ... vanilla JS framework for creating your own widgets;

And enjoy creating reusable widgets of arbitrary complexity, easily!