(suggestion) some YSlow suggestions can be implemented within webpy template mechanism

[Tzury Bar Yochay]

the golden rules are available at http://developer.yahoo.com/performance/rules.html

My suggestion regards the following 4 rules from the list mentioned
above:

1. Minimize HTTP Requests
2. Put Stylesheets at the Top
3. Put Scripts at the Bottom
4. Make JavaScript and CSS External

While it is hard to maintain a single file of javascript or css for
the whole application, it would have been nice if the server would
have combine all the "*.js" requests into a single one.

I was wondering about the idea of adding a feature to the template so
lines like:

<script src="/static/jquery.js">
<script src="/static/jquery.ui.js">
<script src="/static/menu.js">
<script src="/static/corners.js">
<script src="/static/appLogin.js">
<script src="/static/validator.js">

will yield to a single line like:

<script src="app-external-scripts.js">

whereas the handler for this special request ("app-external-
scripts.js") will actually contain all the lines from all the <script
src='...'> tags

(the template, while traversing and parsing each line if it recognize
a "<script src='..'>" or "<link rel... href='...'>" it will grab the
lines of the requested file and push them into a ctx variable).

What do you think?

[Anand Chitipothu]

On Sun, Jul 27, 2008 at 5:43 PM, Tzury Bar Yochay
<Afro.S...@gmail.com> wrote:
>
> the golden rules are available at http://developer.yahoo.com/performance/rules.html
>
> My suggestion regards the following 4 rules from the list mentioned
> above:
>
> 1. Minimize HTTP Requests
> 2. Put Stylesheets at the Top
> 3. Put Scripts at the Bottom
> 4. Make JavaScript and CSS External
>
> While it is hard to maintain a single file of javascript or css for
> the whole application, it would have been nice if the server would
> have combine all the "*.js" requests into a single one.
>
> I was wondering about the idea of adding a feature to the template so
> lines like:
>
> <script src="/static/jquery.js">
> <script src="/static/jquery.ui.js">
> <script src="/static/menu.js">
> <script src="/static/corners.js">
> <script src="/static/appLogin.js">
> <script src="/static/validator.js">
>
> will yield to a single line like:
>
> <script src="app-external-scripts.js">

This can be achieved by adding the following add_javascript and
get_javascripts functions to template globals.

combined_javascripts = {}

def add_javascript(path):
web.ctx.setdefault('javascripts', []).append(path)

def get_javascripts():
# combine javascripts only in the production environment
if web.config.debug:
return web.ctx.javascripts
else:
key = tuple(web.ctx.javascripts)
if key not in combined_javascripts:
filename = combine(web.ctx.javascripts)
combined_style[key] = [filename]
return combined_javascripts[key]

def combine(paths):
data = "\n".join([open(path).read() for path in paths])

# use md5 to generate unique filename
filename = "all_" + md5.md5.digest(data).hexdigest() + ".js"
f = open(filename, 'w')
f.write(data)
f.close()
return filename

The templates can call $add_javascript when it want to add javascript
files to the template and the base template should have get all the
added javascripts by calling get_javascripts.

$add_javascript("/static/jquery.js")
$add_javascript("/static/jquery.ui.js")

$for js in get_javascripts():
<script src="$js" type="text/javascript"/>