No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
Inspiredby HAML, SASS and JABL by mr Hampton Catlin


= 1.1
= 0.5.0
= 1.1.2
= 1.0.1
 Project Readme

Javascript Abstract Behavior Syntax? What's that?

Last yeer I was working on a project very similar to in the months running up to RubyFringe.

Then I saw Hampton's presenation. Oops.

But now over a year has passed and there is no Jabl/Jabs or whatever one would decide to call it. (

So screw it. Now is the time for Jabs.

Would you rather code this?

jQuery(function() {
  var $ = jQuery;

    .blur(function() {
      var self = $(this);
      if(self.val() === "") {
    .focus(function() {
      var self = $(this);
      if(self.val === self.attr("default_value")) {

Or this?

$ [default_value]
    if @value === ""
      @value = @default_value
    if @value === @default_value
      @value = ""


Watch the quick code-demo video. Watch the drag'n'drop code-demo video.


Let's kick things off and look at all of Jabs' fun-filled features.

gem install jabs -v 0.2.0


Jabs comes with an executable, jabs. Jabs code IN, Javascript OUT. As god intended.

jabs < somefile.jabs > somefile.js


It can be scary to leave the world of JavaScript for the madness that is Jabs. But fear not. For Jabs treats JavaScript like the good friend it is. When Jabs encounters a line it doesn't understand it treats it as JavaScript and doesn't make any modifications. This lets us do things like this

  MySpecialObject.method($this, {
    option_one: "value"

It even let's the real javascript spill over into other lines. Do be careful, the law of whitespace still applies here. Two spaces per level of indentation.


Jabs pays special attention to lines that begin with a dollar sign. These are the selectors.

$ .plan > img
// Is analogous to
$(".plan > img")

When you've figured out your selector, enter a new line and indent. Two spaces. Always. At the root of a Jabs program, the context is $(window).

Jabs borrows an idea from Sass and lets you go deeper into a selector.

$ .plan
// Is analogous to

Implied Self & Automatic Method Calling

In normal Javascript whenever you want to do something in the current context you have to go fishing for the 'this' object.


But in Jabs there is an implied self.


Jabs comes with something else, methods will automatically be called just by being referenced. Parenthesis are not required. Arguments may also by supplied with or without parenthesis.

  .fadeOut 'slow'

Hash Literal Syntax

Some methods, like .css take a hash. To make life easier with these methods a lean hash literal has been provided.

        background: #fcc
        z-index: 2000


Jabs pays attention to lines beginning with ':'. These lines specify event handlers. Jabs has one special event, ':ready'. This is like the jQuery onReady shortcut.

// Is analogous to
jQuery(function(event) {

Events are bound with the jQuery live method. Where necessary, plugins have been provided to ensure all events work with the event delegation of live.

// access to the event object is also provided


Who wants to go around looking up attributes on DOM nodes like this?

$(this).attr('some_attr', "some value")

Nobody at Jabs HQ. We borrow a syntactic sensibility from Ruby and access our attributes with the at sign. This works for both getting and setting attributes.

&lt;input default_value="Search..." /&gt;
// with Jabs we can write:
  @value = @default_value
// Or with jQuery

The attribute syntax also works in the middle of lines and always gets and sets attributes on the DOM node of the current context.

Path Accessors

jQuery has a little used property, "prevObject". It allows you to do this:

el = $('#element')
el.find('img')'#element') == true // true

Jabs provides a lean way to access various levels of the jQuery object in-line.

    // Works with implied self'#element') == true
    // Works with attributes
    ..@id = @parent_id + "_element"
    // And travels up more than one step
      @parent_id = ../..@id

Automatic jQuery Wrapper

Jabs provides an automatic jQuery wrapper where it makes sense. Take the example of an event handler.

      .fadeOut 'slow'
// Is analogous to
$('#element').click(function(event) {


Jabs introduces Ruby style conditionals. They are a joy to use.

if 3 === 4
  unless 4 === 3
    if 3 === 3

var a = cat
if 3 === 4
  var elk = "3"
  unless 4 === 3
    if 3 === 3

if 1 == 2
else if 3 == 4

These are all valid conditionals. You may use @ttributes and path accessors in conditionals.


Jabs lets you define functions. Functions are scoped by the level of indentation.

fun my_function foo, bar
  console.log(foo, bar)

Remember, if you run into a syntax you can't quite lick, Jabs always lets you write plain old Javascript right in the middle of a Jabs file.


Jabs wants you to define methods for DOM node contexts.

// This method only allows certain characters to be typed into an input
def whitelist regex
    if event.charCode > 0 && !String.fromCharCode(e.which).match(expr))

  .whitelist /[\d]/

Nice. It's pretty simple.

Drag & Drop

Jabs ships with a library for simple drag and drop programming. Here's a simple example of it in action.

def sortable parent_selector
      .closest parent_selector
            position: 'absolute'
          .appendTo document.body

        top: event.pageY
        left: event.pageX


Learn more about the drag and drop libraries being used:

Rack Middleware

Jabs comes with some special Rack middleware.

# First a subclass of Rack::Static
use Jabs::Rack::Static, :urls => '/jabs', :root => 'public/jabs'

# And secondly a special app that serves the curated
# <script src="/jquery.js"></script> would do the trick for this rackup file.
Jabs::Rack.mount(self, '/jquery')

Look at examples/ to see these in action.

License unspecified. Probably MIT or BSD. Don't be a dick.