Is there a way I can get 2 completely isolated javascript contexts inside a same web page?

Question

Consider the following piece of html code:

<html>
<head>
<script language="JavaScript1.5">
    // sdk code

    // root_scripts

    // component1 code

    // component2 code
</script>
</head>
<body>
<h2>simple page</h2>
Hi world

<div id="root"></div>

</body>
</html>

The lines component1 code and component2 code could be either just 2 includes to different js files, or really 2 pieces of javascript code, I don't care.

I am trying to understand how much 2 pieces of code can be isolated in the same page. For instance, suppose component1 code includes jquery and component2 code includes react js and the 2 specific versions I included have specific libraries. This means one component could break the other and they wouldn't be completely isolated.

Assuming both components would have to access dom elements in this html (so iframe wouldn't really be an option, I guess), is there a good way of creating a completely isolated java script "environment" for each piece of code? Like 2 different scopes, with their own imports and they couldn't conflict with each other, but still being able of being part of the same html page?

What do you mean "completely isolated"? There is only one global context so if you need isolation, you need to properly scope your code and not reach out to the global context. Also, on an HTML5 note, ` — Mike 'Pomax' Kamermans, Feb 06 '19 at 17:17
That's fair, I just took an example html to illustrate, the entire html can change, I don't even have to have a `script` tag either. By isolated, I meant having 2 independent pieces of code using different java script dependencies. So imagine I would have component 1 created using jquery 1.2 and component 2 created using jquery 1.3, assuming jquery 1.2 and jquery 1.3 are incompatible. My code is easy to isolate, it's under my control. Dependencies are not. — mvallebr, Feb 06 '19 at 17:24
That sounds like you're describing bundles, which wrap all the code in their own execution context so they don't tap into anything (else) that might be loaded on your page. There are several popular bundlers in the JS landscape at the moment, the unavoidable de facto one being webpack (typically with babel), and the dedicated es6+ bundler being rollup. I'd recommend hitting up their websites and reading up on what they let you do. — Mike 'Pomax' Kamermans, Feb 06 '19 at 18:35
To be clear - are these bundles for the client part? The js that runs in the browsers, not for something like node js or something, right? — mvallebr, Feb 06 '19 at 18:54
correct. You build bundles for client-side (=browser) deployment. — Mike 'Pomax' Kamermans, Feb 06 '19 at 22:22

behzad besharati · Accepted Answer · 2019-02-06T17:16:38.130

2

The JavaScript standard from 2015 introduces its own, different module system. It is usually called ES modules, where ES stands for ECMAScript. Instead of calling a function to access a dependency, you use a special import keyword.

edited Feb 06 '19 at 17:16

answered Feb 06 '19 at 17:13

behzad besharati

5,873
3
18
22

Could you please either elaborate or provide some link I could study more? – mvallebr Feb 06 '19 at 17:14
Thanks! This looks like what I want, I am not sure yet! I will study it, thanks a lot though – mvallebr Feb 06 '19 at 17:28
I still have to search more about how to isolate dom parts and shade some global variables, but this would be other question. You answered what I was looking for, thanks. – mvallebr Feb 07 '19 at 20:04
Yeah. there is shadow-dom for isolating HTML and CSS too. – behzad besharati Feb 07 '19 at 20:08

score 1 · Answer 2 · answered Feb 06 '19 at 17:14

I think you can go for single page application framework like angular for your solution. In angular,

You just have to create two different components for comp1 and comp2 and they both would be isolated from each other unless you make them interact using a shared service or parent-child interactions.

Edit: you can use the ECMA script module feature for the same.

This is the reference: https://medium.freecodecamp.org/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a

Thanks to @behzad

score 0 · Answer 3 · answered Feb 06 '19 at 17:11

0

I don't know about JavaScript, but you can do this with Angular and Typescript.

With Angular 4 and above, you can have completely separate scripts running within different components.

answered Feb 06 '19 at 17:11

Yvonne Aburrow

2,602
1
17
47

Yes, but I want component 1 to use angular and component 2 to use jquery, for instance. The hard part is the dependencies, component 1 could use angular version 123 and component 2 could use angular 234 – mvallebr Feb 06 '19 at 17:13
1

Interesting problem! – Yvonne Aburrow Feb 06 '19 at 17:14

Is there a way I can get 2 completely isolated javascript contexts inside a same web page?

3 Answers3