7 ms·

Announcing the first release of batman.js

123 points by nciagra 15y ago

nciagra 15y ago
Hey guys, happy to take any questions you have about the framework, either here or in IRC. We're on freenode in #batmanjs
jackdempsey 15y ago
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
- pspeter3 15y ago
  I agree, especially how it compares to express.js which seems to currently dominate app design for node.
paulocal 15y ago
PLEASE: body{ color: #000000; } Thankkk you! Other than that, looks cool! Definitely will be trying it out in my projects and reporting back!
- nicklovescode 15y ago
  p { color:#222; } will do
  - ktusznio 15y ago
    Changed that, thanks.
- mikeleeorg 15y ago
  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-|
- Torn 15y ago
  Another modern site with anti-aliased, small, low-contrast text font. Seriously what happened to typography?
timothya 15y ago
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).
- nciagra 15y ago
  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!
- goodside 15y ago
  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."
  - mcantelon 15y ago
    >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.
    - deleted 15y ago
      [deleted]
    - MatthewPhillips 15y ago
      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);
bprater 15y ago
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!
- antrix 15y ago
  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!
  - bprater 15y ago
    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.
  - deleted 15y ago
    [deleted]
  - gurkendoktor 15y ago
    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.
- nciagra 15y ago
stdbrouw 15y ago
The templating layer looks eerily similar to Zope Page Templates / TAL (see http://chameleon.repoze.org/ 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.
smoody 15y ago
What are your target supported browsers/versions?
- ktusznio 15y ago
  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 http://github.com/Shopify/batman/blob/master/README.md
akavlie 15y ago
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."
- AltIvan 15y ago
  Well, somehow this doesn't sound wierd for most people: - What are you using to create all those designs? - An apple;
chrisbroadfoot 15y ago
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
- frisco 15y ago
  CoffeeScript
  - chrisbroadfoot 15y ago
    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.
    - sunchild 15y ago
      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.
      - chrisbroadfoot 15y ago
        Your strawman argument that I'm dictating instructions is rude and obnoxious. Read my post again.
        sunchild 15y ago
        Mea culpa, and I'm truly sorry. I mistook your plea for a demand. Seppuku at dawn?
jashkenas 15y ago
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?
- nciagra 15y ago
  A number of Shopify future products are being/have been built from the ground up using batman.js :)
  - transition 15y ago
    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.
    - Pickels 15y ago
      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.
dholowiski 15y ago
http://xkcd.com/851/ http://xkcd.com/851/
exogen 15y ago
This looks fun. We (at BigDoor) have built some of these same pieces using Knockout (http://knockoutjs.com/ http://knockoutjs.com/) as a starting point. I'll be trying this out for comparison in some prototypes for sure.
- Pickels 15y ago
  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.
  - exogen 15y ago
    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).
kpozin 15y ago
I suspect DC Comics and/or Warner Bros may be getting in touch soon.
dmboyd 15y ago
Awesome, now to think of a small project to try it out.
southpolesteve 15y ago
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.

123 points by nciagra 15y ago

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

jackdempsey 15y ago

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

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

paulocal 15y ago

PLEASE: body{ color: #000000; } Thankkk you! Other than that, looks cool! Definitely will be trying it out in my projects and reporting back!

nicklovescode 15y ago
p { color:#222; } will do
- ktusznio 15y ago
  Changed that, thanks.
mikeleeorg 15y ago
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-|
Torn 15y ago
Another modern site with anti-aliased, small, low-contrast text font. Seriously what happened to typography?

timothya 15y ago

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).

nciagra 15y ago
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!
goodside 15y ago
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."
- mcantelon 15y ago
  >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.
  - deleted 15y ago
    [deleted]
  - MatthewPhillips 15y ago
    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);

bprater 15y ago

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!

antrix 15y ago
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!
- bprater 15y ago
  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.
- deleted 15y ago
  [deleted]
- gurkendoktor 15y ago
  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.
nciagra 15y ago

stdbrouw 15y ago

The templating layer looks eerily similar to Zope Page Templates / TAL (see http://chameleon.repoze.org/ 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.

smoody 15y ago

What are your target supported browsers/versions?

ktusznio 15y ago
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 http://github.com/Shopify/batman/blob/master/README.md

akavlie 15y ago

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."

AltIvan 15y ago
Well, somehow this doesn't sound wierd for most people: - What are you using to create all those designs? - An apple;

chrisbroadfoot 15y ago

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

frisco 15y ago
CoffeeScript
- chrisbroadfoot 15y ago
  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.
  - sunchild 15y ago
    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.
    - chrisbroadfoot 15y ago
      Your strawman argument that I'm dictating instructions is rude and obnoxious. Read my post again.
      - sunchild 15y ago
        Mea culpa, and I'm truly sorry. I mistook your plea for a demand. Seppuku at dawn?

jashkenas 15y ago

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?

nciagra 15y ago
A number of Shopify future products are being/have been built from the ground up using batman.js :)
- transition 15y ago
  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.
  - Pickels 15y ago
    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.

dholowiski 15y ago

http://xkcd.com/851/ http://xkcd.com/851/

exogen 15y ago

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

Pickels 15y ago
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.
- exogen 15y ago
  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).

kpozin 15y ago

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

dmboyd 15y ago

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

southpolesteve 15y ago

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.