Vanilla HTML application in v3


#1

The context here is that I have an existing suite of V2 OS.js applications, as iFrames.

I’m looking to move to V3 and my first step is to decide how best to write our new applications: iFrame or native. Later I’ll need to decide whether to port the existing apps as IFrame or rewrite them as native.

Considering just the new applications: should they be native or iFrame? After previous discussions I’m pretty convinced that I should be building native apps, I want to use OS.js libraries, I want to exploit the environment.

My problem is that the apps we are writing are a bit specialised, use some very nice graphing libraries and other such stuff. Those libraries are easy to use from simple HTML/JS code, we don’t need React or Angular or indeed any framework. Is it possible to create a “vanilla” native app? Just a simple HTML page that has access to my chosen libraries and OS.js. Or is that just iFrame in disguise? Maybe I need to bite the bullet and go to HyperApp?


#2

Yes. OS.js v3 is very un-opinionated in this regard.

Use the .render() and it’s callback to apply HTML to the root DOM node of the window:

https://manual.os-js.org/v3/tutorial/window/#render-window


#3

Please note that if the libraries “pollute” the global CSS it might affect the visuals of OS.js.

The graphing libraries are probably fine, but what are the “others” ?

Because if this becomes a problem, you might have to go down the iframe-route. It might be possible to isolate it via Webpack though. It all depends on what kind of libaries we’re talking about here.


#4

So far we have been using vis.js for the graphs, and jstree and Datatables.net to present our top-level data selection and navigation.


#5

They should probably work just fine. I had a quick glance and they seem to be respectful in terms of global namespace(s) pollution.


#6

Just to add to this. You should always chose to use npm packages and import / require in your scripts when working with libraries so that they are bundled properly. You can load things the “old way” via script tags and such (which you can do via the metadata.json files section), but this will can cause issues if apps use different versions of the same libraries.