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.
>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.
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.
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.
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.
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.
None of which offers good UI/theme, in my opinion. I like jQuery Mobile's theme, even on desktop. That's what I'm using for my latest project (also using Backbone.js for MVC).
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!
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?
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.
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.
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.
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.
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.
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.
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 :).
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.
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.
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.
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...
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.
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.
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.