Please review my weekend project. 100% client side webapp. Scales infinitely
tvdinnr.com
tvdinnr.com
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.
Have you checked out angular.js? It has routing, templates, controllers and jsony stuff. Models are a little more complicated.
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).
http://code.google.com/webtoolkit/
http://developer.yahoo.com/yui/
EDIT: Took vaadin.com out - thanks arturadib
What's missing from these?
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.
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.
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.
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.
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.
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.
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.
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.
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 :).
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.
I commented on this video: http://tvdinnr.com/#/v/Ey-VNes5YQs
mine uses server side to process the RSS feeds from youtube and get video details.
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.
Keep the good work going. I'm interested to see how this will evolve.
I bet you could go sell it for $10k