4 ms·

Basecamp Next's speed comes from the combination of an aggressively cacheable design and HTML 5 pushState.

rsanheim 15y ago
Can you expand on what sort of caching you are talking about? Client side caching in the JS layer, varnish or some other http level caching, some sort of server side in the Rails app itself, etc ?
- sstephenson 15y ago
  All of the above. On the app level, each fragment of markup is free of user-specific data so all users can share the same cache. (User-specific concerns are pushed down into JavaScript and CSS.) Those cache fragments are then nested, so we can cache at all levels of display: an individual to-do item, the to-do list with all its items, all to-do lists in a project, and the entire project itself. At the HTTP level, we send an ETag in the response for every GET request. Since our app caching means we don't incur the cost of a full render, we can serve the requests very quickly and avoid sending back the contents of the page if your browser already has it. At the JavaScript level, we cache DOM elements for every sheet you've visited in the current page load, and display them immediately (while fetching the latest version in the background) when you re-visit a URL.
  - hello_moto 15y ago
    Do you mean: 1) it's a single page app 2) you're using ERB fragments (or something) as "templates" 3) MVC fat-client Is this... more or less it?
    - sstephenson 15y ago
      It's not a single-page app—at least not in the traditional sense. Only in the sense that we don't need to reload assets with each page change. We are using a dash of Backbone here and there for cases where interaction speed is of utmost importance, but most of what you download over the wire is HTML.
      - hello_moto 15y ago
        Does the Sheet paradigm supports back-button? (just curious) if so, is it via normal browser history or AJAX '#' trickery?
Jasber 15y ago
Are you pre-caching or just caching after the first hit?
sohara 15y ago
Curious about how you're employing pushState. Is it through pjax or something similar?
- sstephenson 15y ago
  We started out with pjax (which is awesome) but ended up rolling our own framework called Stacker which lets us have complete control over the UI.
  - gr3g 15y ago
    Any plans to open source Stacker?
    - dhh 15y ago
      Not for the time being. Stacker is specifically developed for this unique UI style that we're using for Next. We don't open source our UI elements.
      - alexyoung 15y ago
        You know who did open source their UI elements? Twitter, with Bootstrap. And you know how awesome that was for everyone? Pretty awesome!
        larrywright 15y ago
        While I agree that Bootstrap is awesome (I use it myself), it's worth pointing out that what Twitter open sourced was not the magic of their core product, but rather the templates that they use to create internal applications. If you look at twitter.com, you don't see any of the same elements that are included in Bootstrap.
        voidfiles 15y ago
        You mean besides all their UI widgets, right? http://twitter.github.com/bootstrap/javascript.html http://twitter.github.com/bootstrap/javascript.html

Can you expand on what sort of caching you are talking about? Client side caching in the JS layer, varnish or some other http level caching, some sort of server side in the Rails app itself, etc ?

sstephenson 15y ago
All of the above. On the app level, each fragment of markup is free of user-specific data so all users can share the same cache. (User-specific concerns are pushed down into JavaScript and CSS.) Those cache fragments are then nested, so we can cache at all levels of display: an individual to-do item, the to-do list with all its items, all to-do lists in a project, and the entire project itself. At the HTTP level, we send an ETag in the response for every GET request. Since our app caching means we don't incur the cost of a full render, we can serve the requests very quickly and avoid sending back the contents of the page if your browser already has it. At the JavaScript level, we cache DOM elements for every sheet you've visited in the current page load, and display them immediately (while fetching the latest version in the background) when you re-visit a URL.
- hello_moto 15y ago
  Do you mean: 1) it's a single page app 2) you're using ERB fragments (or something) as "templates" 3) MVC fat-client Is this... more or less it?
  - sstephenson 15y ago
    It's not a single-page app—at least not in the traditional sense. Only in the sense that we don't need to reload assets with each page change. We are using a dash of Backbone here and there for cases where interaction speed is of utmost importance, but most of what you download over the wire is HTML.
    - hello_moto 15y ago
      Does the Sheet paradigm supports back-button? (just curious) if so, is it via normal browser history or AJAX '#' trickery?

Jasber 15y ago

Are you pre-caching or just caching after the first hit?

sohara 15y ago

Curious about how you're employing pushState. Is it through pjax or something similar?

sstephenson 15y ago
We started out with pjax (which is awesome) but ended up rolling our own framework called Stacker which lets us have complete control over the UI.
- gr3g 15y ago
  Any plans to open source Stacker?
  - dhh 15y ago
    Not for the time being. Stacker is specifically developed for this unique UI style that we're using for Next. We don't open source our UI elements.
    - alexyoung 15y ago
      You know who did open source their UI elements? Twitter, with Bootstrap. And you know how awesome that was for everyone? Pretty awesome!
      - larrywright 15y ago
        While I agree that Bootstrap is awesome (I use it myself), it's worth pointing out that what Twitter open sourced was not the magic of their core product, but rather the templates that they use to create internal applications. If you look at twitter.com, you don't see any of the same elements that are included in Bootstrap.
        voidfiles 15y ago
        You mean besides all their UI widgets, right? http://twitter.github.com/bootstrap/javascript.html http://twitter.github.com/bootstrap/javascript.html