Re: Ok to load many .js files to support lots of interactive widgets?

2010-01-14 Thread Margie Roginski 
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?

2010-01-14 Thread Daniel Roseman 
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?

2010-01-14 Thread Margie Roginski 
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.