All about Javascript and Liferay

Introduction

Since Javascript/ JQuery is an integral part of any dynamic web-app still we are always in a fuss about deciding for the folder structure for keeping the library which may range from keeping one file or multiple.

For simple multiple file upload functionality too we need to keep a respective supportive .js script file and include it to the page (multi-file.js). Similarly, we have a lot many libraries for our varied requirements.(block-UI.js, Meta.js, jQueryUI.js and many others).

Problem
1. The reason for all this discussion is that if we keep our .js library file anywhere heedlessly then it will affect the loading time of our application.
2. Moreover to keep the seed file inside the system or let the google host it.

Given
The available options in Liferay regarding this is
1. Keep it in liferay-portlet.xml
         a) <header-portlet-javascript>/js/jquery.min.js</header-portlet-javascript>
         b) < footer -portlet-javascript>/js/jquery.min.js</ footer -portlet-javascript>
2. Keep in themes
            To add .js file in theme and to use it in your portal_normal.vm file .
            Following are the steps you may follow.
            1) Download the js file
            2) in my-theme/docroot/_diffs/js folder, add the file
            3) In portal_normal.vm file you can access the js file using following tag
            <script src="$javascript_folder/jquery.min.js.js" type="text/javascript" ></script>

Discussion
Summing up the discussion here:
1. Where to Keep the .js file ????

If you have multiple copies of your portlet on a page, each copy is going to load the script. That is why you put it into the liferay-portlet.xml file, because Liferay will ensure only one copy of the script is loaded on the page, regardless of what portlets on the page are using it.

Ques: Keeping in liferay-portlet.xml is better or keeping in a jsp page like init.jsp...Since we have many portlets under one project all including the init.jsp. So, putting in liferay-portlet.xml for each portlet is better or in a common init.jsp of the project??? 

In liferay-portlet.xml. When the page is being rendered, all of the entries are checked and only one script include will be on the rendered page. Putting it in init.jsp still means that every portlet instance (which has init.jsp pulled in) would still try to reference the same script.putting it in init.jsp is the same thing as putting it in each of your jsp file because you're actually just including it. If the portlet is instanceable (that is, something like web content portlet that can be placed several times in a page), each instance of that portlet is going to try to load the js file. If you put it in the liferay-portlet.xml file, liferay will only load the js file once. Thus, the page is going to load faster.

Ques:I have 5 portlets and all of them are using almost 5 js files. If I'll keep in theme will that be better than keeping in liferay-portlet.xml ??? keeping in theme does'nt make it reload every time and make it slow??

You should put JS requirements into the theme only when they are site-wide requirements (because they will load on every page, regardless if one of your 5 portlets is on the page or not).
You could overcome this by creating a special theme for the page(s) the portlets are on, one that declares your normal theme as the parent in it's build.xml file. You'd have only one override in _diffs (to include the javascript files) plus the JS files. This has a maintenance impact though (when you make changes to the normal theme, you must build and deploy both themes (so the special theme will include the changes from normal theme)).If you don't want to use the JS on all pages and you don't want to maintain a special theme, then putting the JS in liferay-portlet.xml is the way to go. 

 2. What should be the Seed src in
             <script src="?" type="text/javascript" ></script>???

In the case of Google’s AJAX Libraries, any user not physically near your server will be able to download jQuery faster than if you force them to download it from your arbitrarily located server.

Using the Google AJAX Libraries eliminates one request to your site, allowing more of your local content to downloaded in parallel.

However, when a browser sees references to CDN-hosted copies of jQuery, it understands that all of those references do refer to the exact same file. With all of these CDN references point to exactly the same URLs, the browser can trust that those files truly are identical and won't waste time re-requesting the file if it's already cached. Thus, the browser is able to use a single copy that's cached on-disk, regardless of which site the CDN references appear on. 

keeping our own file locally helps us to load .js library even when we are not connected to internet. This is basically beneficial  at the time of the application's development

Conclusion:
1. Where to Keep the .js file ????
It should better be kept in the theme as is the procedure stated above.

2. What should be the Seed src in
             <script src="?" type="text/javascript" ></script>???
We should allow Google to host our JQuery for all our web-application.