Comment by pixie_ | Hacker News Reader

Comment by pixie_ | Hacker News Reader

Parent Full thread

That's really awesome. Lately I've been a fan of a Static+API architecture where the site content is served static and dynamic content is loaded through an API call to api.mysite.com and bound using an MVVM. With caching set, static content is never re-requested and API calls are immediately made when a user loads a page. My server can be a simple event io platform like node, and can handle more requests because it's not building dynamic pages, just directly getting data from the db or memcache to serve back json. Unit testing is simplified because my tests are all integration tests against the same API my webpages use. I can write test scripts to create new users, login, run features and verify the JSON results. Basically use my site from the commandline if I want to, or provide 3rd party api support with no extra effort. I'm not a fan of rest urls mixing data with content requests so I use query params to specify the data to request in the api call. Like homework.com/assignment?id=324324 - when the page loads (immediately from cache) the javascript reads the id and makes the API call to get the content. Anyone else using this kind of design?

I'm doing pretty close to what you describe, with a few minor differences. I have a single-page playlist app for YouTube and SoundCloud called Muxamp [1] that runs on Node.js. The site is served as static HTML/JS/CSS right now, using JavaScript for all the heavy lifting. All requests go to a REST API--JSON in, JSON out. When a playlist is requested (static data), the server checks a cache, then checks the DB. Data is turned into JSON and sent over the wire.

I'm currently doing a rewrite in Backbone, which is extremely amenable to this kind of design. Unit testing so far has been pretty painless, too. Creating a new server instance is as easy as calling a function to get a server object with the endpoints specified. Start the server in setup, close it in teardown. Node.js makes this stuff super easy to automate, provided you can learn to live with callbacks and promises.

[1] Example playlist: http://muxamp.com/1776

First used a similar design on an internal project a couple of years ago. I wrote a long comment on here a while ago that got a good response. This is what most people are referring to when they talk about 'single page webapp', which needs a better acronym, like Ajax

'Single page web app' makes me think of hash tag routing. I think Static+API or S+API (whatever) is like a typical web site with multiple pages. Whats unique is the layout and content are requested separately.

I do use a similar approach with html/css/javascript + json in a recent app, though the static content and the json data are served from the same server. With aggressive cache serving the static content is not a problem.

GETs are easy, what about POSTS? Unless you support CORS?

CORS is supported in most browsers today. Even IExplorer 8 has support for it. If you really want older browsers too, you can always fallback to flXHR.

yea all API calls are POSTs, the API server allows the static server to request.

Angular.JS

I use Knockout, but whatever MVVMs are awesome.

Reply on news.ycombinator.com