I did not imagine that such a simple page would require so much code.
A lot of that is hidden unobvious stuff - like those things in the upper right that look really simple, but if you click on them you get a pop-up with lots of items, like the apps grid. Some of it looks autogenerated, and about 25% of it looks to be error handling. And of course it’s been obfuscated, or at least compressed. Nobody sane would write code like:
var Fl,Ll,Ml,Ol;Fl=[3,5];_.Gl=function(a);
they have some original code with real variable names, but they’ve been shortened for the final page (and most whitespace removed) so the page will load faster.
A good way to read it is to use the inspector. If you’re using Firefox, hit F12, then use the Inspector tab to see what code corresponds to what items on the page. That makes it a bit easier to figure out the code from what you know it’s doing. The Inspector also reformats the code to make it easier to parse.
Actually, the page looks simple, but it has a few things going on behind its buttons. More than meets the eye, as they used to say about Transformers.
Edit. What he said above.
I beautified the source and read through some of it. The strange thing is, a lot of it isn’t compressed, just concatenated.
In no particular order:
- Inline styles. Lots of them. Inline means less HTTP requests, so faster page load.
- Base64 encoded images. Again, less HTTP requests.
- A javascript module loader. Lazy load those libraries.
- A massive javascript utility library. Similar to lodash or the utility features of jQuery. It’s got event handling, string manipulation, a math library, a way to identify browsers by feature and name, and the list goes on.
What does it all do? I haven’t the foggiest of clues.
It depends if you are a user of Google services or not.
If you just search, then you have no use of the buttons in the top right corner.
If you use Google Stuff, then you’re logging in, selecting Google apps, getting notifications. Alot is going on.
But it isn’t that simple. It is deceptive in it’s initial appearance.
Start typing in the search box - what happens?
How do you think this is accomplished?
In short. XKCD, suck it. You’re wrong.
Edit: No XKCD is not wrong. It’s not the point they are making.
What the actual fuck is all that code doing?
Well, for one thing, it’s rendering your profile pic:
And probably some other personally-identifiable information too.
You are braver than I to share the source code of your google.com homepage.
Where the comparison breaks down is that our DNA has had genetic additions from ancient viruses, whose code (we think) is largely lying dormant.
We’re not there with computer code.
Yet.
Now do the same on duckduckgo… that duck has his shit together.
Dumb question from a noncoder: what language(s) is that?
It’s a mix of HTML, CSS, and Javascript.
Not dumb. Good question, and thank you for answering, @buck!
There is 300KB of JS alone on that page plus whatever tens of KB of JS embedded directly into the page itself. There is little chance even half of it is used on the main google.com page. The rest is probably bundled for other products or cruft.
Ah yes, but it didn’t get there by self-propagating malicious code is my point.
I’d say such code is known as “web development frameworks”.
The DNA “Source code” is not the only “code” that is inherited and controls the final product. Here is a summary of the Histone code which, along with DNA methylation, is part of the Epigenetic code:
I see I am a bit behind in my gene-fu.
To the library, Igor!
