Why does Google write JavaScript in this way?

Actually, I was checking new tools which are deployed in Google Chrome recently, while I was exploring I had Google opened, I saw this JavaScript written!

How do they apply code management here because, as you can see the names of variables, functions are completely confusing… isn’t it?

I want to know, do Google Developers purposely write code in this way, if so WHY?, or is it dynamically generated? Or do they have some kind methodology reverse engineer it and to understand what they’ve written.

This is probably because it has it’s proboscis
permanently positioned up it’s derrière. :rolleyes:

coothead

Can’t say for sure in this case, but often this is done automatically my “minification”, where a script reduces everything to the minimum needed, like single-letter variables etc. This wouldn’t be the way the authors wrote it, but just what’s spat out after the script optimizes the code.

3 Likes

It does look like minified code, that has then been formatted at the browser for readability.

1 Like

Answering the question of why, it’s good practice to minify production code to reduce the filesize when browsers download it.

When you are a big company like google and are serving billions of results every day, even small optimizations result is huge savings.

3 Likes

What I have usually done, when I have done so, is to keep a “dev” copy and a “min” copy.

I’ve only done this very rarely so it has never been a problem for me making modifications.

I don’t see there being any problem with ambiguous naming as long as things are kept within scope. But I certainly wouldn’t want to have multiple "a"s scattered about the code.

My guess is that the minified code is not reversed into beautified code, but that newly generated minified code overwrites the old minified code. However, although it would be fairly easy to determine what script had a problem, unless certain areas of the code could be recognized I would think it could be difficult to determine where a buggy nested if(r) block was in a larger script.

But do you have any idea of which minifier it could be? Because online I didn’t find any such minifier(s). Please do you mention if you know any!

Or Google has developed a custom JS minifier?

What are the parameters you’re using for the search? The main one I’ve used is gulp-uglify, but there are lots of others out there. Google may use one of the OSS ones, but equally is more than capable of writing its own.

Google have provided information on worthwhile minifiers, at https://developers.google.com/speed/docs/insights/MinifyResources

For what purpose are you trying to find the minifier that google uses?

2 Likes

Contrary to the other replies, this is most likely NOT minifiied. When code is minified and you see cryptic variable names, it is what you called ‘mangled’.

However, if it was mangled you would not see full variable names as you do at the bottom of the code base. So, most likely your original question still stands unanswered.

It was probably both uglified (aka ‘mangled’) and minified, but as @chrisofarabia pointed out, you can de-minify code with Chrome’s built-in dev tools (for example) which restores readable spacing and indentation.

Not all variables and method names can be uglified: browser APIs don’t get altered, for example. You can see that in the screenshot with e.resolve and e.reject, where e is most likely a native Promise object. You also can’t always uglify 3rd-party code without breaking the API.

2 Likes

Probably a custom Google minifier that shortens all variable names to the shortest possible values to keep down on file size.

I think that it’s more plausable that the OP took already minified code, and used Chrome’s [Pretty-Print] on it.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.