CODEWITHSUNDEEP
javascriptcssvelocitytemplate-engine
bloodcell
bloodcell

Reputation: 601

Maintaining proper CSS \ Javascript and using a Template Engine - a contradiction?

A template engine (Velocity, FreeMaker, etc.) lets you, among other things, split up your HTML into re-usable chunks. E.g. you have a <div> showing an ad that appears on lots of places in your site - you can compose a file containing that <div> and its contents once (with Velocity: a 'myAd.vm' file), and load it up into whatever page necessary (with Velocity: apply #parse('myAd.vm').

I like to think of these .vm files as functions, they get "invoked" (parsed) and spit out textual content. They can have "parameters" - in Velocity you can #set( $myParam = 'foo' ) just before parsing the 'myAd.vm' file, and use that variable inside that file.

My question is: How does the proper way of defining CSS and Javascript in their own files fit in with that?

The 'myAd.vm' needs CSS styling, you can define that CSS in that file itself with a <style> tag - which will result in an HTML document with a style tag in its <body> - not in its <head>, and certainly not in a separate file.

Or, you could define the CSS that 'myAd.vm' needs in a separate 'myAd.css' file, and demand that whatever HTML document that parses 'myAd.vm' will have a <LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css"> in its head tag. This is a problem since it makes things more complex and cumbersome, and - you may want to actually parse the 'myAd.vm' file depending on a conditional (in Velocity, for example, you could have #if(someCondition) #parse('myAd.vm') #end) - meaning you don't actually know in advance whether the head tag should link to that external CSS file.

Any thoughts? Thanks.

Upvotes: 1

Views: 1263

Answers (2)

Daniel Fern&#225;ndez
Daniel Fern&#225;ndez

Reputation: 7455

Apache Wicket (a component-based framework) allows you to add what it calls "Header contributions" ("renderHead" method now in Wicket 1.5) as a part of its page composition through inheritance system. This means that, although a page only defines a chunk of the total HTML to be rendered, it can still add something to the <head> of the whole document and therefore include <link> tags for your javascript and CSS files in their correct places.

As for non-component-based frameworks, the Thymeleaf template engine (which can be used with Spring MVC), as a result of its "natural templating" ability, allows you to compose pages by including fragments from other pages (both in <head> and in <body>, which to some extent solves your issue), as opposed to the "inheritance-oriented" approach natural to composition frameworks like Sitemesh or Tiles.

Regards, Daniel.

Upvotes: 0

prodigitalson
prodigitalson

Reputation: 60413

Most frameworks that ive used give you the ability to make some kind of function call that kind of acts as an include for a css or js file, these are then output in the head to external files. In many casses i actually run all these through a minifier so in the end there is only one css and one js file.

This way you can add to the asset stack from within view partials and put stuff directly in the head.

Upvotes: 1

Related Questions