RevillWeb / img-2

Replace <img /> elements with <img-2> to automatically pre-cache images and improve page performance.
MIT License
1.89k stars 63 forks source link

Remove bower dependencies #18

Open Nevraeka opened 6 years ago

Nevraeka commented 6 years ago

@RevillWeb is it a good idea to remove bower and replace it with cdn links via unpkg or rawgit or even an embedded polyfill? I've already done it for some of my components.

Basic Example:

  if(!window.customElements || !HTMLElement.prototype.attachShadow) {
    loadScript('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-sd-ce.js', loadSomeElement );
  } else {
    if(!window.customElements.get('some-element')) {
      loadSomeElement();
    } else {
      load();
    }
  }

  function loadScript(url, callback){
      const script = document.createElement("script")
      script.type = "text/javascript";
      if (script.readyState){
          script.onreadystatechange = function(){
              if (script.readyState === "loaded" || script.readyState === "complete"){
                  script.onreadystatechange = null;
                  callback();
              }
          };
      } else {
          script.onload = function (){ callback() };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
  }

  function loadSomeElement() {
    loadScript('https://cdn.rawgit.com/Nevraeka/some-element/master/some-element.js', load);
  }

  function load() {
    if (!!!window.customElements.get('my-element')) {
      window.customElements.define('my-element',
        class MyElement extends HTMLElement {
        }
      );
    }    
  }
RevillWeb commented 6 years ago

The downside to this is if a developer doesn't want to load these scripts via a CDN. For example, when you wrap an app in a cordova shell you don't want to be loading files from the web as the app needs to work offline and its also much faster to load the files from the file system. You could, of course, make this behaviour toggleable but then you're adding more code to the components that might not be needed. Additionally, if the user wants to load a different version or different polyfill entirely they can more easily do this if they are in control of how it gets included in their app.

I like the idea of removing these decisions away from the developer and just having the component do everything which is needed but I think more flexibility is better here. Plus there will be some lucky developers that won't need any polyfills at all!

Would like to hear your thoughts on the above @Nevraeka.

Thanks!

Nevraeka commented 6 years ago

Great point on the embedded Cordova app. Thank you for responding. Those apps would have full support and would likely not need polyfills unless they are locked down to an old cordova or old version of webkit (please correct me if I am wrong since I haven't used cordova in a looong time) Maybe its worth have a build that embeds the polyfills needed for img-2.

My thinking is that components should always 'self manage' , meaning load their own dependencies and assets. This is in line with the Gold Standard approach.Maybe you have a target build for mobile apps embedding this in a web view in addition to the other builds.

thoughts @RevillWeb ?