Fórum

Javascript Consolidation?

thumbnail
Andew Jardine, modificado 12 Anos atrás.

Javascript Consolidation?

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Hi Everyone,

I need some help with some Javascript issues. What I have is several portlets (6 in total). There are JS files that are unique to each portlet, and there are also files that are shared (but present in each). What I am wondering if is there is a way to use the javascript.everything.files to specify all these JS files so that they are pulled back in one HTTP call (under teh everything.js) in place of dozens of calls. I suppose one hack would be to mash them all together by hand, but I want to maintain the segragation for development ease.

I tried using the portal-ext property but I think I might be using it incorrectly. This is how I have my project set up --


my-portlet
   - portletA
         - js
             - a-file1.js
             - a-file2.js
    - portletB
         - js
             - b-file1.js
    - js
      - common
           - common-file1.js
           - common-file2.js


-- I have inheritted this so please don't judge me on the structure. I also noticed that the developer did not put any of these files as part of the liferay-portlet.xml definitions which (correct me if I am wrong) means that they are not loaded at the page level, but rather at the portlet level. In my portal-ext.properties file I have --


javascript.everything.files=\
    /my-portlet/portletA/js/a-file1.js,\
    /my-portlet/portletA/js/a-file2.js,\
   ...
    /my-portlet/js/common/commonfile2.js


But this doesn't appear to work. I did search the response text for the everything.jsp for contents that are found in one of the listed files but it could not be found.

Can someone tell me how I can have all my portlet JS files mashed into the everything.js to eliminate so many http request/response cycles?
thumbnail
David H Nebinger, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 14914 Data de Entrada: 02/09/06 Postagens Recentes
Well, you have two options:

1. Include all of the JS as part of a theme. Less intrusive, but would allow you to include all of the JS at one time (not through the javascript.everything.files property).

2. Create an EXT plugin. The JS goes in the appropriate place in the tree (<ext plugin>/docroot/WEB-INF/ext-web/docroot/html/js) and then you can add it to the javascript.everything.files.

Basically your method doesn't work because javascript.everything.js expects the files to be part of the ROOT web application and the paths that you've included don't exist (they do not resolve to your portlet path).

The theme is definitely the less-intrusive method of the two, but if you already have an EXT plugin then it would be a simple matter of including those too.
thumbnail
Andew Jardine, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Hi David,

Thanks for writing back to me. I'm using Liferay 6.0 (I forgot to mention that). Does that change any of the information you have provided to me? The other thing is that the portlets are mixed bag. Some of them are using regular good old fashion jsp with javascript mostly as utilities, but the others (the more painful ones) are build using ExtJS.

From a portability perspective, I would think that the EXT approach is better since I think it would mean that I could deploy the portlets independent of the theme right? Are there any othre options (I can't seem to find any) that might be available with Liferay 6? I thought I read something about a javascript hook somewhere ... is that an option?
thumbnail
David H Nebinger, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 14914 Data de Entrada: 02/09/06 Postagens Recentes
No, 6.x will have the same options.

Yes, EXT would allow portlets to use the JS regardless of the selected theme. It has the awkward side effect of requiring a restart after deployment; if that's a problem, then stick w/ the theme approach. Since most installations typically have a custom theme (they don't normally just use the classic theme from Liferay), that's an easy place to add the JS w/o adding a new EXT plugin to the mix.

I've never done a JS hook before, but it could work too. Again it's the same as being dependent upon the theme, though, except now you're dependent upon a hook.
thumbnail
Andew Jardine, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Ok -- I have a couple more questions if that's ok

1. If I use the ext appraoch, is there an easy way to confirm/tell that the files made their way into the everything file?

2. Does this mean that I can remove them from the liferay-portlet.xml file (and I am assuming the portlet project itself)

3. How do I now reference the JS files in my portlets? do I use the gloabal /html/js/ext/... path?
thumbnail
David H Nebinger, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 14914 Data de Entrada: 02/09/06 Postagens Recentes
Andew Jardine:
Ok -- I have a couple more questions if that's ok


Sure, we're here to help.

1. If I use the ext appraoch, is there an easy way to confirm/tell that the files made their way into the everything file?


It won't automatically add them to the everything file, it just will deploy them to a place where ROOT can access them. You will still need to add the file(s) to the javascript.everything.files property.

2. Does this mean that I can remove them from the liferay-portlet.xml file (and I am assuming the portlet project itself)


Yes. Since they are part of the EXT plugin, you don't have to do anything with it.

3. How do I now reference the JS files in my portlets? do I use the gloabal /html/js/ext/... path?


You don't, in the same way you don't say you want any of the Liferay or AUI JS files. They will automatically be part of every rendered page, so you just need to invoke those parts you need access to.
thumbnail
Andew Jardine, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Excellent. So I guess the answer to knowing whether or not they were included in the everything file is basically to remove the references in the portlets and see if anything breaks in the page.

Is there a way to further reduce the size of the transfer by applying a gzip compression to the everything file?
thumbnail
David H Nebinger, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 14914 Data de Entrada: 02/09/06 Postagens Recentes
The gzip and minifier filters apply to everything already, you don't have to do this yourself.
thumbnail
Andew Jardine, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Hi David,

I'm hoping you're still around to help me some more on this one. Here is what I have tried. SInce I am using LR 6.x I figured I might as well try a JSP hook since I think it does the same thing as the Ext Plugin. I used the JSP hook to override the terms and conditions page so I thought it would be worth a try. Sadly, it did not work. So I tried the Ext plugin.

Inside docroot/ext-web/docroot i created the /html/js/extjs folder. In there I place teh js files I want to put mashed into the everything.jsp. I then went to the portal-ext.properties file and added the javascript.everything.files=extjs/file1.js, extjs-file2.js, etc. I deployed the ext plugin, restarted the box and then navigated to a secure page. Using firebug I grabbed the full output of the everything.js result and then tried to find some of the lines that are in the JS files. Sadly, none of them are found.

Do you have any other suggestions? Is it possible to set a logging level somewhere to debug or info so that I can see what files it is trying to include? Right now I can't tell if it's the path I have wrong, or if it is something else all together.
thumbnail
David H Nebinger, modificado 12 Anos atrás.

RE: Javascript Consolidation?

Liferay Legend Postagens: 14914 Data de Entrada: 02/09/06 Postagens Recentes
Everything.js is not always used, it depends upon your portal-ext.properties. Some of the developer settings will disable everything.js usage, I believe.
thumbnail
Andew Jardine, modificado 12 Anos atrás.

RE: Javascript Consolidation? [SOLVED]

Liferay Legend Postagens: 2416 Data de Entrada: 22/12/10 Postagens Recentes
Hey David,

I wanted to post my final results (incase anyone else stumbles upon the same issue) and to say thanks again for your help.

In the end I took your advice. As a matter of interest I did try to use a JSP hook before the Ext plugin. At first it looked promising, but I quickly realized that it was more for substitution than addition. Since I was trying to ADD file to the ROOT application, the Ext plugin was my only real option.

Here is what I did.

1. Using the Eclipse IDE I create a EXT plugin project.
2. Under the resulting project I expanded docroot/WEB-INF/ext-web/docroot
3. I create the structure /html/js to mirror what is in the ROOT
4. I then created a sub-folder (a bunch actually but to keep it simple...) called extjs
5. In there I placed the core ExtJS files
6. I then removed the JS files them from my portlet.
7. I deployed the Ext project.
8. After the deployment I stoped the server.
9. I then updated the portal-ext.properties file to include
javascript.fast.load=true
javascript.everything.files=extjs/file1.js,extjs/file2.js

**NOTE: one of the bundle paths specified in portal.properties is /html/js so you don't need to specify that part.

10. I restarted the server.
11. Redeployed my portlet (JS files removed)
12. Login to the portal.
13. Navigate to the page with my portlet.
14. Used firebug to verify that the JS files were not loaded (explicitly)
15. Test the portlet and all JS functionality worked.

The only thing to note, since I was new to EXT Plugins is the pain to make changes to it. For anyone else who comes across this, the IDE offers a sweet option. If you right click on the project there is a Liferay option. Under there you will find the option to "clean app server.." (or something). This will use the bundle zip you've specified and basically replace the existing runtime with the bundled one. Be forewarned you will lose all your deployments if you use the OOTB one you download. I zipped up my pret EXT plugin version and specified that as my bundle and then continued to add the JS files one at a time to make sure no conflicts came up.

Thanks again.