Once in a Dev Meetup...
Even though I consider myself mostly a backend developer, from time to time I try to get my feet wet in the frontend areas and keep in touch with what is happening in the world of HTML, CSS and JavaScript. On such an occasion, I recently visited a local developer meetup and attended some pretty neat talks.
One of the speakers (a full-time react frontend developer) was presenting some of the new aspects in React 16 and did a live demo on some of them, switching back and forth between WebStorm and a browser. In the Q&A session, I could not help myself but asking if he could open the structure view of his JSX file for a moment (I wanted to see what it looks like). He gave me a weird look, so I directed him where to click in the IDE. When the panel popped up, he said
"I have never seen this before, what is that?"
I was sitting in the audience, baffled, at a loss for words. I personally do not use WebStorm (due to the subscription model), but one of my primary issues with VSCode is that it still does not provide a proper outline / structure / symbol tree view (there is a plugin, but it's very basic). I consider such a view essential for working with larger code bases. And this frontend developer was standing out there, looking at his WebStorm window, and had no idea what to make of it.
Tools can't keep up the pace
JavaScript frameworks just keep popping up like crazy these days. The latest and best way to write GUIs is just not what you have been doing six weeks ago. Being used to the release cycles of Java (even though it is picking up the pace as well these days), this speed is insane. Modern web development doesn't even shy away from changing the very syntax of the employed languages (hello CSS Modlues, or even JSX as such). But in all this entire process, somehow nobody seems to care about the editor support for all those shiny tools. The "notepad is good enough" mentality is somewhat deeply rooted in the web development community today it seems. This is in the same vein as all the JavaScript developers out there who still use neither TypeScript nor Flow - why this is the case is beyond me. Sure, for a 2000 LoC web page, that is totally enough. But in the areas where I spend my working time in, there is no such thing as a "small" application. Thousands of files containing hundreds of thousands of code lines are day-to-day business there. Try to convince me how any of that should work without proper tooling. I'll wait.
If for every 100 JavaScript frameworks one decent IDE would pop up, the web world would be a better place.
But we do have VS Code!
Visual Studio Code is indeed an excellent editor, I personally think that it's the best editor Microsoft has ever published to date. However, neat as it may be, it's an editor. It is not an IDE. Now, I am fully aware that there are people out there who prefer editors (legend has it that somewhere lives a tribe of people who use vim without being forced to). To all these folks - I'm sorry, but you came to the wrong article.
There are features that are absolutely essential for being productive in large code bases (in my personal opinion of course) that differentiate an IDE from an editor:
- Code Completion
I'm not talking about word completion or best guess completion here, but the real deal. With the uprising of language servers, this has become a lot easier to achieve (at least for strongly typed languages) even in editors.
- Structure View
Also known as outline or symbol tree view. When skimming through a code base, I don't even want to see the source code, but only the structure, and I need to be able to navigate it quickly to get an overview.
- Type Hierarchy View
Ever wondered how many subclasses of your class there are in your entire code base? An IDE can tell you the answer at the press of a button. "But why do you even need it, inheritance is avoided in JavaScript anyways" - that's for another article ;)
- Refactorings
Even though the hipster scripting kids on the web these days are blissfully ignorant about it, the Code Smells described by Martin Fowler do affect them as well as anybody else in the software engineering business. And adequate tools for refactoring are a necessity to deal with them appropriately.
- Auto Import
I don't want to look for the exact location of a class I need every time. An IDE is smart enough to offer me matching proposals given the class name and add the import accordingly. It can also do that for an entire file in batch, also removing all unneeded imports in the process.
These are basic IDE features. We are not even talking about more advanced structure analysis possibilities here.
Ok, let's see how our dear vscode lives up to that list. Thanks to TypeScript and its language server, it has you covered when it comes to code completion. I've found this feature to be working very well, no complaints there.
On to the structure view, as indicated before, there is a third party plugin that offers very basic functionality, however, vscode at the moment does not even let you relocate the individual view panels on screen, and the current default location for the structure view is in the bottom left corner of the screen - which is less than ideal.
Type hierarchy is an unknown word in the vscode dictionary. As far as I know, there are no third party plugins either.
What about refactorings? Well... vscode can handle renamings. Mostly. Except if you rename a folder. Or move a file. Or... well, let's face it, restructuring typescript application folders at the moment is a major pain. And if you believe that the extent of refactorings is renaming and moving files around, you'd be sorely mistaken. Just have a look at what IntelliJ does in the refactoring department for Java. That is the level of tooling I am talking about.
Auto-import is a double-edged sword in vscode for TypeScript. Some imports are recognized automatically, others are not; I've yet to find out how exactly this is determined. There is a third-party plugin named TypeScript Hero that is said to have import organization for an entire file, but I have not tried it yet.
My verdict for vscode as an IDE is therefore mixed - while it does some things extremely well (code completion, smooth text editing, fast startup), it has definitly drawbacks in other areas. And as far as non-commercial tools are concerned, this seems to be about as far as we go at the moment.
Final words
Coming from enterprise Java to the Web dev world, I am puzzled why not more people are kicking and screaming for better tool support. Frankly, I am amazed how web devs build large application these days, equipped with what is in comparison nothing more than makeshift hammers consisting of sticks tied to stones. And when asked about it, they will tell you "It's okay, I don't need more than that". Is this just a matter of background and mentality? Would these folks desire more advanced tools if they knew what they were capable of? What are your thoughts on tool support for web development?
Top comments (16)
The article seems to talk about WebStorm does this stuff and then goes on to lament how there's not a decent frontend IDE. I'm confused...
If you look closely, it also says that WebStorm is not an option for me. I'm not going to pay on a subscription basis for an IDE. We talk about non-commercial tools here. And the situation there looks... grim.
You get paid to build software that makes other people’s jobs easier, correct? Then why balk at paying someone else for software that makes your job easier?
Carpenters don’t forge their own hammers. They go to the store and buy a quality one. It’s an investment.
Well maybe because you will actually own the hammer afterwards, rather than just renting it?
Also, in the web dev community where everything is open source, isn't it a little odd that the way tooling works is dictated by Jetbrains in a closed-source fashion? It just doesn't fit. Or maybe using an IDE is such a rare occurence in web dev that most people just don't care, and the few who do go to Jetbrains?
Jetbrains offers a perpetual license on all their products...
Given that a commercial version of IntelliJ costs the same as WebStorm, I would argue that that is hardly a fair comparison though (and that this is more a testament to the excellent work that JetBrains puts into their IDEs)
Jetbrains products are very good, I'm not going to argue about that :) If you look for IDEs in the Java world, there is Eclipse, Netbeans, IntelliJ Community Edition, all of which are open source and free to use. I would not even claim that any of them is strictly better than the others, there is a competition going on. I personally never felt the need for IntelliJ Ultimate. And in the web world there is WebStorm and... notmuch else?
Which is fair enough (and your choice) but it doesn't seem fair to say there's not an IDE that does this stuff when there is (and it's very cheap). It's worth having a WebStorm subscription even if just to demonstrate that there is a market for JS IDEs
Web developers don't miss these features, because they don't know any better. ;-)
Some years ago it was all too easy to become a web developer, because the technology was in its infants. Some basic scripting knowledge in Perl or PHP was enough for the server side to generate some HTML. The clients were humble in those days, all they wanted was a web "site" (not a web "app"). And there was no need for responsive design (actually nothing worth being called "design" at all) and no client-side functionality, except for what you could fiddle with jQuery. So Javascript was of no importance and also not considered to be a decent language. So yes, a text editor was indeed enough for building a website.
But of course it's very different today and there really is a need for a decent IDE.
My thoughts exactly. Projects tend to never stay small these days. Which is why I am wondering why there is no decent community-driven IDE for it.
Mmm... No, I'm not convinced.
If I wanted to use an IDE for web development, I could. But instead, I got away from using an IDE because they felt slow and bloated. VS Code feels great to me in that regard.
If you still miss some of those features in VS Code, it's probably because you need a new mindset for web development. As you pointed out, knowing how many subclasses exist is pretty "meh" for JavaScript - you shouldn't even mention that. And the following just confirms what I'm saying:
Or maybe you just see them as such, because you can't see their value?
A fairly frequent (though sometimes merely strongly implied) retort is that command line editors can also be very powerful but require much more skill — which you yourself as an IDE user maybe don’t have. I’m always baffled by that response, since I have no desire to expend skill and effort on those functionalities which, as you mention, are purely the basics of any proper IDE (in the same way that I don’t see typing speed as a developer skill).
Agreed. I am aware that VIM, Emacs and so on can be very powerful in the right hands. However, I have no intention to step into these realms. I'm not the biggest fan of command line interfaces to begin with, and most certainly I do not want to edit my code in those.
However, typing speed is an issue. It is because of laggy typing that I switched from Eclipse to IntelliJ. I wouldn't say that any one is strictly better than the other, but a laggy cursor in a text editor is something that drives me absolutely crazy, so I can understand this criticism to some extent ;)
Ah, I wasn’t referring to lagging/stalling, but rather to a person’s ability to to e.g. type 100 word per minute. Lagging/stalling is indeed an issue for some IDEs, and also for me the reason why I very luch prefer Intellij over Eclipse.
Just saying, if you (the reader) code only for fun and don't want to invest in a proper IDE to save time, you can skip the subscription and make a one time payment and get the perpetual license webstorm (stick to one version) or the the Visual Studio (not code) free license (I forgot the name of the Microsoft Dev program).
I can guess why strong typed super scripts didn't caught (TypeScript)
So after paying for one year of webstorm, you could stop paying for updates and continue using the software (without future updates but still). You recognize the constant changes in web development but refuse to pay a provider that is willing to keep up with these changes? Webstorm is an investment as others have mentioned, and if I make my living off web development then I certainly am willing to pay to be able to use the best recources available.