

Please review my weekend project. 100% client side webapp. Scales infinitely - ljlolel
http://www.tvdinnr.com/#/

======
ljlolel
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.

~~~
mbesto
> _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?

~~~
ljlolel
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.

~~~
jrussbowman
YUI3 is more of a framework than a complete solution, but personally I prefer
it that way. It offers more flexibility.

Here's a post on defining your template within the html itself using yui3.
<http://lostsyntax.net/posts/5>

I will admit I had a little trouble with that approach, and ended up defining
my "templates" as strings within the javascript itself for unscatter.com.
That's how the paging works for javascript enabled clients.

If you are really after MVC, from what I've read of them I think SproutCore
probably comes the closest.

I think though, you need to consider the environment you're working in.
Programming a system that will run on a server is much different that
programming an application that will run on a personal computer, laptop or
even mobile device. You're generally bound to a single core with limited
memory availability. Syntactic sugar leading to faster development time is
generally a good compromise on the server side, but on the front end you have
to be careful. This warning isn't an attempt to disuade you from the existing
frameworks listed, or even to keep you from writing your own. It's just meant
to advise you of something to keep in mind while you do your application
development. Know your box, and excel inside it.

------
stevelosh
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.

~~~
ljlolel
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
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.

------
kilian
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.

------
adamjernst
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.

------
jrussbowman
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.

------
Animus7
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.

~~~
arturadib
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.

~~~
Animus7
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 :).

~~~
ljlolel
Any website could fail because of router misconfiguration, BGP errors (see
Youtube), or DNS issues outside of your control.

The point is that it won't fail because of me. I don't have to optimize SQL
queries or launch new instances or rewrite my backend in C. It just works, for
1 user or 1 billion.

~~~
ndbabb
You still need to serve a static HTML page, even if most of the body content
loads from elsewhere. Serving a small static HTML file certainly scales well,
but not infinitely.

------
bricestacey
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>

------
r00fus
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)

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

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

~~~
ljlolel
You are one of the first users, why not comment on a video yourself?

<http://tvdinnr.com/#/v/HAxfh8ukosQ>

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

------
ww520
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.

------
podperson
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)

------
richardg
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>

------
canwest
what do we do with this..

------
noduerme
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...

~~~
ljlolel
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.

~~~
noduerme
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.

------
truthtechnician
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

