[xwiki-devs] [proposal] JS and CSS improvements

[Sergiu Dumitriu]

You should read http://dev.xwiki.org/xwiki/bin/view/Design/SkinExtensions

It is still a draft, this is why it wasn't published on the mailing list 
yet.

Sachin Mittal wrote:
> Well I think this has to be done in steps
> 1. Remove all the unused js code from the albatross skin like under
> scriptaculous and also the multiple prototype.js
> 2. In the javascript.vm and stylesheets.vm conditionally load css and js
> files based on the action.
> 3. For better maintainability keep all js under one folder and all css under
> other and images in other.
> 4. I am be wrong but doing step 3 would enable someone to put all the static
> content under a web server say apache and use app server say tomcat to serve
> only the dynamic content by bridging the two, which in turn would prove to
> be a good solution for a scalable enterprise deployment.
> 5. Merge all the css under one or lot fewer files. 
> 6. Also check that style.css under toucan skin is 57 kb large, so the css
> size should be reduced in the merged css file(s)
> 
> Thanks
> Sachin
> 
> 
> 
> Ludovic Dubost-2 wrote:
>>
>> Yes.. we need this to be able to also create valid XHTML since CSS is 
>> not allowed in content anyway.
>> MergeCSS does not work well though. We had to roll it back when we have 
>> been using it.
>>
>> Ludovic
>>
>>> Ludovic Dubost wrote:
>>>   
>>>> Currently the albatross skin loads around 10 js and 10 css, which is 
>>>> quite a lot.
>>>> We can improve loading time by:
>>>>
>>>> - compression and cache (raffaello will provide Apache configs specific 
>>>> to XWiki to help for that)
>>>> - merging and optimizations of css/js (I've published 
>>>> http://www.xwiki.org/xwiki/bin/view/Code/MergeCSS to help on that)
>>>> - removing unused css/js (now we need to find which one are unused)
>>>> - conditional loading of css and js.
>>>>
>>>> This last improvement can help us a lot since some of the css/js are not 
>>>> even used in view mode, or are only used by a specific panel.
>>>> For this my proposal is to add a feature to the core to allow 
>>>> conditional loading of CSS and JS files.
>>>> The current macros in the header would instead of putting CSS and JS add 
>>>> a placeholder for additional CSS and JS.
>>>> Then everywhere where we need these CSS/JS (in a panel, in a wiki page, 
>>>> in a template) we would call a macro #includecss or #includejs
>>>> This macro would add in the context the CSS and JS to add.
>>>> At the end of the template rendering the placeholder would be replaced 
>>>> by the added CSS and JS.
>>>> The page would be served.
>>>>
>>>> This would allow to manage the way CSS and JS are added.
>>>>
>>>> WDYT ?
>>>>
>>>> Ludovic
>>>>
>>>>     


-- 
Sergiu Dumitriu
http://purl.org/net/sergiu/