Thanks Daniel, I will look into Yahoo YSlow. Is there a particular tool/toolset that you have used/recommend for doing the combining?
Margie On Jan 14, 2:37 pm, Daniel Roseman <[email protected]> wrote: > On Jan 14, 8:01 pm, Margie Roginski <[email protected]> wrote: > > > > > As I've learned more about jquery/javascript, I've added more and more > > jquery interactive widgets to my app (which is sort of like a ticket > > tracking app). I'm wondering if having too many .js files is a bad > > thing (or a good thing)? > > > Here's an example to make my question more understandable. I have > > form similar to the admin changelist form, where the user views all of > > their tasks. Each task has a lot of info available but I don't want > > it to display it all in the form itself. For example, a task has a > > "result" field, and instead of just rendering the result field (which > > can be long), I provide a link that shows the date the result was > > entered. When the user clicks on the link, they get a tooltip popup > > that displays the result. > > > My django widget looks like this: > > > class ChangeList_DisplayResultWidget(ChangeList_ToolTipWidget): > > > class Media: > > js = ('js/jquery.js', > > "js/cluetip/jquery.cluetip.js", > > "js_custom/task_changelist_helpers/result_widget.js", > > ) > > > css = {'all' : ('js/cluetip/jquery.cluetip.css',)} > > > The contents of result_widget.js is quite small, just this: > > > $(document).ready(function() { > > $('.changelist_result').cluetip({sticky:true, > > closePosition: 'top', > > closeText:'<img src="/site_media/img/admin/ > > icon_deletelink.gif">', > > showTitle:false, > > leftOffset:'-300px', > > activation:'click', > > cluetipClass: 'jtip', > > onShow: function(e) { $('#cluetip a').attr({'target': > > '_blank'}); return true; } > > }); > > }); > > > My question is - is it ok to have a lot of little .js files like > > this? I find that keeping the .js code associated with my widgets in > > separate files is very nice, because then if I reuse the widget on > > some other page, it is well-encapsulated. IE, I get just the .js for > > that widget, and no additional .js code. But since I have a very > > interactive web app with a variety of widgets that have different > > behaviors, I am finding that I have a lot of .js files getting > > included. > > > In my page that is similar to django's admin change list, I now have > > 25 .js files. That includes various good-sized jquery packages > > (jquery.js, autocomplete, datePicker, cluetip, filter), plus my > > little .js snippets like that shown above, that use those packages, > > plus some custom .js I have written, plus some code I use from the > > admin app (core.js, actions.js, getElemetnsByselector.js). > > > Sorry if I'm going into too much detail - just wanted to give folks a > > flavor of what I'm doing. The users are very happy so I don't think > > I'm going overboard on the UI side, but I'm just wondering if there > > are issues associated with they way I am organizing the .js, or if > > what I'm doing is a good way to go. > > > I am doing client side caching of the files, and so far things seem > > fast. I'd like to hear input from anyone with more experience on > > whether this is a good organization or if there is some preferable way > > to go. > > > Margie > > This isn't a Django question of course, but applies more generally to > web apps. > > Best practise is not to have lots of small JS files. This is because > most browsers limit the number of requests they can make to the same > domain at once, so the files can't be loaded in parallel. What we tend > to do is combine the files into a single one - there are various > projects around that will do that for you. You can then include that > combined JS file in your pages, rather than the 25 small ones. > > You may find it useful to test your site against the Yahoo YSlow > analyzer, an add-in for the Firebug extension for Firefox. It gives > lots of good advice about this sort of thing. > -- > DR.
-- You received this message because you are subscribed to the Google Groups "Django users" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
