How to load css or js files only once?

[Joel Geiser]

Hy, I'm working with Play! Framework 2.5.13

I try to build a webpage with different web-modules (html + scss + CoffeeScript).

Now I want reuse this web modules multiple time on the same webpage. Each module includes his css and js at the top of the file like following code line:

<link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/led.css")'>

But now on each reusing of the modul, the assets (css + js) will be inculded again and blow up the code (duplicate).

I started to move all include-commands from the module in the main.scala.html file, but this doesn't feel really nice, cause the modules will be loaded dynamic.

So how can I use a module (html + css + js) multiple time but loading the assets (css, js, img) only once?

What's the recommanded way to reuse assets on same page?

[Will Sargent]

This sounds a bit like https://github.com/playframework/playframework/issues/5242 or https://github.com/playframework/playframework/issues/5765 

There are workarounds for both -- can you try them and see if it helps?

--

Will Sargent

Engineer, Lightbend, Inc.

will.s...@lightbend.com

--
You received this message because you are subscribed to the Google Groups "Play Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/b56e8e0d-9d6b-425b-8b0f-609cd8d426cc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joel Geiser]

Hy Will

Thanks for your respond, but the links didn't solve actually my problem.
Maybe I need to specify my problem a bit more:

In my 'views' i have a led.scala.html that contains HTML code for a LED.
This LED-Element needs some css and javascript code. Therefore I include the css and the js in the first line of the led.scala.html like this:

<link rel = "stylesheet" media = "screen" href ='@routes.Assets.versioniert("Stylesheets/led.css")'>
<script src='@routes.Assets.versioned("javascripts/led.js")' type="text/javascript"></script>

Now in my main.scala.html I want use this template multiple times like:

@for(nr <- numbers.reverse) {
@led()
}

Now the led.scala.html code will be imported multiple time and with this also the css and javascript defined in the led.scala.html.
But the css and javascript should be loaded only once and re-used by the html-elements.

So I moved the include-commands from the led.scala.html to the main.scala.html - but this feels not really nice, cause now i have to know in my main.scala.html whitch assets I will use later in the html code.
How can I optimize my code?
Do I need an other architecture? Or should I loading assets over a controller-class, that returns only in the first request the html-import command?

Thanks a lot :)

Am Freitag, 23. Juni 2017 20:56:54 UTC+2 schrieb Will Sargent:

This sounds a bit like https://github.com/playframework/playframework/issues/5242 or https://github.com/playframework/playframework/issues/5765 

There are workarounds for both -- can you try them and see if it helps?

--

Will Sargent

Engineer, Lightbend, Inc.

will.s...@lightbend.com

On Thu, Jun 22, 2017 at 11:26 PM, Joel Geiser <joelg...@gmail.com> wrote:

Hy, I'm working with Play! Framework 2.5.13

I try to build a webpage with different web-modules (html + scss + CoffeeScript).

Now I want reuse this web modules multiple time on the same webpage. Each module includes his css and js at the top of the file like following code line:

<link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/led.css")'>

But now on each reusing of the modul, the assets (css + js) will be inculded again and blow up the code (duplicate).

I started to move all include-commands from the module in the main.scala.html file, but this doesn't feel really nice, cause the modules will be loaded dynamic.

So how can I use a module (html + css + js) multiple time but loading the assets (css, js, img) only once?

What's the recommanded way to reuse assets on same page?

--
You received this message because you are subscribed to the Google Groups "Play Framework" group.

To unsubscribe from this group and stop receiving emails from it, send an email to play-framewor...@googlegroups.com.

[Marcos Pereira]

Well, there are multiple solutions for your problem.

Maybe what you want is to use some reusable blocks like having the following led.scala.html:

@assets() = {

    <link rel = "stylesheet" media = "screen" href ='@routes.Assets.versioniert("Stylesheets/led.css")'>

    <script src='@routes.Assets.versioned("javascripts/led.js")' type="text/javascript"></script>

}

@body(n: Int) = {

    <div>

        <p>Some body for `led`.</p>

    </div>

}

And then using it like:

@led.assets()

@for(nr <- numbers.reverse) {

  @led.body(nr)

}

HTH

To unsubscribe from this group and stop receiving emails from it, send an email to play-framework+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/118ada1e-69de-4943-928b-9e013cd700eb%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Marcos Pereira

Software Engineer, Lightbend.com

[Greg Methvin]

What's wrong with just including the script once in the <head> in your main template? Once the script/stylesheet is downloaded once, it should be cached by the browser. Unless you're including huge JavaScript libraries, the overhead of that will be pretty minimal. Then in your individual pages you can just assume the code has been included.

There are of course more sophisticated ways of dealing with this (e.g. using requirejs) but that's usually not worth the extra complexity for a mostly static app.

To view this discussion on the web visit https://groups.google.com/d/msgid/play-framework/CAE5q7xph%3DLia0Ot7VC0S%2BeaCYoPf9hF0-PMuw6VQGB4JnmNfXw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Greg Methvin

Tech Lead - Play Framework

Lightbend, Inc.