How to deal with incorrect "order" of loaded js-libraries

Vaadin 6 / 7 / 8
1

Hi guys,

little problem here with a Vaadin 7 application … the problem is caused by the “incorrect” order of the loading of JS-libries … triggered by a @JavaScript.

Example:

@JavaScript({“jquery-1.10.2.min.js”})
public class MainUI extends UI {
…
}

Deep inside I have a “sticky-addon-based” (fork) thing … like this

@JavaScript({“jquery.sticky.js”, “sticky.js”})
public class Sticky extends AbstractJavaScriptExtension {
…
}

The original sticky-addon (https://github.com/johannest/sticky) looks like this:
@JavaScript({ “jquery-1.11.1.min.js”, “jquery.sticky.js”, “sticky.js” })
public class Sticky extends AbstractJavaScriptExtension {
…
}

This cause “another” problem with incompatible jquery versions :slight_smile: So I decide to fork this addon and I removed “jquery” from the addon itself and use the jquery from the main-application.

But now I have another problem :smiley:

TLDR: jquery.sticky.js is loaded by the browser before jquery-1.10.2.min.js is delievered … I attached a screenshot …

Hopefully somebody can give me an hint :slight_smile:

Kind regards from Germany
Andreas from Siemens :slight_smile:

35301.png

2

I found a “workaround” :-/

If I use always the same js-library-name then Vaadin “cache” an already loaded lib and with this the js-lib is loaded only once …
@JavaScript({ “jquery-1.11.1.min.js”})

But I got a warning for free :slight_smile:

11:53:42.387 [qtp960054534-277 ]
[108k4cp23o9dy135g5wxmgd3ss]
[KAIROS_TESTPRODUCT]
[W]
c.v.s.LegacyCommunicationManager :177 - jquery-1.11.1.min.js published by both class com.siemens.spice.hscm.ui.AbstractHscmUI and class com.siemens.kairos.components.sticky.Sticky. File from class com.siemens.kairos.components.sticky.Sticky will be used.

3

Maybe the Vaadin guys can introduce a other concept for “complex” JavaScript components …

Imagine the addon-code:

@JavaScript(dependsOn=@JavaScriptLibrary(“jquery”, “1.11.1”), value={“addon.js”})
@JavaScript(dependsOn=@JavaScriptLibrary(“jquery”, "[1.11.1,1.11.2]
"), value={“addon.js”})
@JavaScript(dependsOn=@JavaScriptLibrary(“jquery”, “(1..”), value={“addon.js”})

Then during runtime (or maybe also during buildtime) a dependency-tree could be generated. Then the order of loading for JS-Libs could be consumed from the dependency-tree … root-js-lib-first, then libs in level-2, and so on