12 ms·

Array.js: A better array for the browser and Node.js

82 points by matthewmueller 14y ago

shtylman 14y ago
I think having events and query is overkill and is no longer an array. You are essentially making a database at this point but trying to pass it off as a basic array to replace the lightweight builtin Array. I would even shy away from calling it array since it really does very opinionated things.
callmevlad 14y ago
I'm currently using both Knockout observable arrays [1] and Underscore array helpers [2] in a project, and the Array.js library looks like it mashes both of these concepts together quite nicely. [1] http://knockoutjs.com/documentation/observableArrays.html http://knockoutjs.com/documentation/observableArrays.html [2] http://underscorejs.org/#arrays http://underscorejs.org/#arrays
dtjohnnymonkey 14y ago
This is also similar to the Backbone.js Collections type which inherits functional-programming methods from Underscore. The main difference seems to be that Backbone expects objects as members of the collection.
twp 14y ago
For reference: https://developers.google.com/maps/documentation/javascript/reference#MVCArray https://developers.google.com/maps/documentation/javascript/... Pretty much the same functionality, done three years ago.
- leepowers 14y ago
  Interesting. Though I wouldn't want to include the entire Google Maps API just to get a nice array helper class.
bprater 14y ago
Is that a Schwartzian transform hiding in the sample code?
javajosh 14y ago
There's no doubt this is a nice little library. There's also no doubt that I won't use it. Why? Because all the neat stuff in this library is available with Underscore, and Underscore works with plain vanilla arrays. It might be possible for a library like this to really catch on so much that a) other people use it, and b) even when they don't you get so much power you don't mind typing array(someOtherRealArray) all the time. JodaTime is like that. But the thing that JodaTime has that Array.js doesn't is an enemy. JodaTime hates the built in Date, Calendar, etc classes in the JDK. It hates them and replaces them with extreme prejudice, and anyone forced to work with those APIs does not weep. Array.js does not have an enemy, it has a friend it wants to help be a little better. It's a nice library, a helpful library. And that's why it will soon be forgotten, I'm afraid.
- jweir 14y ago
  I do like how the `select` can take a string, "x > 30", vs a function(x){ return x > 30} It would be be nice if Underscore had a bit more sugar like that. But, I also know how problematic it can be to properly parse or evaluate a string into code. --edit-- it is using the to-function library to do this: https://github.com/component/to-function https://github.com/component/to-function
  - jarin 14y ago
    Passing it in as a string just feels dirty to me for some reason.
    - aurelianito 14y ago
      It feels dirty to me too, because of the possible "filter injections", similar to the SQL-injection flaws.
      - emn13 14y ago
        It's also likely to be inherently hard to optimize; aka slow and will stay slow. I thinks it's a generally bad idea. It also undermines what limited tooling there is for JS; and it exposes Yet Another set of semantics - what exactly does that query do, how is it translated, what are the corner cases etc. Very Bad idea. (And for what - avoiding a few characters that are so common as to be trivially skimmable and very gzippable?)
james33 14y ago
I was just thinking yesterday that something like this would make my life so much easier. You read my mind!
leepowers 14y ago
My first thought was "overriding the default Array object is dumb". But it turns out Array.js doesn't overwrite JavaScript's built-in Array objects. Instead it's an array-esque Object: var arr = array([1, 2, 3, 4]); // An Array.js "array" var arr2 = []; // A real JavaScript array It's definitely too heavy for most array use cases. Sometimes all you need is a simple list.
dribnet 14y ago
Having worked on a similar project for clojurescript (1), I've found that the main challenge to using this "array spoofing" technique widely is interop with other libraries. For example, angular.js internally has inconsistent ways of validating an object is an array, sometimes bottoming out in Object.toString and other times instanceof Array. Many libraries behave similarly, and so array.js objects will not behave as expected if handed off. On the other hand, interop with D3.js has been ideal as it generally assumes that any non function parameter is an array, so there I"ve had more success and would expect array.js to similarly work well. (1) https://github.com/dribnet/strokes https://github.com/dribnet/strokes
eranation 14y ago
This is really nice, and useful, I would love to see more like this, but wonder if there isn't some room to join forces between the best JS libraries out there and try to create a common utility belt compilation (e.g. work to avoid conflicts, and namespace collisions, joint testing, shared convention and merge efforts on similar things) e.g. I would love to have the JavaScript equivalent of Apache commons / Guava (previously Google collections). I mean, if there is one thing I do like about Java (when I can't use Scala for some reason), is those utility belt libraries (and JodaTime of course). Whenever I hit a wall trying to do something in plain old Java, Guava / Apache Commons seems to read my mind and have a data structure, or a utility to the rescue. Do you think it's a good thing to strive for? Do you see it happening?
- jongleberry 14y ago
  if you look at the code, it's based on TJ Holowaychuk's component: https://github.com/component/component https://github.com/component/component. there's i believe 600 "utilities" you can pick and choose from: https://github.com/component/component/wiki/Components https://github.com/component/component/wiki/Components. since it's CommonJS, you won't have any namespace collisions or conflicts. i don't know how this relates to Apache commons, JodaTime, or Guava however, but i just wanted to add a little context.
phpnode 14y ago
looks nice, but why doesn't it just extend the core array type? (I mean with a "class", not by adding things to Array.prototype). That way things like Array.isArray() still work. Am I missing something?
goatslacker 14y ago
It's a nice little library but it looks like the meat of it is in Enumerable which is pretty nice but it's really slow when working with larger arrays. If you don't need the events then lo_dash/underscore is probably the better tool.
- camus 14y ago
  ... and you dont want something fired everytime you map().filter().reject().map().filter().some()... which might lead to nothing but bad performances ,especially on huge collections.
craigyk 14y ago
I look at this and think, again, that JS really needs a way to override attribute and indexing operations, like Python's __getitem__ and __getattr__. There's not many things I miss after switching to CoffeeScript from Python, but this is one of them.
- craigyk 14y ago
  Also, I really dislike the custom string parsing implied by things like: .select('age > 20'). This is a place where CoffeeScript or LiveScript really shine. In LiveScript it would look like: users.select (.age > 20)
- pcwalton 14y ago
  This is coming in ES6, with Proxies.
kristopolous 14y ago
I've been working on something that does something like this for 2 years ... it's a busy field: https://github.com/kristopolous/db.js https://github.com/kristopolous/db.js lines like this: DB() .insert(what) .find( DB(".contentDetails.regionRestriction.blocked.indexOf('US') > -1") ) .select('id') .each(Timeline.remove);
TeeWEE 14y ago
Why do they use strings as function using to-function (https://github.com/component/to-function https://github.com/component/to-function). Like .select("age>10").map("adress.streetname"); While to-function is cool and your code is shorter and more readable. You must be aware that you miss - static code analysis such as synax checking - compile time optimizations (because the AST is missing) - static code analysis tools - code coverage checking tools I would recommend using real functions, or using clojurescript or coffeescript in order to get shorter code.
medikoo 14y ago
I think there are more use cases for similar tool but based on Set instead of an Array. Otherwise worth noting
lttlrck 14y ago
Better? If its using object properties then beware there is a very significant performance hit looping over object properties vs looping through a native array. Array looping is 5x faster in V8 trunk with a simple 10 element benchmark.

I think having events and query is overkill and is no longer an array. You are essentially making a database at this point but trying to pass it off as a basic array to replace the lightweight builtin Array. I would even shy away from calling it array since it really does very opinionated things.

callmevlad 14y ago

I'm currently using both Knockout observable arrays [1] and Underscore array helpers [2] in a project, and the Array.js library looks like it mashes both of these concepts together quite nicely. [1] http://knockoutjs.com/documentation/observableArrays.html http://knockoutjs.com/documentation/observableArrays.html [2] http://underscorejs.org/#arrays http://underscorejs.org/#arrays

dtjohnnymonkey 14y ago

This is also similar to the Backbone.js Collections type which inherits functional-programming methods from Underscore. The main difference seems to be that Backbone expects objects as members of the collection.

twp 14y ago

For reference: https://developers.google.com/maps/documentation/javascript/reference#MVCArray https://developers.google.com/maps/documentation/javascript/... Pretty much the same functionality, done three years ago.

leepowers 14y ago
Interesting. Though I wouldn't want to include the entire Google Maps API just to get a nice array helper class.

bprater 14y ago

Is that a Schwartzian transform hiding in the sample code?

javajosh 14y ago

There's no doubt this is a nice little library. There's also no doubt that I won't use it. Why? Because all the neat stuff in this library is available with Underscore, and Underscore works with plain vanilla arrays. It might be possible for a library like this to really catch on so much that a) other people use it, and b) even when they don't you get so much power you don't mind typing array(someOtherRealArray) all the time. JodaTime is like that. But the thing that JodaTime has that Array.js doesn't is an enemy. JodaTime hates the built in Date, Calendar, etc classes in the JDK. It hates them and replaces them with extreme prejudice, and anyone forced to work with those APIs does not weep. Array.js does not have an enemy, it has a friend it wants to help be a little better. It's a nice library, a helpful library. And that's why it will soon be forgotten, I'm afraid.

jweir 14y ago
I do like how the `select` can take a string, "x > 30", vs a function(x){ return x > 30} It would be be nice if Underscore had a bit more sugar like that. But, I also know how problematic it can be to properly parse or evaluate a string into code. --edit-- it is using the to-function library to do this: https://github.com/component/to-function https://github.com/component/to-function
- jarin 14y ago
  Passing it in as a string just feels dirty to me for some reason.
  - aurelianito 14y ago
    It feels dirty to me too, because of the possible "filter injections", similar to the SQL-injection flaws.
    - emn13 14y ago
      It's also likely to be inherently hard to optimize; aka slow and will stay slow. I thinks it's a generally bad idea. It also undermines what limited tooling there is for JS; and it exposes Yet Another set of semantics - what exactly does that query do, how is it translated, what are the corner cases etc. Very Bad idea. (And for what - avoiding a few characters that are so common as to be trivially skimmable and very gzippable?)

james33 14y ago

I was just thinking yesterday that something like this would make my life so much easier. You read my mind!

leepowers 14y ago

My first thought was "overriding the default Array object is dumb". But it turns out Array.js doesn't overwrite JavaScript's built-in Array objects. Instead it's an array-esque Object: var arr = array([1, 2, 3, 4]); // An Array.js "array" var arr2 = []; // A real JavaScript array It's definitely too heavy for most array use cases. Sometimes all you need is a simple list.

dribnet 14y ago

Having worked on a similar project for clojurescript (1), I've found that the main challenge to using this "array spoofing" technique widely is interop with other libraries. For example, angular.js internally has inconsistent ways of validating an object is an array, sometimes bottoming out in Object.toString and other times instanceof Array. Many libraries behave similarly, and so array.js objects will not behave as expected if handed off. On the other hand, interop with D3.js has been ideal as it generally assumes that any non function parameter is an array, so there I"ve had more success and would expect array.js to similarly work well. (1) https://github.com/dribnet/strokes https://github.com/dribnet/strokes

eranation 14y ago

This is really nice, and useful, I would love to see more like this, but wonder if there isn't some room to join forces between the best JS libraries out there and try to create a common utility belt compilation (e.g. work to avoid conflicts, and namespace collisions, joint testing, shared convention and merge efforts on similar things) e.g. I would love to have the JavaScript equivalent of Apache commons / Guava (previously Google collections). I mean, if there is one thing I do like about Java (when I can't use Scala for some reason), is those utility belt libraries (and JodaTime of course). Whenever I hit a wall trying to do something in plain old Java, Guava / Apache Commons seems to read my mind and have a data structure, or a utility to the rescue. Do you think it's a good thing to strive for? Do you see it happening?

jongleberry 14y ago
if you look at the code, it's based on TJ Holowaychuk's component: https://github.com/component/component https://github.com/component/component. there's i believe 600 "utilities" you can pick and choose from: https://github.com/component/component/wiki/Components https://github.com/component/component/wiki/Components. since it's CommonJS, you won't have any namespace collisions or conflicts. i don't know how this relates to Apache commons, JodaTime, or Guava however, but i just wanted to add a little context.

phpnode 14y ago

looks nice, but why doesn't it just extend the core array type? (I mean with a "class", not by adding things to Array.prototype). That way things like Array.isArray() still work. Am I missing something?

goatslacker 14y ago

It's a nice little library but it looks like the meat of it is in Enumerable which is pretty nice but it's really slow when working with larger arrays. If you don't need the events then lo_dash/underscore is probably the better tool.

camus 14y ago
... and you dont want something fired everytime you map().filter().reject().map().filter().some()... which might lead to nothing but bad performances ,especially on huge collections.

craigyk 14y ago

I look at this and think, again, that JS really needs a way to override attribute and indexing operations, like Python's __getitem__ and __getattr__. There's not many things I miss after switching to CoffeeScript from Python, but this is one of them.

craigyk 14y ago
Also, I really dislike the custom string parsing implied by things like: .select('age > 20'). This is a place where CoffeeScript or LiveScript really shine. In LiveScript it would look like: users.select (.age > 20)
pcwalton 14y ago
This is coming in ES6, with Proxies.

kristopolous 14y ago

I've been working on something that does something like this for 2 years ... it's a busy field: https://github.com/kristopolous/db.js https://github.com/kristopolous/db.js lines like this: DB() .insert(what) .find( DB(".contentDetails.regionRestriction.blocked.indexOf('US') > -1") ) .select('id') .each(Timeline.remove);

TeeWEE 14y ago

Why do they use strings as function using to-function (https://github.com/component/to-function https://github.com/component/to-function). Like .select("age>10").map("adress.streetname"); While to-function is cool and your code is shorter and more readable. You must be aware that you miss - static code analysis such as synax checking - compile time optimizations (because the AST is missing) - static code analysis tools - code coverage checking tools I would recommend using real functions, or using clojurescript or coffeescript in order to get shorter code.

medikoo 14y ago

I think there are more use cases for similar tool but based on Set instead of an Array. Otherwise worth noting

lttlrck 14y ago

Better? If its using object properties then beware there is a very significant performance hit looping over object properties vs looping through a native array. Array looping is 5x faster in V8 trunk with a simple 10 element benchmark.