Arek Nawo

Posted on Mar 27, 2019 • Originally published at areknawo.com

How to choose your web development environment

#webdev #productivity #tooling

This post is taken from my blog, so be sure to check it out for more up-to-date content 😉

Personally, I'm the kind of guy that likes nice-looking things. Whether it's in the real world, or in the form of software. I greatly value vast feature-sets, usability, customizability, and design. I (I think many other developers also) always strive for the best possible tool I can get. But, because there're no ideals in this world, the same applies to the software. Different limits, boundaries, and other imperfection make us having to make a compromise. A decision on which features and, in the result, tools are more important/better for our particular use-case. With that said, in today's article I would like to share some thoughts of mine - a long time ideal-striver - about my journey to the best possible web development environment. Let's get started! 🚀

What environment we're talking about?

Before we dive into the topic, let's first investigate what dev-env we're talking about. Thinking about it just as a code editor or IDE would be a huge mistake. The keyword environment usually refers to a number of things, rather than just a single one. I mentioned a word about all this stuff in one of my previous articles. IMHO, we can safely differentiate at least 4 groups in our dev-env:

Operating System - the most general part of our env, can greatly impact the availability of our other tools.
Code editor / IDE - essential for every programmer, with a number of additional functionalities, it can both boost, but also decrease one's productivity if not chosen correctly.
Browser - the most important part of web development workflow, useful for accessing knowledge, testing and having fun 😅
Other tools - there's definitely plenty more tools, which can differ because of the developer's preference. Every additional piece of software, browser extensions, GIT-tools, services, and standard/often-used libraries find their place here.

With the following grouping in mind, let's dig in and discover each of the above categories one by one!

Operating System

Unless you're using an online/cloud IDE, big chances are that the choice of right OS may be a really important decision. Here you have 3 valuable options - Windows, Linux, and MacOS, not including extreme, highly-not-recommended options like Chrome OS, Android or iOS - seriously, don't do that. 😉

MacOS

I'd like to start with MacOS. Mainly because here I have the least to say, as I have never used a Mac. It's not like I'm a Windows fan - I'd definitely love to have a Mac one day! So, here I can only talk about my impressions, which are really good. Mainly I'm having a weird feeling that almost every developer uses a Mac. Now, obviously I know that's not true, but every time I stumble upon some GitHub issue or an image of someone's workplace, for example, I see an iMac or a Macbook. Also, Mac seems like something in the middle of Linux and Windows. It has the great choice of creative software (some not available on other platforms) and the lack of customizability of Windows and the great terminal access and coding environment as a whole of Linux. This is based on some of my personal experiences. Again, with everything said above, I may be wrong, as I haven't really used it before.

Windows

Next, we have Windows. Probably the most popular and well-known OS. High chances are that your new device will come with Windows preinstalled. This makes it kind-of a default choice. And personally, it was my only OS while I was starting my web development career. At first, it seems like a good choice. Windows has the biggest collection of software of all 3 (sadly it's lacking in the coding department). A browser and an IDE is basically everything you need to start doing web development - and you have it here, on Windows.

But, as you start doing more advanced stuff, or worse - learning a compiled language like C++ or Rust - you will start to fell a little discomfort. In my case, it was NodeJS and its native bindings building process that made me pull the trigger - making a switch to Linux. Just the sheer amount of control and convenience you're getting with Window's CMD or PowerShell doesn't match with the one of Linux's and MacOS'. In addition, Windows as a whole is a bit* slower than most Linux distros and doesn't provide same customizability and extendability. Some Windows-fans may argue about the option of using the Windows Subsystem for Linux (I don't consider VM an option even - too much performance lost). Well, first it's more of a Linux than Windows actually 😅, and second - it was at its early stages back then, meaning buggy (don't know how it's now and I'm probably not going to even try to). The only thing that keeps me using Windows from time to time is the creative software, although Linux has a bit smaller, in many cases more open-source (free) collection of its own. So, yup, I'm sticking with Linux for now, which takes us to our last option...

Linux

Linux is my daily-driver OS for quite some time now. And it's almost perfect! Probably most of you know the standard set of Linux users' arguments in favor of their OS - open-source/free, running everywhere (supercomputers, IoT, Android) and better security (another flaw of Windows). So, let's focus on its other aspects. One of which being customizability. In Linux, you can change almost everything (even build a distro of your own)! This is exactly what makes me customizing every of my new distro (I switch from time to time) for days! So unproductive, but such a joy! 😄 Generally, you can easily make your Linux look the way you want it to be - inside-out! Beyond that, everything in Linux seems much snappier, faster, easier and more controllable.

But, there are some downsides too. For example - the limited collection of creative software, although the programming software is the best there is! Don't get me wrong - there's still a lot of software for Linux, just not as much on the other two OSes. Of course, as a pro comes to the fact that OSS has big influences here, so there's some more freedom to choose from. Next comes, the configuration. Today, many Linux distros come preloaded with some interesting and helpful stuff, but when you want to get the most out of your system, you'll have to tweak it manually. And this process requires some knowledge and time. But it can also bring some new experience to the table, which may come in hand in the future, because... you know, a big percentage of all servers (especially those used in web development backend) run Linux. 😂

Code editor / IDE

Now that we have our OS is placed, it's time to take a deeper look at the software. And, more importantly, at the code editor - a place where most of the work is done. Here, you have two general options - an IDE with full-fledged development experience in mind and a great number of additional goodness built-in, or a code editor - simple, lightweight and fast editor, often with great extendability options. Let's explore some most-popular options!

WebStorm

WebStorm is the only IDE in this list, but a very good one! I've used it a few times, switching back and forth between it and other code editors. And, personally, I think its the best IDE for web development out there! It has the best design and tooling out of all IDEs I've tried (NetBeans and Eclipse). It's on par with all other JetBrains products, which in addition, work together quite well. The autocompletion, support for different frameworks and libraries is something you cannot complain about here.

There are some drawbacks too. Main ones being that it's not free (unless you're doing some true OSS) and the performance. The loading process and general usage are quite demanding and power-hungry. Of course, this is nothing special considering how advanced and complex this tool is. But, the plugin system that many code editors implement, provide much better customizability and thus is more performant. WebStorm has its own plugin system, but it doesn't have as many extensions available as its competitors. And yeah, configuring this IDE can take a while, with the number of different settings it's easy to get lost. 🤨

Sublime Text

Sublime was and still is considered by many as a great code editor. Its main advantage is speed. Being partially written in C++, it has possibly the best performance of all here-listed tools. But, beyond that, IMHO, it has some issues. Just keep in mind that I'm talking from my, web development perspective.

As good as Sublime may be, the lack of integrated extension-management system upset me. The need to actually install the external Package Control for a paid tool, when other free alternatives have this built-in, is just shocking for me. In addition, JS and TS autocompletion feature lags a fair bit. Don't get me wrong, the fact that the software is paid and doesn't focus on web-dev-related autocompletion doesn't mean that it's a bad tool. Paid software can sometimes be more stable and optimized than its free counterpart (which doesn't always mean open-source). And the autocompletion, which isn't a feature everybody wants, can be much better for compiled languages like C++ or Java. Here I'm just talking about my kind-of first impressions, as, because of the reasons listed above, I haven't used it to a greater extent.

Atom

Atom, being my second go-to editor, is the first of two editors on this list based on the Electron platform, and is open-sourced. It has a number of advantages. The main one for me being its design. You won't find more simple, intuitive and nice-looking UI anywhere else! And great extension system only ensures that with a great collection of themes and awesome additional tooling! The autocompletion is fine but could be improved. Also, one of the biggest pros for Atom is its integration with GitHub (for obvious reasons). If you're working with GH repos, then you should find it really helpful.

Just like all the editors, Atom has some disadvantages of its own. The main one being its performance. You can find it being slow, buggy and unresponsive. Also, as for the autocompletion, it can be a little laggy and not-so-detailed too. Naturally, that's something that can get better in the future and is currently working on.

VS Code

You've probably seen that coming, haven't you? 😄 The VS Code is my daily-driver and editor-of-choice. Based on the Electron platform and being OSS, it has great support for all thing web development... feels like home. 😅 It has probably the biggest collection of extensions, which provides all kinds of additional functionalities. Autocompletion for JS and especially TS (VS Code main source-code language). The performance is great, showing exactly how fast NodeJS can be. In addition, it has sleek UI, integrated terminal and the biggest community when compared to other editors.

So, is there any disadvantage to this tool? At the moment I can't see any, other than the fact that VS Code focus on web development can have a bit negative impact on its support for other languages. But, as I don't care about it much right now, I can say it's a perfect choice for me and highly recommended for any web developer! 👏

Browser

There isn't much to say about a web browser - probably everyone using a computer has one of his own. But in web development, browser beyond being a key to knowledge and entertainment is a tool. A tool that can be either good or bad. Here's how.

Firefox

Made by Mozilla, Firefox is one of the most popular web browsers. Mozilla seems to deeply care about web developers and provide them with the special edition of its browser, but also, and what's possibly even more important, with the MDN - a great source of knowledge about JavaScript and web-dev in general.

Every version of Firefox also has access to great extension store, with thousands of add-ons to choose from. This is especially important when it comes to some productivity and programming-related extensions.

One aspect where Firefox really shines is its dev-tools. Especially in the Developer Edition, Firefox has a number of different tools built-in to help you with your design, prototype, and code. If you haven't got used to other dev-tools yet, Firefox might be worth a try.

Chrome / Chromium

The most popular browser on the planet, made by Google. Having control over more than 60% of web browsers market share, Chrome, or at least a Chromium-based browser is a must-have for every web developer... at least for doing tests. Chrome, being a closed-product by itself, is built on top of Chromium - open-source web browser project, maintained by Google too. In modern days, Chromium is becoming de-facto standard when it comes to web development and browsers - it powers Electron and other browsers, like Opera, Brave and MS Edge in the future. Also, part of Chromium is V8 - the fastest JavaScript engine out there, powering NodeJS.

Beyond above, Chromium browsers have access to possibly the biggest store of different extensions when compared to any other browser. This includes a number of productivity and development tools. Also, Chromium has one of the best and most well-known dev-tools on the market. Thus, developing with Chrome or any other Chromium-based browser feels like pure joy. 🤗

Just to sum it up and as you can clearly see - Chromium is almost everywhere. So, if you want to oppose the growing dominance of Google, you need at least some Chromium browser to test your products for ~70% of your possible users. 🙂

Built-in

Apart from all other browsers (many based on Chromium), you have the number of OS-dependent browsers, like old IE, MS Edge or Safari. The main issue here is that all of these browsers (whether deprecated or not) are still being used by some percentage of your possible users and are based on different engines - Trident, EdgeHTML, and WebKit respectively. This situation requires you - the developer - to at least try to test your products on these particular pieces of software. This becomes harder when you realize that not everyone has a Mac and Windows PC available just like that.

Oh, and you, of course, have to test your web apps on mobile browsers too. Just a small note. 🤔

Other tools

This is a bit of a topic for a whole another article. Basically, everything you can call a dev-tool falls into this category. From browser and code editor extensions to stand-alone tools.

In my case, this group consists mainly of a number of VS Code extensions. There's a full package of JS-related tooling, including NPM and TypeScript support, Prettier, ESLint, Live Server and TODO Highlighter. Yeah, I most likely listed 'em all. And, if you're using a VS Code or Atom for that matter, high chances are you have some extensions installed too!

Personally, I don't use any browser extensions right now. Some popular examples of such tools include React and Redux Dev-Tools for Firefox and Chrome. They provide additional debuggingoptions, right in your browser, without any further setup. With the help of these and similar tools, you can easily boost your productivity and development experience for given libraries & frameworks.

Lastly, as for the standalone apps, I don't use any development software per se other than my code editor. I only have Slack installed both on my desktop and my Android phone, and a simple GIT client. So, nothing fancy here. 😉

What about you?

With this quick overview of my personal web-dev setup, I'm interested in knowing one of yours. Do you use the VS Code too? Or maybe you prefer a full IDE? Do you fight with Chromium, or do you embrace it? Please, write down in the comments below. 😉

Of course, if you like the article, consider sharing it with others and checking out my personal blog. Also, follow me on Twitter and on my Facebook page. As always, have a good day and I see you around in the next post! ✌

Top comments (5)

sirnocares • Apr 3 '19

I really like the article and I hope you keep writing such articles. I am also working at a company (Web Development Services) and they offer really good services.