Re: Ok to load many .js files to support lots of interactive widgets?
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 wrote: > On Jan 14, 8:01 pm, Margie Roginski 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:'', > > 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 django-us...@googlegroups.com. To unsubscribe from this group, send email to django-users+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Re: Ok to load many .js files to support lots of interactive widgets?
On Jan 14, 8:01 pm, Margie Roginski 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:'', > 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 django-us...@googlegroups.com. To unsubscribe from this group, send email to django-users+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/django-users?hl=en.
Ok to load many .js files to support lots of interactive widgets?
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:'', 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 -- You received this message because you are subscribed to the Google Groups "Django users" group. To post to this group, send email to django-us...@googlegroups.com. To unsubscribe from this group, send email to django-users+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/django-users?hl=en.