Dealing with redundant JS inclusions at template levels

[Darren Spruell]

Spent a bit of time debugging some faulty JavaScript library
functionality before I realized that I had included the library at
multiple levels in the project - first site-wide in the base template,
and then within a app. I think I ran into this:

http://stackoverflow.com/questions/4891278/what-is-the-danger-in-including-the-same-javascript-library-twice

Is there a good design pattern to this situation, bearing in mind a
need to include JS libraries at project level and a desire to use apps
that include the same libraries in an attempt to be reusable?

Looking at jQuery and Bootstrap for this.

--
Darren Spruell
phatb...@gmail.com

[Rafael E. Ferrero]

I Dont know your design, usually i include the js library on base template and my apps templates extend from that... or just put another base template for every app...

If you have some example code or tell us why you do that then we be more helpfull

See ya

2013/9/30 Darren Spruell <phatb...@gmail.com>

--
Darren Spruell
phatb...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAKVSOJVxQ8XF9wojenv6FW53CTHw28xMsD7LCoYas5%2BRchxtBA%40mail.gmail.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

Rafael E. Ferrero

[Dariel Dato-on]

You can consider using Django Sekizai to manage your Javascript and CSS imports:

https://django-sekizai.readthedocs.org/en/latest/

Hope that helps!

Best,
Dariel Dato-on

[Darren Spruell]

On Mon, Sep 30, 2013 at 6:11 AM, Rafael E. Ferrero
<rafael....@gmail.com> wrote:
> I Dont know your design, usually i include the js library on base template
> and my apps templates extend from that... or just put another base template
> for every app...
>
> If you have some example code or tell us why you do that then we be more
> helpfull

My setup looks like this:

Django 1.5

Project/app structure:

mysite/ # Project root
mysite/
settings.py # INSTALLED_APPS includes 'foo', a reusable app
templates/
base.html # Project base template, includes jQuery &
# Bootstrap JS for project
static/ # Static assets for project
js/
jquery.js
bootstrap.min.js


foo/ # Reusable app
templates/
foo/
index.html # app template, extends 'base.html'. Requires
# and includes jQuery and Bootstrap JS for app
static/ # Static assets for 'foo' app
foo/
js/
jquery.js
bootstrap.min.js
app.js

So when 'index.html' from the foo app is rendered, the JS imports look
like this:


<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

<script src="/static/foo/js/jquery.js"></script>
<script src="/static/foo/js/app.js"></script>
<script src="/static/foo/js/bootstrap.min.js"></script>
</div> <!-- end container -->
</body>
</html>

...because both the project and the reusable app are using jQuery and
Bootstrap JS, loading them twice on the same page results in screwed
up JS behavior.


Also,

On Mon, Sep 30, 2013 at 6:18 AM, Dariel Dato-on <oddrat...@gmail.com> wrote:
> You can consider using Django Sekizai to manage your Javascript and CSS
> imports:
>
> https://django-sekizai.readthedocs.org/en/latest/

Seems interesting, I'll look into it more. To be honest, I think I'm
looking for a best practice rather than a solution; how are others
managing redundant JS includes when combining their own projects and
reusable apps? I imagine there's no app required to do this
intelligently.

DS

> https://groups.google.com/d/msgid/django-users/CAJJc_8XTE884Y9oCCK1StrtRGxt0Jvd%3DcJiOfboNOdarK%3DC05A%40mail.gmail.com.

> For more options, visit https://groups.google.com/groups/opt_out.



--

Darren Spruell
phatb...@gmail.com

[David Cox]

The second StackOverflow answer is probably your best bet.  Assuming your looking for a solution that avoids editing any included app templates, you'd want to use the solution that HTML5 Boilerplate uses, which is a Javascript conditional inclusion: 

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

When the template's loaded, that line makes the JS subsystem check whether the library-to-include has already been added to the global namespace .  If so, it skips the include, but if not, it writes it to the DOM.

An alternative that I use is to add code blocks inside <script> tags at the bottom of the base template and then add the JavaScript markup to child templates as needed.

On Monday, September 30, 2013 1:12:54 AM UTC-5, dspruell wrote: