Paul Hammant's Blog: How Google makes a consistent top-navigation across multiple apps
TL;DR: Google has a shared app-launcher flyout for different applications. It is injected into pages on the server-side (not client-side).
Google has dozens of applications that go live on different release cadences. Different application teams can use different languages, and make different server & client-side framework choices. For many apps, the top inch of the page looks fairly consistent. Let’s focus on the applications that are available to you if you’re logged in, by clicking the apps icon (a 3 x 3 grid of dots) in the header:
That’s for the Google-Plus application, but flyout is almost identical for all the applications. It looks subtly different due to each application having slightly different CSS. Here’s a breakdown of how each app places the flyout into the page:
Secondary apps (below the “more apps” line) are like so:
|Youtube||www.youtube.com||No App Flyout|
|AdWords||adwords.google.com||No App Flyout|
It’s the same broad implementation
It’s clear Google have a component linked in to each app, or a service that’s invoked per page-impression. Given Google’s tooling around their mega-trunk allows them to compile in dependencies easily my money is on the former and it’s not a service.
The clicking on an app icon, causes a new window or tab to open. Maps is the exception though - it opens in the same window/tab.
The variable names in the source, lead me to believe that Googlers refer to the whole thing as “one google bar”.
When WebComponents is been embraced everywhere, Google implementation could change of course.
blog comments powered by Disqus