Javascript Disenchantment

javascript-disenchantment.md

Only in software, it’s fine if a program runs at 1% or even 0.01% of the possible performance. Everybody just seems to be ok with it....our portable computers are thousands of times more powerful than the ones that brought man to the moon. Yet every other webpage struggles to maintain a smooth 60fps scroll on the latest top-of-the-line MacBook Pro. --Nikita Prokopov, Software disenchantment

He is right!

Two questions immediately came to mind:

1. Why do we write such bloated, inefficient software?
2. How can we do better?

Answering the first would find much controversy, with the debate touching on ingrained mantras such as "programmer time is more expensive than computer time" and "premature optimization is the root of all evil." You would hear about Moore's law, and the YAGNI and KISS principles. Economics would be brought into the discussion early. There would be little agreement, and much disagreement between different development paradigms. In short, there is no short answer to why most software is horribly bloated and inefficient.

The answer to the second question is much easier. As I considered it, example after example came pouring into my mind.

So, here is a non-exhaustive list of straighforward ways we, the Javascript community, can improve. (No doubt other communities can find parallel improvements.)

1. Stop doing this: const _ = require('lodash'). Instead do this: const get = require('lodash.get') or at least const get = require('lodash/get'). Or better yet, dump lodash altogether if you can.
2. If it needs to run on an ES2015 platform, don't write it in ES2016/ES next and transpile with Babel just to be hip or pretty. Write your code for the target platform, not to impress your friends.
3. Pick modules from NPM judiciously. In particular, consider its size and dependencies before dropping it into the project. It's also a good idea to actually read the source code so you know what you're adding, and check the open issues and PRs to get an idea of whether the package is buggy, insecure, or unmaintained. If necessary, fork and fix first.
4. Do tree-shake your code to get rid of junk code branches from your dependencies.
5. Examine your Javascript bundles and look for duplicate or unnecessarily massive dependencies, and eliminate them.
6. Don't load polyfills in browsers that don't need them. Check before you load!
7. Just say no to Bluebird and other non-native promise libraries. Use native promises instead.
8. Just say no to Javascript-based libraries, when a native one will do. For example, prefer assert over Chai.
9. Don't animate with Javascript when a CSS animation will do.
10. Stop doing this: $('#my-element').click(...). Instead do this: document.getElementById('my-element').addEventListener('click', ...). Just say no to jQuery.
11. Stop including the entire Bootstrap UI framework. Just use the bits you need and include them with Sass.
12. Don't replace native browser functionality like scrolling with some Javascript library just to get pretty.
13. Do package functions separately and exclude everything that isn't needed to run in production when deploying serverless functions, and do it with with tree-shaking.

What ways do you see that we can improve? I'd like to see your comments below.