CODEWITHSUNDEEP
browsergoogle-chrome-devtoolselm
AIon
AIon

Reputation: 13081

Elm: How to render each elm module in it's own browser window? - both module in the same app (main module)

I have a multi monitor setup (with 4 monitors) and i want to build an app that will span across 3 of them like so: -- all monitors are in extend mode. enter image description here

It's a web app, so it must be inside a browser window. I don't know how to make a chrome window in this shape. From what i see, a browser window must have a rectangular shape.

I can't modify the design of the app, i tried many layouts.. I don't want to lose functionality... having all this monitors is just bad i can't do what i want with all the space. So the final layout must be something like this red shape you see above..

Instead of having a big fat chrome window that will take all 4 monitors (and also hiding my terminal or some other program - behind it), i think it's a good idea to split my app in multiple smaller chrome windows - based on functionality.

For example:

-- main module - this holds my app
   -- module 1
   -- module 2
   -- module 3
   -- module 4 .. etc

I want them sort of like this: enter image description here - same app, multiple components/modules in multiple chrome windows.

If i arrange them closer together, and hide the window( minimize button, close button etc..), visually i get a very nice app in the shape i want.

Chrome supports this multiple window on the same app behavior.. You can see it in developer console - where you modify something in Style Css panel and the page updates in real time.

Developer Tools somehow communicates with the Page. - maybe it not what i need - but this ideea of modifying something inside app from another completely different window is present. Chrome developer tools is browser based - and also can be opened as a separate window.

Related to this behavior - i found this library, with this demo - which let's you pass information between 2 Chrome windows at the same domain - but it's exactly the same app, same content! Not parts of a bigger app... that's the problem. What I want, is 2 windows with different content - to communicate - like the Developer Tools with the WebPage.

The elm architecture is well suited for communicating changes - but i don't know how can i realize an update across all my windows. If i click something on monitor 1 module 4, i want to see the result in monitor 2 module 2.

Questions:

  1. Is this even possible? At all - not just elm - but in general.. can be done in JavaScript?

  2. Any ideas to adapt it with elm architecture?

  3. given that is possible, but not compatible with elm architecture. If i choose to build completely separate elm apps - for each piece of functionality / for each module - how can i make them communicate with no lag? I can use a server of course, but even a 60-100ms delay is not an option here. Must be as real-time as possible.

I'm in the dark. Any ideas are welcomed:)

Upvotes: 1

Views: 204

Answers (1)

halfzebra
halfzebra

Reputation: 6807

You might give a shot at using SharedWorker for sharing context between different tabs. This API is fairly new, so it might have some implications.

A simpler alternative is Responding to storage changes with the StorageEvent

In short, you can listen for changes in Local Storage. 

let counter = 0;

if (window.localStorage.getItem('counter') === null) {
  setInterval(
    () => {
      document.body.innerText = counter;
      window.localStorage.setItem('counter', counter)
      counter++
    },
    1000
  )
} else {
  window.addEventListener('storage', event => {
    document.body.innerText = event.newValue;
  })
}

Try opening this JS Bin demo in multiple tabs(remember to flush your storage, if you want to check it out twice).

Itegrate your Elm app with all this magic using JavaScript Interop and you are all set.

Upvotes: 1

Related Questions