How can I isolate parts in a web page so that one part would not affect other parts

Question

I am managing a project in which development is done by multiple developers working on different parts of a web page. We are facing integration issues when combining parts of a web page due to side effects.

If a web part has an error, is poorly written, or is blocked by a web filter, that affects rendering of other parts of the web page.

Is there a way to cleanly compartmentalize a web page?

My research pointed out only share point web parts but not an approach or framework for this exact problem. IFrame Isolation is related but that solution is akin to placing a square peg in a round hole.

You can create "vanilla" custom elements, use iframe isolation, create components with any JS frameworks... so many solutions! — Supersharp, Nov 03 '16 at 13:54
@Supersharp Thq but I am looking for a robust solution which will isolate parts of the web page. These parts should not have any side-effects.I looked at iframe but it doesn't serve the purpose, I have edited my question to include the SO link though. — Sambhav, Nov 04 '16 at 07:26
I don't see in your update why you cannot use iframe, anyway you can try to use components like custom elements https://developers.google.com/web/fundamentals/getting-started/primers/customelements — Supersharp, Nov 04 '16 at 21:35
1. Because iframe execute in a single thread. 2. Iframe make it difficult to design responsive. — Sambhav, Nov 06 '16 at 23:01

Paul Sweatte · Answer 1 · 2017-05-24T00:10:05.170

If a web part has an error or is poorly written or if it is blocked by a web filtering, that affects rendering of other parts of the web page.

Use try/catch blocks:

window.addEventListener("error", function(e){return false;}, true);
try{angular.run();}
catch(e){console.log(e.toString() )};
$("body").append("<div>Hi</div>");

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

or lazy loading:

void(function foo()
  {
  /* get head element */
  var head = document.getElementsByTagName("head")[0];

  /* create script element */
  var jQueryJS = document.createElement("script");


  /* define script src attribute to lazy load */
  jQueryJS.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";

  /* append script */
  head.appendChild(jQueryJS);


  /* call tests after jQuery loads */
  jQueryJS.onload = function () 
    {
    $("body").append("<h1>Hi</h1>");
    }
  }() 
);

Other approaches include:

HTML5 sandbox/CSP-enabled security architecture
TreeHouse: web workers sandbox architecture
JSand: Secure ECMAScript(SES)-enabled sandbox architecture
ADSafe: virtual iframes

References

How can I isolate parts in a web page so that one part would not affect other parts

1 Answers1