Learning Javascript the proper way in 2017 — Part 2: The tools

The first part covered the ecosystem and ‘state of the union’. Let’s move on to the tooling, which is the most important aspect to have in mind. Better tooling improves the ecosystem and brings developers on to the platform. One of the greatest reasons for the rapid rise of Typescript has been the awesome IntelliSense (autocomplete) it provided, initially in Visual Studio, and later in all IDEs via plugins.

The package managers

Most cross-platform language ecosystems come up with package managers. It makes installing and publishing libraries (and executables) very easy. Python has PIP, Ruby has Gems, Java has Maven. Javascript has quite a few

• NPM — The most widely used one, and one of the oldest. And officially recognised by the NodeJS developers (it comes bundled with NodeJS). NPM is backed by a an enterprise, namely ‘npm, Inc’. And it isn’t exactly ‘necessary’ to use NodeJS. But they have standardised the package.jsonformat, and the npmjs.com registry is the standard place to look for nodejs dependencies. There are above 500,000 packages listed on it as of today.
• Yarn — This is the new cat on the block. But it has very fast become one of the most used one. It was developed by Facebook (in their recent burst of investment into Javascript — see React, Prepack, JSX, Flow). It focuses on flattening our the dependency tree of packages, better caching for offline installs, and faster build/install times. Yarn released before NPM v5, and at that time provided a oft-required feature NPM lacked before v5 — ‘package version locking’. That is with a lockfile, your software will always download the exact same version (down to the source tar location) of each and every dependency.
• Bower — Can be considered an NPM equivalent of the frontend world. Though since the last 2 years, NPM has steadily become the universal frontend managers, in the 2012–2015 period, Bower made a name for being a package manager focused on frontend packages. Even today most frontend packages like jQuery will have a bower install description on their getting started pages.
• DuoJS — A newer attempt at frontend package management. Does not need a package.jsonor bower.json configuration unlike the previous two (but that also means you either depend on the latest version of every library, or specify library version in every script of yours separately). It does not need a registry, as it can download packages from Github directly.
• Jspm — Just requires being mentioned because it had a popularity streak in the 2015. Mainly if you used SystemJS (which no one does these days because of Browserfiy/Webpack/Rollup), JSPM would be the package manager to go to.

The editors and IDEs

Developers flock to ecosystems that have great editing environments. The reason enterprise development by-and-large takes place on the Java/J2EE stack or the C#/Asp.NET stack is because Eclipse/IntelliJ is a rock solid IDE for Java and Microsoft has poured in their decades of desktop UX experience into making Visual Studio a piece of marvel. The power of multi-file variable refactoring, dependency resolution, intellisense/autocomplete, in-IDE debugging with breakpoints and project creation with scaffolding is sometimes scoffed at by Unix neckbeards and purists who believe in coding on the command line in Vim and hand-writing each configuration file. I’ll admit I do it myself, but for newcomers, a robust IDE can be the make-or-break factor for adopting a language. For Javascript development, you are spoilt for choice.

The following are a list of text editors (not full fledged IDEs, but can turn pretty much into an IDE with plugins and other support).

• Atom — A general purpose text editor, written itself in Javascript, by Github. There are a host of plugins, a large number of them specifically for making Javascript/HTML/CSS editing a breeze. With the right plugins installed, you can turn this text editor into nothing short of an IDE. (If you want to work specifically on ReactJS stack, Facebook has an Atom plugin — Nuclide). You can also see this list of packages you should have to make your experience great. P.S. Atom is a free (commercially free as well as libre) to use text editor.
• Sublime Text — Definitely the most popular text editor for developers. It also has an optional package manager, via which you can install these essential plugins that can make your Javascript editing a better experience. Sublime is also something that you can turn into an almost-IDE experience.
  It isn’t free, but it won’t stop working if you don’t pay (like WinRAR). I would recommend you pay though if you use it. It is developed by a single developer.
• Visual Studio Code — While the full Visual Studio is only available to Windows users, Microsoft made a lightweight text editor (yes, this isn’t a full blown IDE) available cross-platform, in their recent ‘❤ Unix, ❤ open source’ phase. Microsoft has made a push into Javascript tooling with Typescript and VS Code. With the proper set of plugins, this also turns into an IDE. VS Code is commercially free …. aaaand . . . wait for it …. Open Source !!! (OMG YEAH, OSS from MICROSOFT).
• Brackets — With everyone throwing their hats into the ring for creating perfect text editor, Adobe did too. While the previous ones are more general purpose (you can use the ones above for coding in Python, Ruby or other scripted languages too with appropriate plugins for that ecosystem), Brackets is more JS focused, in that it has a live-render button to render your website within Brackets. Evidently, with the other editors backed by companies already working on Developer tools (Github, Microsoft), Brackets has seen dwindling popularity off late.

That said, sometimes you need a little more out of the box. Full blown IDEs come with better refactoring, better IntelliSense and usually have “project management” features, like integrated issue and VCS tracking, integrated micro-servers to host your app, in built breakpoint debuggers and in general much better tooling support. For those needs, you can use any of the following —

• Eclipse (with JSDT package). The stalwart of IDEs. The most used polyglot IDE, and one of the largest open source projects in the world. Had been a little ugly on the UI and sluggish some years back, with the latest Oxygen release, they have put all those critics to rest. Eclipse is heavily tilted towards Java developers, but the JSDT package makes a Javascript developer feel equally at home.
• Microsoft Visual Studio comes with optional Javascript development tools (that you can chose during or after installation). No doubt Microsoft has made a dent in the developer ecosystem with Visual Studio — it has very few parallels, the 2017 version has a pleasant UI and everything out of the box. Drawbacks — it isn’t open source, works only on Windows, and only the ‘Community Edition’ few features cut back is commercially free. The paid versions are pretty pricey.
• Webstorm (or IntelliJ IDEA with Javascript tools; which is the same thing). Trust me when I say this — Jetbrains knows how to make IDEs. This is a company that can make the best developer tools in the world. When go deeper into the Javascript world, and are making projects deeply integrated with different transpilers like Babel and Typescript and packagers like Webpack, you won’t be able to thank Webstorm enough to look up through transpilations into original dependencies, resolve all kinds of convoluted paths, and debug with breakpoints via source maps. When you are working on complex projects, Webstorm will have your back. But since the license is a bit pricey, I’d recommend starting off with Atom/Sublime when you begin working with JS, and graduating to Webstorm when you are into larger projects. If you are a student, you can get a free 1 year license.

Bonus: Color/Font tips (applies to general coding, not just JS)

Apart from package management and IDEs, we also need tools to keep our code style sane. Most IDEs can automate a large part. But there are dedicated linters, most popular of which is eslint. You can also try jshint, jslint or eshint. Most can point out code syntax errors. Eslint is very very configurable, and can also fix the common errors. You can also use prettier to auto-reformat your code. If you use Typescript, you can use tslint which is based on eslint.

Fonts and Color Schemes are also important factors that play in making your developing experience pleasant. Keep the following in mind —

• White text on dark is better if your room is dark (at night maybe).
• Dark text on white is better when your room is brightly lightes (in offices)
• #FFFFFF vs #000000 contrast hurts. Tone it down. Most good color schemes will do it for you.
• Pale blue or creamy colors are better. Don’t use colors that are too brights. Dull (grayed out) colors hurt eyes less.
• A lot of research goes into fonts. Use good ones. Don’t stick with Courier New or Monaco just because your OS slapped those onto your PC by default.
• You can use fonts with ligatures and support for better symbols, as they make code look pretty

Take a look at this repository for a set of good color schemes and fonts. (There are some prepackaged files for Jetbrains IDEs, but you can anyway get the color schemes for other IDEs and the fonts, are obviously universal).

We’ll leave it here at Part 2. I’ll continue with some ‘paths’ to follow, order of things to cover, to learn Javascript in the next part. And possibly cover good resources to read/watch and some popular libraries in Part 3 or 4.