3 ms·

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

by pixie_ 14y ago

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?

knwang 14y ago
GETs are easy, what about POSTS? Unless you support CORS?
- pixie_ 14y ago
  yea all API calls are POSTs, the API server allows the static server to request.
- bad_user 14y ago
  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.
nikcub 14y ago
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
- pixie_ 14y ago
  '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.
nl 14y ago
Angular.JS
- pixie_ 14y ago
  I use Knockout, but whatever MVVMs are awesome.
fruchtose 14y ago
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 http://muxamp.com/1776
ww520 14y ago
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.

by pixie_ 14y ago

knwang 14y ago

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

pixie_ 14y ago
yea all API calls are POSTs, the API server allows the static server to request.
bad_user 14y ago
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.

nikcub 14y ago

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

pixie_ 14y ago
'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.

nl 14y ago

Angular.JS

pixie_ 14y ago
I use Knockout, but whatever MVVMs are awesome.

fruchtose 14y ago

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 http://muxamp.com/1776

ww520 14y ago

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.