Assets packaging tool like jammit for JSP, Java EE projects? - javascript

We've got a lot of javascript and CSS files in our Java EE project. We're wondering if there's a tool to help you package(minification) these files, like the jammit tool in Rails?
For instance, in a JSP page, i want to do something like this:
<tag:include_stylesheets :common, :workspace, :media => 'all' />
<tag:include_javascripts :workspace />
In development, no packaging is performed, so you'll see a list of individual references to all of the JavaScript and CSS files. When we package a war file, it compiles javascript into a single file(or a few files and only include the one that's used)
Is there any tool like that for JSP?

Yes - Jawr - "Bundling and compression for javascript and css"
(Actually, building your own is rather simple, but it's better to reuse the library)

There are several more options:
pack:tag - Comprehensive JavaScript and CSS packaging solution
jso - JavaScript Optimizer
wro4j - Web Resource Optimizer for Java
Disclaimer: Though I'm working on one of these, the answer is unbiased.

Related

Bundling and minification technique

I have a question regarding JavaScript bundling methodology.
We have any existing Java Web application (A product) consisting of lot of jsps. We wanted to implement the bundling and minification methodology for the js and CSS files in order reduce the overhead(). As I mentioned this is a Product it comes with its traditional web folder structure
Is there any way (Any tool) through which we can have a dynamic bundling methodology without changing the syntax in jsp. If we change the syntax in jsps then this will increase our overhead during upgrade activities.
Jawr is a tunable packaging solution for Javascript and CSS which allows for rapid development of resources in separate module files. Developers can work with a large set of split javascript files in development mode, then Jawr bundles all together into one or several files in a configurable way.
By using a tag library, Jawr allows you to use the same, unchanged pages for development and production. Jawr also minifies and compresses the files, resulting in reduced page load times.
Jawr is configured using a simple .properties descriptor, and aside of standard java web applications it can also be used with Facelets, Grails, Wicket and Spring applications.
https://jawr.java.net

Managing dependencies of web components; JS, CSS/SASS and template files

I'm looking to layout the structure of our new web components and am currently not sure I've found a tool that'll do all of what we ideally want, or comes very close, but it seems like it'd be a fairly common thing to want to do nowadays.
We have a web application that is running Java server-side, while client side we use JavaScript heavily and SASS, amongst other things. We are looking to re-sturcture some of our codebase and component-ize certain aspects of our dynamic page content.
For example, we would like to have a standard table component that can be developed completely independently of the full web app. I see the table component having the following 3 core files:
table.js
table.scss (our SASS file that compiles into a CSS file)
table.tmpl (our template file that is ultimately compiled into a JS function, e.g. using something Handlebars as a templating engine)
And then to help development:
table-test.html (A test page with some dummy data)
table-qunit.js (Qunit tests)
All of these files would then hopefully be compiled into the following:
components.js - table.js and table.tmpl compiled and minified, and then pulled into some larger JS file with all other components
components.css - table.scss compiled and compressed, and merged with all other component CSS
Tools I've looked at:
requireJS - seems to be very much targeted at JS dependency management with some thought for resource files but can't find anything about its use and CSS pre-processors like SASS. I do like the idea of AMD JS dependency management a lot however.
Grunt - A node package that does some of what we want
Sprockets - Ruby implementation of something similar to what we want
Javascript Maven plugin - Closest in terms of languages / libraries (we already use Java and Maven) but again, seems to only consider JavaScript dependency management and not CSS, or at least SASS resource files.
Does anyone have any better suggestions than the ones above? Anything that comes a little closer to what we are looking for? Ideally something that doesn't require Node.js or Ruby would be preferable...
This really sounds like a perfect fit for Component by TJ Holowaychuk.
I think I have found my answer, all thanks to this ST post: Maven Javascript Compressor
The answer to my troubles seems to be wro4j.
It has the following benefits for me (see features page for everything):
Maven-ized
Java-based
Spring configurable
Supports SASS files, and Dust templating (which we now have chosen, which I thought was a relatively unknown templating engine)
Options to use at build time, or runtime!
And more...
How is wro4j working out for you? Also check out cartero!

Build-time assembly of HTML and JS fragments for Single-page applications

I'm preparing to write a large single-page app but I'm looking for a better way to develop it than writing the whole thing as a single file. I'm concerned about maintainability and testibility so I'd prefer to split it up into modules or fragments which can be developed and tested separately, then assembled into a single file at build-time. I don't believe I'll need to do any server-side templating so the final file delivered to the browser will be static and any customization done via JavaScript in the browser.
What I think I'd also like (but perhaps tools with better methods exist but I just haven't found them yet) is to develop the HTML fragments within full, self-contained HTML files so that they can be tested as standalone pages without having to assemble the entire app. This means there would need to be a way to tell the assembly tool which part of a fragment file is the actual fragment so that it should discard the HTML sandbox surrounding it.
Are there any development tools which would enable me to do this?
You are planning to build a modular application am i right? then take a look at these resources:
Nicholas Zakas' scalable, modular JavaScript - this one discusses the "take apart and individually testable" part you are looking for
RequireJS for inter-JS dependency handling - for JS files that need other JS files to work
BackboneJS - for structuring your application
Mustache template builder - to avoid writing your HTML in JS files
an multi-purpose toolkit like jQuery

Any script/stylesheet compressors for ASP.NET without MVC or something similar?

I am trying to find a nice solution to concatenate and compress javascript and css in my webpage to improve YSlow performance. The website is built using ASP.NET in both VB and C#. I seen some cool tools, like Cassette and Chirpy, but they both seem to need some aspect of the MVC framework that I don't have. Any ideas?
So far the best I've found is a version of Chirpy that will do compression and whatnot inside visual studio, which is cool, but not as automated as I would like.
SquishIt is fairly useful and simple to setup.
It uses YUI Compressor and can minify CSS/Javascript.
I use YUI Compressor. Its nice because every time you build your project it will automatically minify it for you. Lots of good tutorials out there for it as well. I used this page to figure out how to configure my .xml file. Link
We used FrogMSBuild to combine files and MS Ajax Minifier to minify the resulting files. See my short summary on how to set them up in a web project.
Check if Microsoft Ajax Minifier would fit your needs. Do you need a dynamic/runtime or static/compile time minifier?
Here is the snippet from the project build file.
<!-- Ajax Minifier -->
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild" Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\extJS\**;**\extJS_extensions\**" />
</ItemGroup>
<AjaxMin JsSourceFiles="#(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js" />
</Target>

Can I use YUI compressed when building ASP.NET projects in VS2010

I want to minify java script files in my vs2010 web app ASP.NET solution. I know that YUI compressor can do it pretty well on its own. So I was wondering if I can do the following:
I have all JS files in the Scripts folder in my solution.
JS files are included into aspx pages as follows:
<script src="Scripts/scripts.js" type="text/javascript"></script>
It would be nice to minify the 'scripts.js' file when building "Release" configuration, as well as when I'm publishing my web app.
Can someone explain here how to automate it all in VS2010?
Microsoft actually has a pretty good solution for this. You can read about it here.
competent_tech's answer would achieve your objective by using the Microsoft Ajax Minifier in an MSBuild Task. The Ajax Minifier is another minification tool that essentially does the same thing that the YUI compressor does. Its performance and optimized javascript and css are very comparable to the YUI solution.
If you are specifically interested in a YUI Compressor option, check out http://yuicompressor.codeplex.com. This is a .net port of the YUI Compressor and also provides a MSBuild Task solution.
Lastly, I'll recommend my own OSS project, http://RequestReduce.com. This will crunch and combine your css and javascript at run time. It caches them and serves them using far future expires headers and customized ETags. Additionally, it can automatically sprite your background images. The nice thing about this is that it requires no codeor configuration for basic functionality. It can dynamically find your css and javascript files.
RequestReduce does use the ajax minifier but allows you to plug in your own minifier pretty easily. The wiki at https://github.com/mwrock/RequestReduce/wiki has sample code for accomplishing that.

Categories