Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Add Example of Serving Dynamic js & css files. #730

Closed
ekryski opened this Issue Jun 30, 2011 · 21 comments

Comments

Projects
None yet
4 participants

ekryski commented Jun 30, 2011

Make an example that shows how one would load a dynamic javascript or css file. For example:

Let's say I want to load the minimal amount of external resources and then if a person moves to a specific page I add on javascript or css files that the new page will need.

I don't think there is really one specific way to do it. You could create different layouts that contain the needed resources, or create middleware for specific routes and set a request variable that states the additional resources to render into the returned markup. I don't know how many different cases you have, but I think using different layouts is better myself.

ekryski commented Jun 30, 2011

I was actually discussing this with TJ. I realize that there isn't a definitive way of doing this (like most things in software) but I like the idea of having a dynamic helper for express. I feel that it allows flexibility for loading any dynamic content you wish. TJ asked me to create this issue to remind him of the example. To quote TJ's example:

app.dynamicHelpers({ scripts: function(){ return []; } });
for example and in a page template:

`````` scripts.push('/path/to/script.js')and in the layout- each path in scripts\n script(src=path)```
etc

Either he will do it or I will do it and ask for a pull.

So, the needed assets are configured within the templates themselves? Interesting approach. "Personally", I prefer externalizing that if there is a need for it to be dynamic. Then the templates themselves would just identify what package they needed, rather than the actual assets.

e.g. Something like Jammit for Rails: http://documentcloud.github.com/jammit/

But the approach you described is definitely straightforward.

Owner

tj commented Jun 30, 2011

yeah it's a common question so i'd love to add an example i can use to show people when they are curious

Owner

tj commented Jun 30, 2011

you could obviously have a cleaner api on it like script('/path') etc

ekryski commented Jun 30, 2011

Hey Mike. I'm totally not against that approach. I've never used Jammit but I like the idea that you can define packages or namespaces for your assets. Do you have an example of how you think you might do it?

hahaha, no. My assets are in a state of chaos at the moment. The only thing that is organized are my stylesheets, and thats only cause stylus concats them together for me haha. I would love a jammit like tool for node, just no time at the moment!

A hybrid of my approach and yours would be something like this:

app.dynamicHelpers({ scripts: {
    package1: ["foo.js", "bar.js"],
    package2: ["foo.js", "baz.js"]
 }});

In Template 1

   scripts.package = "package1"

In Template 2

 scripts.package = "package2"

In Layout

each path in scripts[scripts.package] do script(src=path)

Given this is rough code, but the theory is I would describe all my asset packages in one spot. Have the templates identify which package they want.. then have the layout render the assets from the identified package.

ekryski commented Jun 30, 2011

I like it! It's still simple but gives you a little more organization and flexibility. I will work on it this weekend/Monday and either do a pull request or create a separate middleware package. If that's cool with you TJ.

Owner

tj commented Jun 30, 2011

yeah for sure man, it's not something I want in core, but nothing wrong with creating a module for it

ekryski commented Jun 30, 2011

Ya I agree. It should be a module not core functionality. If you want you could get rid of this issue then. Up to you.

Yeah, asset packaging/management is a tricky opinionated thing. There ARE assets packages out there for Node already, I just haven't found one I want to use yet.

Even jammit is an external gem for Rails. I'm still kinda shocked that Rails is baking in asset management into 3.1 though... its going to be interesting.

ekryski commented Jun 30, 2011

Hey Mike. Which ones? I haven't really found any.

Ah, I was thinking of: https://github.com/mape/connect-assetmanager which only minifies/concatenates the files.

I think the optimal solution would be a minifier/concatenator + the template solution you are looking for.

ekryski commented Jun 30, 2011

Yes. That's what I was thinking of building. Everyone needs minification. I will just have a flag that you can set to turn it on or off. I need it for work so I will build it and then put it out as a middleware module for express.

Owner

tj commented Jun 30, 2011

mape has connect-assetmanager or something, haven't tried it though

Yeah, it might be worth just contributing to that project and collaborating with him.

ekryski commented Jun 30, 2011

I'll send him a note. Thanks gents.

@tj tj closed this in dbbe7be Jul 4, 2011

Owner

tj commented Jul 4, 2011

not sure what to call that example, not a fan of the name

ekryski commented Jul 4, 2011

Hmm. Could use "Loading Dynamic Assets Example" or "Templating Dynamic Assets".

ekryski commented Jul 4, 2011

I sent a message to mape talking about collaboration but I didn't get a response back so I think I'm gonna go it alone this week. I need the functionality so I'm probably just gonna extend your example into a separate express module.

lldong18 commented Apr 1, 2016

Is it done?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment