srchr: Crowdsourcing JavaScript wisdom

Posted

UPDATE: The deadline for completing your submission is April 16, the day before JSConf. If you're at the conference, join others in the hacker lounge to see what they did! I've been working on a blog post about using classes and pub/sub for structuring jQuery applications, and I had in mind a pretty simple demo app that I was going to build. I also wanted to show a version of the app that was built in a more traditional way, and I'd been pondering whether I should write that version myself, or see if I could cajole someone else into doing it. And then, a moment of inspiration: rather than a contrived counter-example, why not get a whole bunch of developers to show how they'd tackle the problem, so we can all gain from the exercise and learn from each other? I tweeted my idea, and five minutes later I had a dozen volunteers and counting, which is downright awesome and in hindsight shouldn't be surprising. It's so rare that we get to see multiple approaches to a moderately complex problem -- it's much more common to see horrendous code and bitch about it :)

The project

I've put together a mock/spec for a small, strictly client-side application that uses YQL to search for content and then displays it to the user. (Click on the image to see it full-size.)
Media_httpblogrebecca_cudcn
Think of this as an exercise in creating a product, not a site that you finish and walk away from -- the goal is to create an extensible, modular application. That said, there are no "right" answers here: the point is for you to demonstrate how you, personally, would approach the problem.

Presenting your solution

I've created a github repository for the project that contains nothing more than some documentation, the mock/spec, and a few stub files and directories. You should fork this repository to get started. If you create some CSS that you'd like to share, I'd encourage you to send a pull request so I can make it available to everyone; this isn't an CSS exercise, so no one should labor over that part if they don't want to. I may very well write some basic CSS myself in the next couple of days, but it's late :) Finally: please comment on this post if you have any questions!

Posted

18 comments

Mar 15, 2010
Justin Meyer said...
Bonus points for testing, documentation, and error reporting?
Mar 15, 2010
Rebecca said...
Of course :) Though, also of course, there aren't really points per se -- I really just want to offer a vehicle for showing how different people write code. There really aren't enough public examples of (slightly) complex applications.
Mar 15, 2010
furf said...
How liberal can we be with implementation? ie. I think left-column nav could be made redundant if instead each tab indicated a set of search results.
Mar 15, 2010
Rebecca said...
Be liberal! Spec is for functionality more than form. Just be sure to remember this is an evolving app, so allow for extensibility.
Mar 15, 2010
unscriptable said...
When is the due date? My MVC framework isn't quite ready! :(
Mar 15, 2010
Rebecca said...
The nominal deadline is jsconf.
Mar 16, 2010
Chris Casciano said...
I totally want in -- I just need to find the self control not to start it until this weekend 'cause I've got "real work" to do before then ;)
Mar 17, 2010
Justin said...
Can't wait to see the results, although I'm hoping people will put their energy into extensibility and structure instead of adding superfluous stuff to show chops.

That's what's really interesting to me; there's a lot of stuff out there on technique but not a lot on overall approach to real-world examples.

Mar 30, 2010
Jason Feinstein said...
Finished up my submission (its feature-completeness, anyway) this weekend: http://jwf.us/projects/srchr/

If I find some time I might try to make a nice styling for it, but i'm not sure... This was fun, thanks for the idea! We should try it again soon... (maybe a 'large scale' canvas-based application/visualization?)

Mar 31, 2010
Ben Nadel said...
Who would have thought that figuring out how to use YQL is the most frustrating part of this :) My YQL results don't seem to have any nice links. Ok, time to go beyond the YQL console an actually read the documentation.

This is a really fun little project.

Apr 01, 2010
Ben Nadel said...
.... follow up to that: I didn't realize that my YQL statement was not selecting "*". Once I did that, the Yahoo! Search finally had links in it :)
Apr 04, 2010
Ben Nadel said...
I don't know anything about GitHub, but here is my approach to the problem:

http://www.bennadel.com/blog/1891-SRCHR-A-Client-Only-YQL-Powered-Search-Engi...

This was a lot of fun :) Definitely way outside my comfort zone in development. Thanks for the idea.

Apr 13, 2010
Drew Wells said...
I gave this a go as well. I did not implement a webstorage component, using on the fly structures for storing recent sets. It uses a bit of prototypal inheritance as well.

http://drewwells.net/demo/srchr/

May 10, 2010
Robert said...
Hi Rebecca

What do you use for your Mocks / Prototypes?

Thanks

May 12, 2010
ryan's blog» Blog Archive » 大規模jQueryアプリケーション開発に。srchrプロジェクトの紹介。 said...
[...] そんな中、jQuery Confでも大規模なjQueryアプリケーション開発の発表をしたRebecca murpheyさんが、大規模jQueryアプリケーション開発の今を知れるプロジェクト「srchr」をやっている。 srchr: Crowdsourcing JavaScript wisdom [...]
Jun 16, 2010
Rebecca said...
The mockup you see there was made with Balsamiq -- Mockingbird looks interesting and similar but I haven't tried it yet.
Jun 18, 2010
Ben Nadel said...
I don't know anything about GitHub. Is there a place where people may have posted their branches of this project?
Dec 17, 2010
erichynds said...
Here's my take: http://searchr.erichynds.com/

It doesn't follow your spec 100% (YQL image search w/ suggestions), hence "searchr" instead of "srchr" ;)

Leave a comment...