WingNews logo WingNews GitHub [2]
top | item 5234058

Ask HN: What is the coolest JS library out there?

95 points| rohanpai | 13 years ago

Pretty open ended question. Just trying to see what cool stuff is out there to play around with.

92 comments

order
[+] simonsarris|13 years ago|reply
(disclosure: shameless plug)

I make GoJS, a HTML canvas-based diagramming library with all sorts of useful features. Node and link concepts (with data binding, templating), layouts, an undo manager, lots of customizable tools, drag and drop/cut and paste.

In other words, a very rich set of diagramming features atop HTML5 canvas.

I think its cool, because it took two years of canvas tomfoolery to get working well, and I think its much faster than similar diagramming libraries for canvas out right now. A lot of technically interesting stuff was encountered while making it, but I haven't had the time to write about my collected intricacies yet.

http://gojs.net/beta/

Or straight to samples:

http://gojs.net/beta/samples/flowchart.html

Firefox warning[1] for that specific sample though. I need to change the default sample this week.

[1] Super frustrating! The new IonMonkey JavaScript engine crashes under very certain conditions that are met during my link avoidsNodes algorithm. This means that Firefox 18 and 19 (but not 17 and 20) will crash on the Flowchart sample, because the link routing is set to use avoidsNodes. It's unfortunate but even though they're aware of the bug they aren't going to bother fixing it for FF19.

https://bugzilla.mozilla.org/show_bug.cgi?id=830063

~~~

By the way, if there are other canvas library authors out there who have had interesting (or downright weird) issues with various canvas implementations, I'd love to hear from you!

[+] ineedtosleep|13 years ago|reply
Wow. Very very nice job there. I had project a while back and couldn't find too many options when it came to Javascript diagramming and had to settle with jsPlumb. I wish this was around at the time [edit] or at least more visible from my quick searching.
[+] ux-app|13 years ago|reply
Amazing work! I was impressed to see that it is perfectly usable on an iPad
[+] kyriakos|13 years ago|reply
Nice work. Don't have a use for it right now but I'll keep an eye on it.
[+] daleharvey|13 years ago|reply
Seems like a reasonable time to self promote

http://pouchdb.com/

PouchDB is a full reimplementation of CouchDB inside the browser (using browser storage), you can build applications that work offline then sync your data with 'the cloud'

[+] jedahan|13 years ago|reply
Amazing, glad you plugged it here. Gonna test it for a project in the galleries here at the Met Museum, as our wifi is a bit flaky at times :)
[+] jheimark|13 years ago|reply
whoa, this is interesting. makes one think it's now the time to write a middleware syncing library.
[+] tomasien|13 years ago|reply
I know this is a crap answer to this question, but for me what is "cool" is what can easily do things that I think are awesome. For me, that's Angular.js.

http://angularjs.org/ Angular UI is amazing http://angular-ui.github.com/ And Angular for Bootstrap is also amazing http://angular-ui.github.com/bootstrap/

I'm not a great programmer, so that's what excites me. It's flexible enough that as you get better as a programmer, you can plug that right in.

And that's what I think is cool.

[+] shtylman|13 years ago|reply
http://browserify.org/ because it will fundamentally change how you approach writing and organizing front end code. The moment you stop writing boilerplate code to glue your disparate files together and start using a simple module system you will never look back. This is more than a library, it is a way of re-thinking how you can maintain js libraries going forward.
[+] olegp|13 years ago|reply
I found that browserify tried to do too much by emulating Node within the browser so wrote JoinJS which just implements CommonJS modules without trying to parse the JS files: https://github.com/olegp/joinjs
[+] beefsack|13 years ago|reply
I'd have to say Q promises (https://github.com/kriskowal/q, adds promises to JS for much cleaner async code).

Even though it's not "cool" in the sense that it's very low level and doesn't do fancy UI stuff, my asynchronous code has become significantly cleaner and easier to maintain through using promises rather than having callback pyramids. The ability to wait for a number of promises to resolve before firing the next makes life so much easier too.

[+] Sephr|13 years ago|reply
Another library that tries to make async code much cleaner is async.js (https://github.com/eligrey/async.js#readme). It uses yield and generators to abstract away the callback jungle.

For example, you can easily condense tens of lines of event code into a single `event = yield document.next("click")`

[+] straws|13 years ago|reply
I'm really in love with Component, which is a sort of package manager for front end development

http://component.jit.su/

It breaks down large frameworks like jQuery, Underscore, Backbone, Twitter Bootstrap, etc into small, reusable, and composable micro libraries. There are UI elements like tool tips and modals, wonderful and tiny DOM manipulation tools, well documented AJAX libraries, and more low-level functional and control-flow related tools. It's really amazing.

It's by TJ Holowaychuk too, who is huge in the node community (Express, Jade, Mocha, Stylus, Connect, and many others).

[+] agency|13 years ago|reply
d3.js (http://d3js.org/) is the king of visualization libraries
[+] nthitz|13 years ago|reply
I love d3. I'll be using it and just amaze myself at how easy it is to do things with it sometimes.
[+] alphakappa|13 years ago|reply
d3 is an amazing library, both for the beauty of the framework API itself, and for how it can be used not just for SVG manipulation, but for general DOM manipulation itself. The power of d3.js is just beautiful.
[+] hayksaakian|13 years ago|reply
The one that makes everyone's lives easier:

jQuery.

Its not sexy, but it gets the job done for pretty much everyone.

[+] gbog|13 years ago|reply
I did prefer prototype.js in the time of ol'. Never understood why jQuery took over it, sadly.
[+] sandis|13 years ago|reply
I'd say jQuery is pretty sexy for what it does. That's one of the main (if not the main) reasons it took off.
[+] illyism|13 years ago|reply
I always preferred to use MooTools http://MooTools net because it felt lighter than jQuery and the code you write is often less-hacky and sexier.
[+] byoung2|13 years ago|reply
Async: https://github.com/caolan/async - it helps avoid callback hell. I use it in node.js.
[+] jamespitts|13 years ago|reply
Can't agree with you more. Caolan Async is super-useful in the client as well, particularly "until" (for waiting until a condition is met).
[+] dccoolgai|13 years ago|reply
Agreed..I am starting to feel that you can't even do node right w/o it.
[+] davisr|13 years ago|reply
I'm a huge fan of Enyo (http://enyojs.com). It's stupid-easy to get a native-feeling app running that works across (nearly) every modern device. Mostly, I love its UI components (which are expanded by the associated Onyx library), which means I have less lines of code to write -- which is always better.
[+] logn|13 years ago|reply
add TideSDK and PhoneGap for the native-feeling trifecta
[+] chjj|13 years ago|reply
This is going to be the most shameless plug I've ever done in my life, but I actually believe my css selector engine ( https://github.com/chjj/zest ) beats every other one into the ground in terms of speed, features, and extensibility. I've probably just been waiting for an opportunity to shout it from the rooftops. Unfortunately, it's kind of hard for a selector engine to gain momentum since people don't really use them standalone unless they're writing a dom library.

It's not the coolest, but I think it's the coolest selector engine. I'm also totally biased.

[+] danso|13 years ago|reply
underscore.js has so many useful helper functions while being lightweight and unobtrusive:

http://underscorejs.org/

[+] re_todd|13 years ago|reply
I discovered underscore.js recently, I really like it as well. After learning a little functional programming, it is cool to see things like map, contains, select, etc. brought into JavaScript in an easy-to-use way.
[+] kodablah|13 years ago|reply
TypeScript. Fastest JS parser I've seen (at least in JS compared to coffeescript, esprima, narcissus, etc), bootstrapped in its own language, great type checker/inferencer, easy to follow codebase.
[+] RoboTeddy|13 years ago|reply
Bacon.js: https://github.com/raimohanska/bacon.js -- functional reactive programming in javascript. It's another way out of callback hell when doing UI work.
[+] michaelsbradley|13 years ago|reply
Checkout Flapjax as well:

http://www.flapjax-lang.org/

https://github.com/brownplt/flapjax/

http://cs.brown.edu/~sk/Publications/Papers/Published/mgbcgb...

Amazingly, work on Flapjax dates all the way back to 2006! Let that sink in ... the point is that it was way ahead of its time, and with all due respect to bacon.js, I think Flapjax is still in in a league of its own with respect to how it's implemented.

I studied the internals for months back in 2010, and that learning experience was a huge catalyst in pushing me toward functional programming, Clojure and ClojureScript.

The reason Flapjax never quite caught on was in part, I think, that it was so ahead of its time. And also that its internals, while well engineered, are much harder to understand than those of jQuery and other popular libraries. It's harder to use something truly effectively if you can't quite wrap your head around how it works, and understanding Flapjax certainly takes dedication.

[+] rajrao|13 years ago|reply
My vote is for TypeScript (http://www.typescriptlang.org/). It fixes some of the problems that I encountered while creating an enterprise class application and not being able to strongly type parameters, classes, etc (which meant that I had to open up every JS file to figure out what parameters a function truly required).
[+] jpatte|13 years ago|reply
Knockout (http://knockoutjs.com/) definitely rocked my world. Forget about manipulating the DOM with code (using jQuery or anything): now you have a nice separation between your UI (defined declaratively) and your business logic. Just change some observable values and voila, your UI is updated. I strongly recommend trying the site's tutorial: http://learn.knockoutjs.com

Also if you like Backbone.js, don't miss Knockback.js (http://kmalakoff.github.com/knockback/). Now you have observable (view)models and collections. Definitely cool.