Announcing the first release of batman.js | Hacker News Reader

Announcing the first release of batman.js

batmanjs.org

123 pointsnciagra72 comments

From the site: "It gives us great pleasure to finally announce the release of batman.js to the JavaScript community today. This release represents the first code dump of something we’ve been working hard on at Shopify for a long time, so we’re very excited to get it into your hands and see what you do with it."

I got zero value out of this lead.

When you launch a product like this, please tell us why we'd want to use this. As developers, we don't have a bunch of time to parse your project notes. "It's like XXX, but offers these advantages..." At this moment, I don't know what batman.js is actually useful for!

Just two sentences after that, it lists exactly what it offers. One click away is the homepage which has much more detail. Are you seriously _so busy_ that you can't read a couple of lines more? And if you really are, please do practice skimming!

My broad point was that in watching hundreds of projects launch via H!News -- that in this Facebook era, all of us are having less tolerance for doing the skimming you mention. When you are fortunate enough to make it to front-page of H!News -- make it count.

I am a JS community outsider and I am reading this over breakfast. I couldn't figure out what I was looking at: Server-side? Client-side? Both? Then I thought, hey it's from Shopify, it must be client-side because Shopify is running on Rails. Right? But then, why routing? And then the second bullet item list says, "server-side batman.js is not yet very useful". So there it is running on both after all? Necessarily?

After giving up on the blog post, the index page of batmanjs was great though. I think it should've been linked to instead.

Sure, I'll break it down: batman.js is a JavaScript framework for rich JavaScript applications. It's designed to make development as fast and as painless as possible for developers and designers while giving them lots of power.

We designed everything around a number of primary goals such as convention over configuration, HTML-based views, and the principle of least surprise. This is something we're using at Shopify in our future projects, so it's meeting those goals while coming out of real work.

If you want more info, the features page (http://batmanjs.org/features.html) has a list of everything we're trying to do, and the examples page (http://batmanjs.org/examples.html) has a few usage examples. There's still only a couple, but I'm working as quickly as possible to build out the gallery.

And of course, let me know if there's anything else I can answer about the framework. I hope that helped clear it up a bit, though!

I didn't know about batman either and I got the same impression when landing on the page. It took me a few clicks to get a handle of what it was.

Can I suggest that in the website header you include some sort of one-line description, like 'the javascript web application framework', or similar and more creative?

I still don't really understand when I would consider using it. Would you use it to create some or all of Shopify?

Maybe this blurb from the documentation could find its way to the hoe page:

batman.js is a framework for building rich single-page browser applications. It is written in CoffeeScript and its API is developed with CoffeeScript in mind, but of course you can use plain old JavaScript too.

(Disclaimer: I work for Shopify.)

Shopify would use this to write the client-side parts. We can now save on a lot of server-side rendering of pages every time a request happens; instead we just send back JSON and Batman.js knows how to change the page accordingly.

We’re already using it internally for non-core projects like our phone support system (Batman.js + Faye + Adhearsion) – it makes for a really responsive web app that’s easy to maintain.

Expect to see this in the core Shopify product very soon :)

I still don't get what I'd use it for. Is it like jquery? Is it like rails?

Batman aims to introduce rails-like conventions for building single-page web apps.

Nick gave a nice demo at JSConf earlier this year: http://blip.tv/jsconf/jsconf2011-nick-small-5293530

Still nada. What does it actually do? A framework for doing what w.r.t. rich JavaScript applications? Is this like Cappuccino? How does this "make development as fast and as painless as possible for developers and designers while giving them lots of power"?

It's a rapid development tool for front-end development. If I'm reading the documation correctly, I think it's based on the MVC architecture.

Sure, you could make your backend in plain Ruby, but if you learn to use Rails you can do things quicker.

Sure, you could make your frontend in plain JavaScript, but if you learn to use batman.js you can do things quicker.

"batman.js is a JavaScript framework for rich JavaScript applications. It's designed to make development as fast and as painless as possible for developers and designers while giving them lots of power."

That sounds like a pitch I would give a non-techie manager or client. Someone who's been around computers enough to know that javascript is the thingie that makes web pages do stuff.

Your target audience is developers, yes? We can take it. The first thing in your pitch should be how it helps, not "We'll save you lots of time, we promise. Trust us!"

Man, tough audience.

This sounds more or less like Backbone.js. How does it compare to that?

The name is amusing, but a bit silly --

"What are you guys using for all of your cool AJAXy stuff?"

"Batman."

I'd like to see some examples in JavaScript, instead of CoffeeScript. Since at this point only a smaller subset of developers use CoffeeScript, I think it might be overall useful to more people if the provided examples used plain JavaScript (that, and CoffeeScript developers tend to understand JavaScript already, and may already be used to converting one to the other).

Sure, valid point. It's not something we work on day to day, so I don't have any readymade examples, but I'll definitely look into it. Thanks!

The subtext is that you should learn CoffeeScript. It's an alternative syntax, not a new language.

They wrote you a nice library and are giving it away under an MIT license. You don't get to pick the style they use to write the examples. That's like going to a science lecture and walking up to the speaker afterwards to say, "Hey, I think you have some great theories, but you really should lose that Australian accent of yours. Most scientists aren't from Australia, you know."

>It's an alternative syntax

Right... "alternative"... so makes sense to not give examples entirely in it unless your framework is intended solely for Coffeescript users.

Their framework is intended solely for coffeescript devs. Here's their example in javascript:

  (function() {
  var Shopify;
  var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
    for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
    function ctor() { this.constructor = child; }
    ctor.prototype = parent.prototype;
    child.prototype = new ctor;
    child.__super__ = parent.prototype;
    return child;
  };
  Shopify = (function() {
    function Shopify() {
      Shopify.__super__.constructor.apply(this, arguments);
    }
    __extends(Shopify, Batman.App);
    Shopify.root('products#index');
    Shopify.resources('products');
    return Shopify;
  })();
  Shopify.Product = (function() {
    function Product() {
      Product.__super__.constructor.apply(this, arguments);
    }
    __extends(Product, Batman.Model);
    Product.persist(Batman.RestStorage);
    return Product;
  })();
  Shopify.ProductsController = (function() {
    function ProductsController() {
      ProductsController.__super__.constructor.apply(this, arguments);
    }
    __extends(ProductsController, Batman.Model);
    ProductsController.prototype.index = function() {
      return this.redirect({
        action: 'show',
        id: 1
      });
    };
    ProductsController.prototype.show = function(params) {
      return this.product = Shopify.Product.find(params.id);
    };
    return ProductsController;
  })();

}).call(this);

To be fair, that's the compiled CoffeeScript. While it certainly is still fairly readable (even writable), the JavaScript you write by hand won't have the same "compiled feel".

It's readable, but any framework that requires you to recreate inheritance yourself is going to have a hard time selling to a js audience when Backbone works perfectly well (and can be written in cs just as easily).

This is more like what you would write by hand for the above code if the core constructors had a Backbone-style .extend function [1], which it likely would have if normal JavaScript usage was considered for the initial release (which I recognise is what this is - you can't expect everything first time):

    var Shopify = Batman.App.extend()
    Shopify.root('products#index')
    Shopify.resources('products')

    Shopify.Product = Batman.Model.extend()
    Shopify.Product.persist(Batman.RestStorage)

    // I'm never sure about how much I'm expected to mimic CoffeeScript code
    // when using libraries written in CoffeeScript and the source code is
    // written in a language I'm not practiced at reading - I've been bitten in
    // the past by CoffeeScript-only examples which *assume* you're transpiling
    // to JS in your head to insert the implicit return of the result of the
    // last expression.
    Shopify.ProductsController = Batman.Controller.extend({
      index: function() {
        return this.redirect({action: 'show', id: 1})
      }

    , show: function(params) {
        return this.product = Shopify.Product.find(params.id)
      }
    })

If there's common boilerplate associated with each constructor, you could also go further and customise the extend method for each one to take care of it if provided with certain configuration details, e.g.:

    var Shopify = Batman.App.extend({
      root: 'products#index'
    , resources: 'products'
    })

It always puzzles me that people look at some of the implementation details CoffeeScript shields programmers from and throw their hands up in the air and admit defeat [2] when we have a language as flexible as JavaScript at our disposal to hide some of the uglier implementation details in APIs we define.

[1] https://github.com/documentcloud/backbone/blob/master/backbo...

[2] http://news.ycombinator.com/item?id=2923694

>Their framework is intended solely for coffeescript devs

Would makes sense to say this on the front page of the project. Most Coffeescript projects do.

I'm not trying to be obnoxious or anything but doesn't this just show how much cleaner CoffeeScript is compared to js?

They wrote you a nice library and are giving it away under an MIT license. You don't get to pick the style they use to write the examples.

This is a response to something nobody's saying.

Obviously if they write it they get to choose pretty much everything about it. Nobody is disputing such a thing.

However, if one of the goals in releasing this is to be maximally useful, isn't the fact that raw Javascript is more readily understandable to more people a good thing to point out? Especially since it's highly likely that the team actually has the ability to do normal JS just as easily.

If they disagree with such a goal, though, they can feel free to do whatever they want.

Nobody who knows CoffeeScript needs to be informed that JavaScript is more mainstream.

Perhaps not, but that doesn't necessarily imply that the use of CoffeeScript-only examples was a calculated move to reach the audience they wanted instead of whatever came to mind first. It's worth at least reminding them that JS examples might be more useful to more people and letting them decide consciously whether they care.

They use coffeescript's class inheritance. Here's the JS that compiles down to:

http://jashkenas.github.com/coffee-script/#classes

If they showed JS examples it would instantly turn everyone off. Trust me, you do NOT want to use this with JS.

This will be maximally useful if you learn CoffeeScript.

I'd say it would be closer to the scientist giving the speech language in West Frisian to a group that's composed of 90% English speakers.

Or maybe more accurately a speech in modern English to a group of early modern English speakers.

In some cases (e.g. "class Box extends Batman.Object"), the corresponding JS would be much more verbose and less immediately grok-able.

I think CoffeeScript is mainstream enough at this point that CoffeeScript-based documentation is a fine thing. Especially since, as they say at the top of the page, Batman.js "is written in CoffeeScript and its API is developed with CoffeeScript in mind."

> In some cases (e.g. "class Box extends Batman.Object"), the corresponding JS would be much more verbose and less immediately grok-able.

True, but that just basically means that using JS with Batman.js is going to be a pain. In backbone.js you also extend their base classes, but you do it in a js-friendly way (var Widget = Backbone.Model.extend).

Not that there is anything wrong with a CS framework, but they should just say that it's a CS framework. The way CS compiles it's class inheritance to JS is not something I'd want to write raw.

For the record, the way that CoffeeScript does inheritance and the way that Backbone's "extend" does inheritance is almost literally exactly the same thing.

Both simply create an empty object to serve as the prototype (calling new without actually running your constructor), set up the prototype chain correctly, and stash a reference so that calling `super` is easier later on.

If "Child" and "Parent" are constructor functions (class objects), then the basic pattern is this:

    var ctor = function(){};
    ctor.prototype = Parent.prototype;
    Child.prototype = new ctor;
    Child.prototype.constructor = Child;

Fun.

This is the way JS devs have been hacking inheritance for a long time. That's irrelevant though, we're not comparing CS to Backbone, we're comparing Batman.js to Backbone.

Backbone handles the messy inheritance code for you. Batman.js relies on CS for that, but a JS dev is going to have to write the inheritance code by hand. I posted the JS equivalent of their example in this thread, it's nasty.

It is indeed nasty ... and for that extra nastiness, above and beyond the inheritance pattern listed above, you get:

* A subclass that inherits the parent's implementation of the constructor function, unless overridden.

* A named function for your class object, without IE scope leaks.

* A way to call super that's as easy as `super()`.

* Inheritance of the parent's own properties (unfortunately via copying).

* ... which enables helpful metaprogramming within class bodies. For example, Batman's own `event` decorator:

    use: @event (times) ->
      return false unless ...

It says it's for JavaScript, but I don't even know what language the code example is in. What is this?!

    # Create our application and namespace.
    class Alfred extends Batman.App
      @global yes
      @root 'todos#index'


    # Define the principle Todo model with `body` and `isDone` attributes, and tell it to persist itself using Local Storage.
    class Alfred.Todo extends Batman.Model
      @global yes # global exposes this class on the global object, so you can access `Todo` directly.

      @persist Batman.LocalStorage
      @encode 'body', 'isDone'

      body: ''
      isDone: false

CoffeeScript

Right, I just read the comments below. There's no mention of CoffeeScript anywhere.

CoffeeScript is not JavaScript. If it's a JavaScript framework, please give code examples in JavaScript.

CoffeeScript compiles to Javascript. Batman.js can most certainly be a Javascript framework and give examples in CoffeeScript. Many people prefer CoffeeScript for a variety of reasons, including readability.

Also, you aren't entitled to dictate instructions to other people who are giving you the benefit of their hard work. It's rude and obnoxious.

Your strawman argument that I'm dictating instructions is rude and obnoxious. Read my post again.

Mea culpa, and I'm truly sorry. I mistook your plea for a demand. Seppuku at dawn?

Maybe the guy you're replying to edited his post, but "If it's a JavaScript framework, please give code examples in JavaScript"--to me--reads as a rather polite request, rather than a dictum as you suggested.

But there are other problems with the comment.

There's no mention of CoffeeScript anywhere

It's in the 2nd paragraph of the docs. Not prominent, but somewhere.

CoffeeScript is not JavaScript

Technically true, I suppose, but they are beyond related.

If it's a JavaScript framework

Maybe it's a CoffeeScript framework? My sense is that at the very least, the use of CoffeeScript is an important aspect of the project.

Except for at the top of the example you pasted, and at the top of the documentation page, under "Introduction" in big letters, whe it says "batman.js is a framework for building rich single-page browser applications. It is written in CoffeeScript and its API is developed with CoffeeScript in mind, but of course you can use plain old JavaScript too."

Where were you looking?

Shouldn't it be named batman.coffee?

Haha! Yes! Good call.

The first version of Batman was written in plain Javascript, but Shopify has really been falling in love with CoffeeScript, so we decided to rewrite it before it was released.

Batman.coffee is more correct but sure doesn’t have the same ring to it…

Same problem as Spine."js", playing hide the salami. Most JS devs still think JS means ECMAScript. Call it what it is. Python packages compile to C but they don't call themselves names like "Django.C", that would be disingenuous and obnoxious

In fact, Python packages do not compile to C, so calling Django Django.C would expose a complete lack of understanding of Python. In fact, batman.js is closer to a Jinja template being named with a .html extension.

Sorry, my bad, but you can replace Python with some Scheme implementation or anything else that compiles to anything. The point was "compiles to" != "is".

Hey guys, happy to take any questions you have about the framework, either here or in IRC. We're on freenode in #batmanjs

PLEASE:

body{ color: #000000; }

Thankkk you!

Other than that, looks cool! Definitely will be trying it out in my projects and reporting back!

p { color:#222; } will do

Changed that, thanks.

This is going to sound very old-man of me, but I find myself automatically bumping up the font size of many websites nowadays, especially ones with a low-contrast font color. 8-|

Another modern site with anti-aliased, small, low-contrast text font. Seriously what happened to typography?

hey Nick,

Great to see it released! One thing I always find helpful is a comparison/discussion of where it fits with others in this realm.

congrats, Jack

I agree, especially how it compares to express.js which seems to currently dominate app design for node.

The templating layer looks eerily similar to Zope Page Templates / TAL (see http://chameleon.repoze.org/). Old-skool, baby! :-)

Anyway, it's like the love child of Backbone.js and jQuery Mobile, and perhaps more intuitive than both. I'll definitely play with it some tomorrow to see whether it holds up to its promise.

This seems like a horrible way to do things. I really don't want to throw a ton of loop logic (data-foreach?) and other data attributes in my HTML.

I think all of the JS MVC frameworks will be short lived. Someone (hopefully) will develop with a real soup to nuts solution that will make writing a front end heavy app simple. In Rails, I can see it being as easy as "act_as_front_end" somewhere, and the app automatically serves up your JSON to a generated frontend that mirrors your Rails app. I know that would be a hard thing to make, but this is where things should converge.

I suspect DC Comics and/or Warner Bros may be getting in touch soon.

Although we had a great talk about it at JSConf, I don't remember if Shopify is using it in production yet ... Which bits of Shopify is it currently powering?

A number of Shopify future products are being/have been built from the ground up using batman.js :)

Much like the description of the framework i think people are looking for a more specific answer to this question. I'm starting to think you are a super hero yourself. Captain Vague we'll call you.

I mostly try a framework to see what it can do. Looking at the documentation it seems like they are good enough to get me started.

Not sure what all these negative comments are doing here. Feels like half the people are asking for somebody to hold their penis and the other half is crying because they can't read Coffee-Script.

This looks fun. We (at BigDoor) have built some of these same pieces using Knockout (http://knockoutjs.com/) as a starting point. I'll be trying this out for comparison in some prototypes for sure.

I also use knockout.js for a project and batman.js looks like it has some similarities but it seems to be filling some holes that knockout.js leaves you to fill your self.

Which, I think, is not a huge deal with Knockout, just a difference. In our case we're using it for widgets included on other people's sites, so it's not a conventional web "application" with "pages" (I don't think we'd use the routing bits of batman.js at all, for instance).

http://xkcd.com/851/

What are your target supported browsers/versions?

We're targeting Chrome, Safari 4+, Firefox 3+, and IE 7+ for compatibility, although some of those require you to include es5shim.

More details in the readme here: http://github.com/Shopify/batman/blob/master/README.md

Awesome, now to think of a small project to try it out.

Reply on news.ycombinator.com