CODEWITHSUNDEEP
csshtmldesign-patterns
Primoz Rome
Primoz Rome

Reputation: 11031

How is Facebook's website front-end and it's right sidebar designed?

I am wondering how Facebook front-end is designed, especially it's fixed right sidebar? I would like to implement similar sidebar in my web app to display user's tasks. But I would first like to understand better how Facebook's sidebar work.

First thing I would like to understand is how they handle that the right sidebar is always there! It is not reloading when you open new link inside facebook. I understand the visual CSS part, no problems there: position:fixed; right:0; top:0; height:100%;. But I really wonder how they do this: when you click a link inside Facebook that loads a new page (e.g. clicking a friend's name) then the entire new page content is loaded, but it doesn't seem that sidebar is loaded again. It just sits there all the time.

They don't do any AJAX stuff when you click the link, so the content of the entire page doesn't load via AJAX? Is it just so damn fast or they use some kind of (to me unknown) design pattern?

Upvotes: 0

Views: 863

Answers (1)

Primoz Rome
Primoz Rome

Reputation: 11031

Since nobody wants to answer this I think I can provide the answer which helped me answered my question most accurate.

The answer is in this Facebook's dev blog post, which describe BigPipe design pattern pioneered by Facebook. BigPipe separates page into different chunks called 'pagelets' and loads them asynchronously (in parallel).

I found an open source PHP implementation of BigPipe and live example here but it is long since it's been updated and doesn't look to be in active development.

Upvotes: 1

Related Questions