Please review my weekend project. 100% client side webapp. Scales infinitely

http://www.tvdinnr.com/#/

by ljlolel • 15 years ago

58 43 15 years ago

ljlolel11• 15 years ago

YouTube comments are inane. TechCrunch has shown that photo-attached Facebook comments significantly increase the quality of comments. TVDinnr shows YouTube videos with Facebook comments for more interesting discussions.

There are a few known issues that I have to finish, listed at the bottom. Nevertheless, it is functional and fun to use.

I created this as an experiment in Facebook comments and one-page JS webapps.

I know that many of you don't use Facebook, and neither did I, but the Facebook comment system has a lot of intelligence in its social sorting algorithm and it is very viral.

The whole app code is one index.html. I minified and compress the css/js into one file on deploy. All data and functionality come from js apis.

It scales infinitely because I can host the file on S3 and point the DNS at it.

Working on this made me realize that the world needs a front-end-based javascript web framework.

There are a number of backend js frameworks including ones that bridge to ajax on frontend, but none focus on making purely JS apps (with JS, GWT uses java) on one page using hashes and/or history. jQuery does a lot of stuff, but webapps need a little glue.

We need a full client-side JS app framework, with an URL Router, Templates, Controllers, Models, and plugins. It should be able to wrap json api interfaces easily, and it should handle all the page changes that need to happen when it's all just js changes.

TODO: * Needs real, accurate logo; using a placeholder for now * Orange share button broken * Video duration not shown; descriptions not shown * No category browse feature * No About page, FAQ, Press, etc * Search should have instant suggestions * Design could be prettier

* The Facebook status message is generic not video specific because facebook's server side crawler does not execute js. I might make a small server side component using Go on GAE later to fix this.

davidcann• 15 years ago

Try cappuccino.org for your front end JavaScript mvc needs.

ljlolel11• 15 years ago

Thanks, I saw that, it looks like it reimplements Cocoa, for desktop-like interfaces. Is it more flexible, useful for custom and more web-like ui's too?

eknuth2• 15 years ago

Very nice.

Have you checked out angular.js? It has routing, templates, controllers and jsony stuff. Models are a little more complicated.

ljlolel11• 15 years ago

No, I didn't see that. Thanks. I did some quick google searches and also scoured a Wikipedia article comparing frameworks.

arantius• 15 years ago

I've recently used angular (angularjs.org) and I found that it felt strange, so it took a steep learning curve, but though steep it was rather short, and at the top was bliss!

arturadib4• 15 years ago

Try backbone.js, Sproutcore, or Cappuccino for client-side frameworks.

ljlolel11• 15 years ago

Thanks! I was looking in a wikipedia article comparing frameworks that didn't cover every one.

Backbone looks really lightweight. SproutCore looks interesting, I misunderstood it at first. It looks like Cappuccino is trying to be like Cocoa, a little to heavy and specific for my needs.

mbesto• 15 years ago

>We need a full client-side JS app framework, with an URL Router, Templates, Controllers, Models, and plugins. It should be able to wrap json api interfaces easily, and it should handle all the page changes that need to happen when it's all just js changes.

http://www.sproutcore.com/

http://cappuccino.org/

http://code.google.com/webtoolkit/

http://developer.yahoo.com/yui/

http://www.sencha.com/

EDIT: Took vaadin.com out - thanks arturadib

What's missing from these?

arturadib4• 15 years ago

Vaadin is not a client-side framework; it's a server-side Java framework that takes care of client-side code as well. It's similar to Nitrogen for Erlang.

ljlolel11• 15 years ago

I mentioned cappuccino and sproutcore in other replies here. Sproutcore looks interesting, and there's a great team behind it!

I mentioned GWT. As you know, it's Java that compiles to JS.

I don't see how YUI is different from jQuery and plugins. I don't see a router or templates in the yui docs.

Sencha targets mobile.

You asked what's missing. Well, none of them are based around jQuery, arguably the reigning king of minimalist js libs. Minimalism means less learning, easier to use. They are all pretty heavy. I imagine making something more like web.py or Flask or weby, but for frontend JS.

adamjernst• 15 years ago

All-client-side JS stuff is really exciting and now that we have URL control in the browser and performant JS engines in browsers, it's only going to get better. This site is a great example of where things are headed.

kilian• 15 years ago

Fun idea!

Tiny nitpick: Change the width of #content to auto. Same effect (as wide as the page) but right now there is a horizontal scrollbar.

At Shuffler.fm we used a small trick that, for all our ajax links would forward the Facebook crawler to a page with just the metadata for a specific page, worked very well.

stevelosh• 15 years ago

A few (minor) things:

The url is tvdinnr but the logo is tvdinner (notice the e). This makes it harder to remember the URL.

The search button isn't wide enough and looks broken (Firefox, OS X): http://d.pr/UHUT

When I search there's a weird red box in the upper right: http://d.pr/R72E

The "most discussed" videos have no comments, which seems strange.

My browser's back button works, but Cmd+Left doesn't. Is something trapping keypresses?

As someone else mentioned, there's a horizontal scrollbar when there doesn't need to be.

JoeAltmaier• 15 years ago

IE 9 - see the page, no action when hitting search

ljlolel11• 15 years ago

Thanks.

Yea, it's a drop-in temporary logo and the orange box is the AddThis failing for some reason.

I'm not a designer. I changed #content to auto. The search youtube button overflows when text gets too big (looks normal for me), but I want it to right-align with the video, and maximize search box length. How would I best do that?

No keypresses are captured. It registers hashchanges. The Cmd+Left is probably because it goes back to root tvdinnr.com but doesn't redirect again. I fixed that. Thank you.

The most discussed issue is probably just the youtube request failing. I should create error handlers for that.

qeorge• 15 years ago

This CSS works for me:

http://www.pastie.org/1891062

Try bumping the font-size on #header #search up to see things resize.

Worth knowing, Helvetica is wider than Arial, which is why it might look fine on Windows and too wide on Mac.

canwest• 15 years ago

what do we do with this..

jrussbowman2• 15 years ago

If you like this kind of development, I'd suggest you check out YQL. I built www.choip.me which handles most of the interface and twitter interaction using yql to interact with twitter, that's a good example. I haven't touched choip.me in a long time, just never turned it off so I'm sure portions of it are broken.

Another example of where I've done this is with the autocomplete at unscatter.com, where I used yql to pull data from Blekko. yql for sites that haven't blocked it can be a pretty invaluable tool for doing client side development against websites/apis.

Animus72• 15 years ago

The title is misleading. It's not 100% client-side if it queries facebook's servers. And it will only scale as well as S3 and facebook allow. That's a far cry from infinite.

arturadib4• 15 years ago

Isn't that splitting hairs, Sir? The developer didn't code anything on the backend. I think it's pretty clear what he means.

Also, any reasonable human being understands that there's only a finite number of hard drives in the world. S3 is 'infinite' for all practical purposes, IMHO.

Animus72• 15 years ago

I don't think it's splitting hairs at all. When you have a centralized point of failure (e.g. datacenter) backend that runs the show, you're not 100% client-side. You're probably not even 10% client-side.

And as Amazon has shown us, you're not infinitely scalable either when a routing misconfiguration wipes your service off the face of the internet.

That said, I wouldn't be so passionate about the topic if I weren't working on a true serverless client-side app framework :).

lightcatcher• 15 years ago

Agreed. Infinite might not be the best word choice, but this site scales as easily as possible, and as well as the Facebook and Youtube API's.

swah• 15 years ago

Somebody has to hold the data, and they are the ones getting rich, I suppose.

ww520• 15 years ago

I've thought about 100% client side app; however, it can be easily ripped off by someone to build a clone site. Think of all the flash games that have been ripped off to build the thousands of game sites.

r00fus2• 15 years ago

I see no comments on a relatively popular video: http://tvdinnr.com/#/v/xlOIy6QEbes (and yes, I'm trying it on a browser without facebook-blocker)

ljlolel11• 15 years ago

I just made this. It's not showing youtube comments. It shows Facebook comments on TVDinnr urls.

r00fus2• 15 years ago

I don't see Facebook comments either. Are there any examples you have that should have comments?

noduerme2• 15 years ago

At a glance -- and it was a glance 'cause I barely go on YouTube and I refuse to get on FB -- I love it as a conceptual data structure. Firstly, tying two APIs together with a smart client is a freaking great idea, although if this were a for-profit project, you should probably worry about either one locking you out, and how long it would take to notice oddities and rewrite if one or the other changes its API overnight.

In a broader way though, I'm really interested in the idea of using client-side processing for infinite scalability. Even/especially in secure apps, where no hacker's gone before. There's no reason a secure P2P protocol can't be developed in JS that lets an application layer ride between peers, having minimal interaction with any central servers. This gets into telephone poker problems and all that. But it's solvable. The first person to solve it will end up with the largest server farm on the planet... seems worth it to me...

ljlolel11• 15 years ago

I agree completely.

API's today are more powerful and more open than ever. I combined just 2 or 3, but I want to integrate a dozen more, see what can be done with no server effort on my part.

The main obstacle to frontend p2p apps are security. Browsers can't create servers. The closest thing is Adobe's P2P technology (used in ChatRoulette), but that also requires a central server to coordinate peer connection.

I also didn't use Facebook, but just joined for this project. They've improved privacy significantly from years ago. You can turn off access to photos and the wall. You can basically use it as a linkedin or twitter.

noduerme2• 15 years ago

Flash would be a good basis for the kind of thing I'm thinking of. Adobe's already solved a lot of the sandbox issues that would arise, and the language runs faster than JS. In theory, you get each flash player to open 4 or 5 netconnections to other players, get a running pool propagating and distribute the connection list so no one central server is taking the strain of hooking up the peers, you can have filesharing or even distributed processing in the browser. Processing is more interesting to me because it hasn't really been cracked yet. The security overhead to date has been too high. But that, or a java program, or even something written in Unity, could do some amazing stuff with virtually no back-end overhead.

Keep the good work going. I'm interested to see how this will evolve.

18pfsmt• 15 years ago

Check out this slide deck from some HP security researchers for a JS-based darknet presented 2 years ago at Blackhat: http://www.blackhat.com/presentations/bh-usa-09/HOFFMAN/BHUS...

truthtechnician• 15 years ago

Awesome. Doesn't have a way to generate revenue, but hey that doesn't matter to Silicon Valley!

I bet you could go sell it for $10k

richardg• 15 years ago

nice site.. got a site like this too - shows youtube videos.

mine uses server side to process the RSS feeds from youtube and get video details.

http://videowatchr.com

podperson• 15 years ago

Seems like a great idea, but it doesn't work for me. I tried to search YouTube and got nowhere (FF4.x, MBP 10.7 DP)

bricestacey• 15 years ago

When you comment and opt to post to Facebook, you get a teaser full of javascript on your wall: http://i.imgur.com/C6FcY.png

I commented on this video: http://tvdinnr.com/#/v/Ey-VNes5YQs

Please review my weekend project. 100% client side webapp. Scales infinitely

Related Stories