You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@struts.apache.org by Johannes Geppert <jo...@web.de> on 2009/08/12 14:46:06 UTC

Create a single javascript

Hello,

maybe anybody can give my some input for an idea I have today.
I work on the current struts2-jquery-plugin.
http://code.google.com/p/struts2-jquery/

At the moment the tags create after each generated html tag 
an separate <script> tag like this:

<div id="mydiv1"></div>
<script type="text/javascript">
$(document).ready(function () { do something with mydiv1; });
</script>
<div id="mydiv2"></div>
<script type="text/javascript">
$(document).ready(function () { do something with mydiv2; });
</script>

This looks a little bit dirty, so I look for a way to collect all the
generate javascript stuff
to one big javascript 

<div id="mydiv1"></div>
<div id="mydiv2"></div>
<script type="text/javascript">
$(document).ready(function () { do something with mydiv1;  do something with
mydiv2; });
</script>

Maybe all the generated javascript can be put on an Stack
and can be rendered with an separate sj:footer tag.

The JSP can look like this:
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head/>
  </head>
  <body>
    <sj:div id="div1"></sj:div>
    <sj:div id="div2"></sj:div>
    <sj:a id="link1" href="%{ajaxurl}" target="result">Link</sj:a>
    <sj:datepicker />
    <sj:footer/>
  </body>
</html>

Is there a way or should I put this idea out of my mind?

Best Regards
Johannes Geppert

-----
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

-- 
View this message in context: http://www.nabble.com/Create-a-single-javascript-tp24935752p24935752.html
Sent from the Struts - Dev mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
For additional commands, e-mail: dev-help@struts.apache.org


Re: Create a single javascript

Posted by Obinna <ob...@gmail.com>.
2009/8/12 Johannes Geppert <jo...@web.de>

>
> Hello Eric,
>
> thank you for fast response.
>
>
> Obinna wrote:
> >
> > What I have done is to put all of the meat of the javascript code into a
> > single file which is included in the sj:head and then just have a small
> > binding snippet code rendered with each tag which calls a binding
> function
> > in the main .js file.
> >
> I think also about this, but i dislike some thinks.
>
> 1.) When supporting all Widgets and interactions with one javascript file,
> this file grows really fast.
> 2.) This big javascript was loaded on every single page
>

Typically it would only be loaded once and cached by the browser. Compared
with the jquery core files which have to be loaded anyway, the file size
should still be small. For example the current file I have, minimized, is
about 26K versus jquery-ui which is 186K and jquery which is 57K. And I'm
sure I could decrease this by quite a bit if necessary.
It doesn't necessarily have to be a single file. You could have a base file
with the core code and a separate .js file for each widget/component and you
could perhaps even include code to lazy-load individual files as necessary
(probably overkill though). Given the file size, at least at the moment, it
is still much easier to deal with a single file.


>
> 3.) When I use the standard jQuery way, the user know it and can better
> find
> there own failures and can report better error messages
>
I'm not sure what would be the 'non-standard' jQuery way? Moving the
javascript code into a .js file from the templates shouldn't change
anything.

>
> 4.) For my opinion is a large javascript file harder to debug and maintain
> as some freemarker files


I actually find the reverse to be true. But the main point is that if you
want to support multiple template engines it would be a nuisance (and
debatably poor practice) to duplicate the .js code in each of the template
engines files. I actually started out that way but quickly changed to a
consolidated .js file because I was trying to support both freemarker and
javatemplates template engines (I have since abandoned javatemplates support
though).

- Eric

>
> Obinna wrote:
> >
> > This way, the addition to the freemarker templates is almost thoughtless
> > and
> > the you don't place the (IMO) overburdening requirement to add yet
> another
> > <footer/> tag for the developer.
> >
> You are right, and it was just an Idea. Maybe it can be optional.
>
> -----
> ---
> web: http://www.jgeppert.com
> twitter: http://twitter.com/jogep
>
> --
> View this message in context:
> http://www.nabble.com/Create-a-single-javascript-tp24935752p24937153.html
> Sent from the Struts - Dev mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
> For additional commands, e-mail: dev-help@struts.apache.org
>
>

Re: Create a single javascript

Posted by Chris Pratt <th...@gmail.com>.
Since it's a finite set of cases, you might be able to use jQuery's awesome
ability to gather information together and meet both requirements with very
little work.  If you assign non-visual classes to the inputs then use a
single script tag at the end of the document to bind all the inputs to their
scripts it should be relatively quick and easy.  Something like this:
  (*Chris*)

    <input type="text" name="myTooltippedInput" value="foo"
class="s2jq_tooltip"/>
  </body>
  <script>
    $(function() {
      $(".s2jq_tooltip").tooltip();
      $(".s2jq_feature2").bind("feature2",feature2);
    });
  </script>
</html>


On Wed, Aug 12, 2009 at 6:57 AM, Johannes Geppert <jo...@web.de> wrote:

>
> Hello Eric,
>
> thank you for fast response.
>
>
> Obinna wrote:
> >
> > What I have done is to put all of the meat of the javascript code into a
> > single file which is included in the sj:head and then just have a small
> > binding snippet code rendered with each tag which calls a binding
> function
> > in the main .js file.
> >
> I think also about this, but i dislike some thinks.
>
> 1.) When supporting all Widgets and interactions with one javascript file,
> this file grows really fast.
>
> 2.) This big javascript was loaded on every single page
>
> 3.) When I use the standard jQuery way, the user know it and can better
> find
> there own failures and can report better error messages
>
> 4.) For my opinion is a large javascript file harder to debug and maintain
> as some freemarker files
>
>
>
> Obinna wrote:
> >
> > This way, the addition to the freemarker templates is almost thoughtless
> > and
> > the you don't place the (IMO) overburdening requirement to add yet
> another
> > <footer/> tag for the developer.
> >
> You are right, and it was just an Idea. Maybe it can be optional.
>
> -----
> ---
> web: http://www.jgeppert.com
> twitter: http://twitter.com/jogep
>
> --
> View this message in context:
> http://www.nabble.com/Create-a-single-javascript-tp24935752p24937153.html
> Sent from the Struts - Dev mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
> For additional commands, e-mail: dev-help@struts.apache.org
>
>

Re: Create a single javascript

Posted by Musachy Barroso <mu...@gmail.com>.
>
> 2.) This big javascript was loaded on every single page

This is an advantage instead of a problem. Browsers can cache this
javascript file, if you put all the javascript in the page, it will:
1. make your pages bigger (not good)
2. prevent the browser from caching the javascript (longer rendering times)

> 4.) For my opinion is a large javascript file harder to debug and maintain
> as some freemarker files

I will side with Eric. I think that moving any static javascript to a
file is the way to go, for the reasons mentioned above and because
reading javascript inside freemarker is kind of hard.

You two should join forces on this jquery plugin effort :)

musachy

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
For additional commands, e-mail: dev-help@struts.apache.org


Re: Create a single javascript

Posted by Johannes Geppert <jo...@web.de>.
Hello Eric,

thank you for fast response.


Obinna wrote:
> 
> What I have done is to put all of the meat of the javascript code into a
> single file which is included in the sj:head and then just have a small
> binding snippet code rendered with each tag which calls a binding function
> in the main .js file.
> 
I think also about this, but i dislike some thinks.

1.) When supporting all Widgets and interactions with one javascript file,
this file grows really fast.

2.) This big javascript was loaded on every single page 

3.) When I use the standard jQuery way, the user know it and can better find
there own failures and can report better error messages

4.) For my opinion is a large javascript file harder to debug and maintain
as some freemarker files



Obinna wrote:
> 
> This way, the addition to the freemarker templates is almost thoughtless
> and
> the you don't place the (IMO) overburdening requirement to add yet another
> <footer/> tag for the developer.
> 
You are right, and it was just an Idea. Maybe it can be optional.

-----
---
web: http://www.jgeppert.com
twitter: http://twitter.com/jogep

-- 
View this message in context: http://www.nabble.com/Create-a-single-javascript-tp24935752p24937153.html
Sent from the Struts - Dev mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
For additional commands, e-mail: dev-help@struts.apache.org


Re: Create a single javascript

Posted by Obinna <ob...@gmail.com>.
Johannes,

What I have done is to put all of the meat of the javascript code into a
single file which is included in the sj:head and then just have a small
binding snippet code rendered with each tag which calls a binding function
in the main .js file.

The binding snippet is identical for all tags so (using Freemarker), I
simply have a jquery-bind.ftl template and call <#include
"/${parameters.templateDir}/jquery/jquery-bind.ftl" /> at the end of each
one of my tag templates.

I have found that consolidating all the js makes the framework much more
maintainable and extensible (you don't have to re-write the js for use with
different template engines). Doing it this way has also provided a simple
way to allow plugging-in user developed custom widget (basically I provide a
hook that just calls the same bind function and adds any custom .js code for
their widget).

You can find the source code (and incomplete documentation) for this at:
http://code.google.com/p/struts2-jquery-plugin/

This way, the addition to the freemarker templates is almost thoughtless and
the you don't place the (IMO) overburdening requirement to add yet another
<footer/> tag for the developer.

- Eric


On Wed, Aug 12, 2009 at 3:46 PM, Johannes Geppert <jo...@web.de> wrote:

>
> Hello,
>
> maybe anybody can give my some input for an idea I have today.
> I work on the current struts2-jquery-plugin.
> http://code.google.com/p/struts2-jquery/
>
> At the moment the tags create after each generated html tag
> an separate <script> tag like this:
>
> <div id="mydiv1"></div>
> <script type="text/javascript">
> $(document).ready(function () { do something with mydiv1; });
> </script>
> <div id="mydiv2"></div>
> <script type="text/javascript">
> $(document).ready(function () { do something with mydiv2; });
> </script>
>
> This looks a little bit dirty, so I look for a way to collect all the
> generate javascript stuff
> to one big javascript
>
> <div id="mydiv1"></div>
> <div id="mydiv2"></div>
> <script type="text/javascript">
> $(document).ready(function () { do something with mydiv1;  do something
> with
> mydiv2; });
> </script>
>
> Maybe all the generated javascript can be put on an Stack
> and can be rendered with an separate sj:footer tag.
>
> The JSP can look like this:
> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
> <html>
>  <head>
>    <sj:head/>
>  </head>
>  <body>
>    <sj:div id="div1"></sj:div>
>    <sj:div id="div2"></sj:div>
>    <sj:a id="link1" href="%{ajaxurl}" target="result">Link</sj:a>
>    <sj:datepicker />
>    <sj:footer/>
>  </body>
> </html>
>
> Is there a way or should I put this idea out of my mind?
>
> Best Regards
> Johannes Geppert
>
> -----
> ---
> web: http://www.jgeppert.com
> twitter: http://twitter.com/jogep
>
> --
> View this message in context:
> http://www.nabble.com/Create-a-single-javascript-tp24935752p24935752.html
> Sent from the Struts - Dev mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: dev-unsubscribe@struts.apache.org
> For additional commands, e-mail: dev-help@struts.apache.org
>
>