[ANN] Cassette-Express - Client-side JS Asset Bundling

59 views
Skip to first unread message

Charlotte Gore

unread,
May 14, 2012, 7:10:04 AM5/14/12
to nod...@googlegroups.com
Hi all,

Wanted to let you know about Cassette-Express (https://github.com/CharlotteGore/Cassette-Express). It's a module designed to make managing your browser side code painless both during development and in production with an emphasis on faff-free workflow:  Create a new JS file. Add some code. Save it. Reload the page.

The documentation is geared towards integration with Express applications but it can be integrated with anything that lets you execute Javascript inside templates.

The main reason to use this instead of (for example) Browserify is that it you don't need to refactor your client side code (and external third party code) into CommonJS modules but you still get automatic dependency management.

It works with just about any Javascript that'll run in a browser with no changes. There's also no command line build tools (CI friendly), no need to worry about script tags, and there's seamless switching between debug (get individual, unminified files) and production (get one ultrasquished minified download).

I've used a system that works in this way in a .net environment for the last few years and I've found the workflow to be quite liberating. It makes it painless to break large, complex web applications up into smaller and smaller files and not have to worry about managing endless script tags or updating a build script.

To access your Javascript, you just put some code in your template to reference your entry point - either a file or a directory, i.e, != assets.useAsset('/client-app')

In debug mode, you get a script tag for that file. And its dependencies. And the dependency's dependencies.. and so on. All in the correct order. Change anything and it'll reassemble your bundle next reload.
In production mode, you get a single script tag that points to the merged, mangled and squished version (care of uglify-js).

Dependencies are defined using Javascript comments, e.g: // @reference somefile.js ../somefolder

This is how we avoid the need for CommonJS modules - Add some dependency comments and you could build jQuery from the individual sources with this.


I'd appreciate any feedback or thoughts on this!

Charlotte
--
Charlotte Gore



Reply all
Reply to author
Forward
0 new messages