Jasy, the ultimate web tool

This article was also posted on http://code.zynga.com. Head over to read more about our technical marvels!

A cherry tree.

Never heard about Jasy? Worry not – you are not the only one. Jasy is a web tooling framework (read: fancy JS build system). If Grunt is a cherry, Jasy is a wonderful cherry tree. In fact, Jasy is closer to Yeoman, with the big distinction that Jasy is written as a tightly integrated solution from the ground up, while Yeoman is patched together from various sources.

Really, another one?

I know what you’re thinking. “Sure sure, another half-assed attempt to build a JS build solution that actually works..”. Except that this one actually works. This is the real deal, my dear reader. Taken from the Jasy docs:

Jasy is a construction tool for web projects. Think of Jasy as a replacement for the classic make utility heavily inspired by modern tools like SCons (Used by V8, MongoDB, …), Waf (Used by Samba, NodeJS, …) and Maven. Jasy is based on the learnings through creating the “generator” for the qooxdoo JavaScript framework.

You sure it works?

Yep. In fact, Zynga adopted Jasy around a year ago and actively funded its development. We believed in it, and today, Jasy is a very important piece in our HTML5 game tool-chain at Zynga. To date, we just didn’t do a great job evangelizing it outside of Zynga, and we are finally at a point where the docs are good enough to get you started.

What are the fancy things Jasy can do for me?

The Wenger Giant Swiss Army Knife.

Jasy comes with an overwhelming set of rich features. Here’s a small excerpt:

  • Fully scriptable build scripts
  • Easy remote dependencies from both local and remote sources (i.e. Git!)
  • Deep understanding of your JS, full blown JS parser that generates AST
  • Reliable, automatic dependency analysis for JavaScript
  • Effective and stable code optimizer and compressor
  • All-in-one deployment of your site (resolving all dependencies into a single relative file structure)
  • Permutations (individual builds for various capabilities)
  • API docs generation
  • Scaffolding of web projects (skeletons)

Wait – automatic dependency resolutions?

Say you want to include two third party projects into your own. Jasy is smart enough to resolve any dependencies of your dependencies, so you will never have four running copies of require.js on your page. And it gets better: You don’t get to write a single <script> tag anymore. Jasy understands what JS files in your project directory are actually being used and automatically loads them in the right order.

Now don’t tell me you also replaced JSDoc with something that actually works.

Jasy’s API browser in action.

We replaced JSDoc with something that actually works. Generating API docs in Jasy is a beautiful cooperation of three projects:

  • Jasy: Parsing and processing JavaScript code + exporting data
  • Core: Basic JavaScript library used in conjunction with Jasy projects
  • API Browser: Web application for navigating and rendering the Jasy generated data

We felt we could do better than JSDoc. It is heavily verbose and requires you to include a lot of meta data, as JSDoc doesn’t even attempt to understand JavaScript (update: apparently JSDoc3 does have a JS parser. Thanks for the tip, Michael!). Jasy docs are not only human readable, they’re also super short and quick to write:

/** {Number} Calculates and returns the sum of @x and @y */
function sum(x, y) { return x+y; }

Core + Jasy

You can use Jasy with any client-side JavaScript framework of your choice. But if you decide to opt-in and use Jasy’s nephew Core, you will supercharge Jasy and your project further. The helpers it offers such as Class, Module and Interface constructs are well known by the API doc parser and Jasy itself. It makes Jasy so smart that even without any user-provided documentation, Jasy will be able to generate pretty helpful API docs.


Fancy enough? I guessed so.

Well, damnit. Too bad it’s MIT licensed and lives on github, along with all the source files, free to consume. Go grab a copy and use or modify it to your hearts content. Oh – and buy Sebastian Werner a beer for starting it all!

Head over to the Github repo, follow the install instructions and clone an initial skeleton to get started in 10 minutes.

Reply with a tweet or leave a Webmention. Both will appear here.