

Arg.js – Lightweight URL argument and parameter parser - matryer
http://github.com/stretchr/arg.js
Everything that existed for this was bloated or weird.  Arg.js is our attempt at keeping it simple and solving the problem in an elegant way.
======
OhHeyItsE
ugh. I know that popular convention is pulling so, so hard in this direction.
But, am I the only one around here who thinks that mashing query strings and
document fragments into the same namespace is a Bad Idea?

~~~
matryer
I agree actually - I prefer to keep them separate, which is why we included
the hash() and query() methods too. I'd say pick one and stick with it. Arg.js
has to care about both, because people use both.

------
NathanKP
The library looks very nicely done, however, personally I think it is better
to avoid such query string parameter formats completely. So to use an example
from the Github page:

    
    
         http://www.stretchr.com/?name=Mat&company=Stretchr#?comment=123
    

should become

    
    
         http://www.stretchr.com/companies/Stretchr/users/Mat/comments/123
    

The URL now looks much nicer and more readable, and it also leads to organized
hierarchy because of predictable URL patterns. So maybe the user wants to see
the list of all users in the Stretchr company. So just from the URL they can
determine that a good way to do that is probably by removing the end of the
URL so that it is:

    
    
         http://www.stretchr.com/companies/Stretchr/users
    

Anyway, that's just my personal preference, but I think that query string
style URL's should be avoided unless absolutely necessary and nicer REST style
URL's should be used instead.

If you have a one page app you can route all requests on the domain to one
page, and then use Backbone logic to look at the REST style URL and show the
correct view based on the URL.

~~~
paultannenbaum
I agree if everything in your app follows a perfectly restful pattern, but
what about if you want to capture application state that does not belong in a
database. For example, what if you have an online store that has many
different filters to narrow down selections. And you want to share this url
with someone.

How would this be done using a RESTful url path? You have to use url params.
If so, this seems to be a nice solution if your using a lot of params.

~~~
NathanKP
Here is how I would do it:

Assuming you were searching for computers with the following filters:

    
    
        Manufacturer: Apple
        Type: Laptop
    

You could represent that as:

    
    
         http://mystore.com/electronics/computers/manufacturer/apple/type/laptop
    

If you make your routing code (on either the frontend or the backend) robust
enough then you will be able to support any number of filters in any order.

~~~
matryer
for nested data - I 100% agree. I'd do that and use params for things like
ordering or filtering on other fields:

    
    
        http://mystore.com/electronics/computers/manufacturer/apple/type/laptop#?order=-price&size=medium
    

Also - the `#` is nice for when you don't want to reload the page.

------
tmzt
I would suggest adding a bower and composer package file, it's so nice to pull
in a library like and just start using it without the additional tooling.

~~~
matryer
Ohh that sounds good... I've never done it before - fancy giving me a pull
request? :)

~~~
tmzt
I can for composer in a few hours

------
mazondo
been using this for a few days now. Simple to use and solves a common
frustration, I've added it to my standard base app install.

Edit: base, not bass...silly me.

~~~
stekoz
Any idea of how this compares to purl.js ?
[https://github.com/allmarkedup/purl](https://github.com/allmarkedup/purl)

~~~
matryer
We just thought it did too much for what we needed. It's a great library, and
if I were parsing URLs in my apps I'd use it. But we just wanted a single
get() interface and support for complex objects in the URL.

Arg.js turns an object like this:

    
    
        {
          tags: ["one", "two", "three"],
          deep: {
            nested: {
              objects: true
            }
          }
        }
    

into this:

    
    
        #?tags[0]=one&tags[1]=two&tags[2]=three&deep.nested.objects=true

~~~
matryer
... and vice-versa

