TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

PourOver: A library for simple, fast filtering and sorting in the browser

224 pointsby jsvineabout 11 years ago

22 comments

dansoabout 11 years ago
So I visited one of the PourOver examples, this Academy Awards fashion feature published earlier this year:<p><a href="http://www.nytimes.com/interactive/2014/02/02/fashion/red-carpet-project.html" rel="nofollow">http:&#x2F;&#x2F;www.nytimes.com&#x2F;interactive&#x2F;2014&#x2F;02&#x2F;02&#x2F;fashion&#x2F;red-ca...</a><p>I opened the dev tools to inspect the traffic and code, and this pops up in the console:<p><pre><code> 0000000 000 0000000 111111111 11111111100 000 111111111 00000 111111111111111111 00000 000000 000 1111111111111111111111111100000 000 000 1111 1111111111111111100 000 000 11 0 1111111100 000 000 1 00 1 000 000 00 00 1 000 000 000 00000 1 000 00000 0000 00000000 1 00000 11111 000 00 000000 000 11111 00000 0000 000000 00000 00000 000 10000 000000 000 0000 000 00000 000000 1 000 000 000000 10000 1 0 000 000 1000000 00 1 00 000 000 1111111 1 0000 000 000 1111111100 000000 000 0000 111111111111111110000000 0000 111111111 111111111111100000 111111111 0000000 00000000 0000000 NYTimes.com: All the code that&#x27;s fit to printf() We&#x27;re hiring: http:&#x2F;&#x2F;nytimes.com&#x2F;careers </code></pre> ....You sneaky audience-targeting bastards
评论 #7604760 未加载
评论 #7607941 未加载
评论 #7604323 未加载
simonsarrisabout 11 years ago
Half the comments so far are looking for a non-code demo, and I imagine they mean something visual, so here&#x27;s a bare-bones visualized version of the Basic PourOver sample code:<p><a href="http://gojs.net/temp/pourover.html" rel="nofollow">http:&#x2F;&#x2F;gojs.net&#x2F;temp&#x2F;pourover.html</a><p>It just takes the queries and uses the resulting data to make some nodes in GoJS (Disclaimer: a Diagramming library I develop. Not free, but easy to set up with this kind of data and see stuff fast).<p>If I had more time I&#x27;d make it prettier. The results are just visual representations of the data results getting filtered. Its very easy to take PourOver&#x27;s example collections and data-bind some stuff to them (color of the nodes is data-bound to monster gender, etc). I&#x27;m sure it can&#x27;t be hard to do the same in other data-bound visualization libraries.<p>This is very cool. I&#x27;ll try to make a much prettier example tonight.
评论 #7604605 未加载
esmooovabout 11 years ago
Hi, all.<p>A lot of folks are asking for a demo and, you&#x27;re right. I should have included one. My apologies. I&#x27;ll get to working on one as soon as I can.<p>In the meantime, I encourage readers to check out the source for <a href="http://www.nytimes.com/interactive/2014/02/02/fashion/red-carpet-project.html" rel="nofollow">http:&#x2F;&#x2F;www.nytimes.com&#x2F;interactive&#x2F;2014&#x2F;02&#x2F;02&#x2F;fashion&#x2F;red-ca...</a> That&#x27;s probably the clearest &quot;demo&quot; of PourOver at the moment.<p>More to come!
评论 #7606312 未加载
dmixabout 11 years ago
This page needs a giant &quot;demo&quot; button near the top. The examples are all code.
paulcnicholsabout 11 years ago
Reminds me of crossfilter (<a href="http://square.github.io/crossfilter/" rel="nofollow">http:&#x2F;&#x2F;square.github.io&#x2F;crossfilter&#x2F;</a>) by square. It has a killer demo, however.
评论 #7604616 未加载
kylebrownabout 11 years ago
Noice! Btw, the docs page is acting funky on an iPad (iOS 7.1). The layout seems to be alternating between mobile and desktop with each pan&#x2F;scroll event. [ps: only happens in landscape orientation. portrait is unaffected]
JangoSteveabout 11 years ago
It seems similar to our Dynatable plugin [1], which is basically the functionality of this plugin with some additional table-read&#x2F;write functions included. The main difference being that this library depends on underscore, while Dynatable depends on jQuery (which is mainly used for its browser compatibility functions).<p>Given both library&#x27;s emphasis on speed, it looks like I have something to benchmark against!<p>[1] <a href="http://www.dynatable.com" rel="nofollow">http:&#x2F;&#x2F;www.dynatable.com</a>
评论 #7604646 未加载
nathanhammondabout 11 years ago
I much prefer a basic construct that makes it simple to do filtering and sorting that can be simply extended to any complexity. Sorting and filtering are really nothing more than set manipulation (which they state themselves) so with simple data binding this becomes a trivial exercise to build an impressive client-side search.<p>In Ember that might look like this:<p><pre><code> Ember.ArrayController.extend({ filterA: Ember.computed.filter(&#x27;fieldName1&#x27;, function comparator() {}), filterB: Ember.computed.filter(&#x27;fieldName2&#x27;, function comparator() {}), joined: Ember.computed.union(&#x27;filterA&#x27;, &#x27;filterB&#x27;), filtered: Ember.computed.uniq(&#x27;joined&#x27;), sorted: Ember.computed.sort(function comparator() {}) });</code></pre>
评论 #7604599 未加载
barkingcatabout 11 years ago
More details at <a href="http://open.blogs.nytimes.com/2014/04/16/introducing-pourover-and-tamper" rel="nofollow">http:&#x2F;&#x2F;open.blogs.nytimes.com&#x2F;2014&#x2F;04&#x2F;16&#x2F;introducing-pourove...</a><p>There are a few links to projects at the nyt that has used these two libraries.
drvabout 11 years ago
I wonder if the misspelling is intentional. (The idiom is &quot;pore over&quot;.)
评论 #7605977 未加载
rpedelaabout 11 years ago
Off-topic, but related.<p>Does anyone know of any JS libraries that allow for Excel-like interaction? However I am looking for something that just implements the presentation layer.<p>The problem I am running into is that the libraries that do exist conflate the presentation and data layers and try to do everything for you. In other words, they make the assumption that all data will be downloaded to the client and then manipulated on the client. These libraries do not fit my use case.
评论 #7604845 未加载
nashequilibriumabout 11 years ago
If you going to handle that many obejcts in the browser wouldn&#x27;t you use something like pouchdb? <a href="http://pouchdb.com/" rel="nofollow">http:&#x2F;&#x2F;pouchdb.com&#x2F;</a><p>Also &quot;Pagination strategies with PouchDB&quot; <a href="http://pouchdb.com/2014/04/14/pagination-strategies-with-pouchdb.html" rel="nofollow">http:&#x2F;&#x2F;pouchdb.com&#x2F;2014&#x2F;04&#x2F;14&#x2F;pagination-strategies-with-pou...</a>
Neffabout 11 years ago
And here I thought I would be reading about the App.net PourOver posting service[0], which the NY Times Opinion account uses for posting[1]<p>[0]: <a href="https://directory.app.net/app/255/pourover/" rel="nofollow">https:&#x2F;&#x2F;directory.app.net&#x2F;app&#x2F;255&#x2F;pourover&#x2F;</a> [1]: <a href="https://alpha.app.net/nytopinion" rel="nofollow">https:&#x2F;&#x2F;alpha.app.net&#x2F;nytopinion</a>
earless1about 11 years ago
I&#x27;ve used the <a href="https://mixitup.kunkalabs.com/" rel="nofollow">https:&#x2F;&#x2F;mixitup.kunkalabs.com&#x2F;</a> library for similar functionality in the past. I am not sure how well it works with hundreds of thousands of items, but it does work well for the 600ish items that I am using it for.
mbestoabout 11 years ago
Is this basically what Google Refine[0] does with their facet filters? (but obviously open source and allowing anyone to build their own platform)<p>[0] - <a href="http://openrefine.org/" rel="nofollow">http:&#x2F;&#x2F;openrefine.org&#x2F;</a>
grumblestumbleabout 11 years ago
It would be a great move to isolate the Views&#x2F;UI part of this out from the rest of the code base, which would make it more usable inside other MV* frameworks like Angular or Ember.
bestestabout 11 years ago
Benchmarks comparing PourOver to Backbone would be nice. Anyone?
评论 #7604633 未加载
alixaxelabout 11 years ago
Having been recently exposed to the benefits (specially performance-wise) of lodash vs underscore, I wonder why it depends on the later.
评论 #7615507 未加载
reshambabbleabout 11 years ago
This is awesome, and exactly the type of thing I&#x27;ve been looking for. Thanks so much for sharing! Can&#x27;t wait to try this out.
b0z0about 11 years ago
I love how New York Times has the coolest devs. Anyone here who works there? What&#x27;s it like?
评论 #7604863 未加载
anarchy8about 11 years ago
Anyone have a demo?
daemonkabout 11 years ago
Similar to crossfilter?