TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Must-See JavaScript Dev Tools

177 pointsby ericelliottover 9 years ago

17 comments

ryanackleyover 9 years ago
I love JavaScript. I program in it everyday. This is a great list of useful tools.<p>That being said, I disagree with the main premise. The tooling is getting there but it&#x27;s just not as good as old-school IDE&#x27;s for typed languages. Specifically, the code insight tools don&#x27;t really compare. For example: Intellisense, refactoring, go to definition of a symbol, and find symbol references.<p>I programmed in typed languages for many years and when I find myself back in an old-school IDE for a typed language like Eclipse or Visual Studio a cognitive load is lifted off my shoulders.
评论 #10644481 未加载
评论 #10644587 未加载
评论 #10644775 未加载
评论 #10645734 未加载
评论 #10645930 未加载
TheAceOfHeartsover 9 years ago
No love for react-devtools [0]? I&#x27;m amazed it wasn&#x27;t even an honorable mention, considering he mentioned react and redux (which is probably generally used with react).<p>I&#x27;m also surprised he didn&#x27;t mention flowtype [1], which is by Facebook and is supported by Babel! If you&#x27;re writing React, you&#x27;re probably already using Babel, so using flow is very low friction.<p>Furthermore, if you&#x27;re interested in runtime assertions, you can use babel-plugin-typecheck [2], which will convert your flowtype annotations into assertions. If we&#x27;re looking to be pragmatic, IMO, this is the optimal path to take. The library that Elliot is working on looks interesting, but even he recognizes in its page that it&#x27;s still a work-in-progress.<p>If you&#x27;re writing a modern JS app and you wanna take advantage of all the ES6 goodies, you&#x27;ll pick up babel. And if you&#x27;re using babel, you can get jsx and flowtype for free. It&#x27;s ridiculous to try and build a JS app without some sort of bundler, whether it&#x27;s browserify or webpack. And if you&#x27;re gonna use a bundler, pulling in a transpiler like babel is really easy and it lets you write much saner code.<p>Oh, and if you&#x27;re already drinking the Facebook kool-aid with react, jsx, and flowtype, you&#x27;ll wanna give nuclide a shot. As I understand it, it has nice flow support, with stuff like &quot;click-to-define&quot; and inline linting [3].<p>I&#x27;m using flowtype annotations with the babel plugin I mentioned above, but due to my usage of non-standard features, I can&#x27;t successfully run flow itself over my codebase. I&#x27;ll also note that my experience with nuclide when I last tried it was underwhelming.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react-devtools&#x2F;</a><p>[1] <a href="http:&#x2F;&#x2F;flowtype.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;flowtype.org&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;codemix&#x2F;babel-plugin-typecheck" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;codemix&#x2F;babel-plugin-typecheck</a><p>[3] <a href="http:&#x2F;&#x2F;nuclide.io&#x2F;docs&#x2F;flow&#x2F;" rel="nofollow">http:&#x2F;&#x2F;nuclide.io&#x2F;docs&#x2F;flow&#x2F;</a>
评论 #10644497 未加载
评论 #10645968 未加载
评论 #10648621 未加载
peetersover 9 years ago
&gt; “JavaScript sucks for large apps because it can’t even identify the type of a variable, and it sucks for refactoring.” ~ lots of very confused people<p>The article then goes on to not use the word &quot;refactor&quot; again. So tell me, why am I confused? Because I have some pretty expensive JS tooling and refactoring JS absolutely, 100% still sucks compared to a statically typed language with a good IDE.
评论 #10646347 未加载
fiatjafover 9 years ago
Was this written only to promote <a href="https:&#x2F;&#x2F;github.com&#x2F;ericelliott&#x2F;rtype" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ericelliott&#x2F;rtype</a> and <a href="https:&#x2F;&#x2F;github.com&#x2F;ericelliott&#x2F;rfx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ericelliott&#x2F;rfx</a>?<p>They seem great. Are there any other good gradual type hinting platforms for Javascript anywhere?
评论 #10644604 未加载
评论 #10646120 未加载
评论 #10644501 未加载
mattmanserover 9 years ago
Honest question and a bit of a side-note, is javascript actually fast? Because in my experience it&#x27;s still pretty slow, it&#x27;s just relatively faster than it was.<p>For example I remember doing a Mandelbrot set generator in js about 3 years ago and it was a lot slower than C#. I&#x27;m talking orders of magnitude, methods that took 10 ms in C# would take 1000 ms in js.<p>But worse than that it hit incredible performance problems when I had an array of more than 10,000 items and tried to use push&#x2F;unshift or a shift&#x2F;pop.<p>I&#x27;m no language expert, and I never really dug into why as it was just for fun. Be interested to hear other people&#x27;s perspective or a more technical explanation. I&#x27;m not really interested in those &#x27;we tested these simple method speed&#x27; comparisions, I&#x27;m more interested in practical experiences.<p>EDIT: Regarding tooling, I&#x27;m presently optimizing js in a client&#x27;s site and the profiling in dev tools is still basic compared to professional tools in C# for example, so this guy needs to expand his experience if he thinks DevTools is &#x27;good&#x27;.
评论 #10646073 未加载
评论 #10644789 未加载
评论 #10645098 未加载
评论 #10644842 未加载
romanovcodeover 9 years ago
&gt; “JavaScript sucks for large apps because it can’t even identify the type of a variable, and it sucks for refactoring.”<p>So where are the toolings for refactoring then? Article doesn&#x27;t mention a single one.
评论 #10646127 未加载
dahartover 9 years ago
Seems weird to not see Google&#x27;s closure compiler on a list about JS dev tools that includes a linter.<p>I haven&#x27;t gotten around to playing with Babel or ES6, and I want to. I haven&#x27;t bothered to Google it yet, but anybody have experience with Babel + Closure compiler? Is it easy, or difficult and inconvenient, or not possible?
评论 #10645430 未加载
评论 #10646208 未加载
gamesbrainiacover 9 years ago
Atom tern-js is a keeper! I also use mancy, which is a javascript repl with really good code completion: <a href="http:&#x2F;&#x2F;www.mancy-re.pl" rel="nofollow">http:&#x2F;&#x2F;www.mancy-re.pl</a>
johnjelinekover 9 years ago
A lot of what he says about hot reloading has actually been spearheaded out of the ClojureScript community. Look at figwheel, for example. I&#x27;m glad that those concepts are coming to plain js.
评论 #10646218 未加载
edwinnathanielover 9 years ago
It&#x27;s hard to argue that the all-round experience JavaScript development is better than say Java&#x2F;C#. The former language has to deal with at least 2 different ecosystems: NodeJS and Browser and the latter usually try its best to give consistent experience everywhere. One would argue that optimizing for specific environment is better but in the case of JavaScript, I don&#x27;t feel that way.<p>The library&#x2F;tools churn in JavaScript is another issue that a few people have raised as a concern. I used to think that companies are crazy (or wasteful) to create their own collection&#x2F;mvc&#x2F;widget&#x2F;utility libraries or tools but I suppose it&#x27;s better than to migrate from one used-to-be-popular library to another current-du-jour library by the time your infrastructure (build, test, packaging pipeline) is already set in stone and you&#x27;re focusing on building products.<p>JavaScript for large app&#x2F;large team, does it work? yes it does. But you have to be _very_ discipline and skilled. Apprenticeship might work for C#&#x2F;C++&#x2F;Java&#x2F;Rails (yes, Rails specifically) but it&#x27;s definitely harder in JavaScript. Some people might not like to hear this but for a large team&#x2F;large app, you have to impose structure, convention, rules, etc which may be at odds with the liberty&#x2F;freedom that JavaScript can offer.<p>Those DO&#x27;s items for JavaScript such as to build small contained function&#x2F;libraries may not applied as-is given certain complex requirements (say Single Page App). Eventually your controller&#x2F;presenter code evolve (sure, we still try our best to break down the complexity but it won&#x27;t be as cute as underscore library).<p>Disclaimer: I use JavaScript every day and am part of the team that builds large products (SAP Lumira, SAP Cloud for Analytics) using JavaScript (90-95% of the code base, front-end and back-end. Yes, that&#x27;s right ;) SAP+JavaScript).
niixover 9 years ago
This author reminds me of the BuzzFeed for JavaScript.
markmywordsover 9 years ago
Oh dear, these splash images are getting out of hand :)))
netheril96over 9 years ago
One of the reasons that static tooling with JS (intellisense, static analysis, go to definition) lags behind those for other languages is the lack of consistent class syntax. Some explicitly create prototypes, some simply attach closures to `this`, and yet many others create their own utility routines to create and extend classes. This makes it incredibly hard to analyze the code structure and infer the methods and properties a certain instance may hold.<p>ES6 may help with this, but it will be a long time before ES6 are natively supported and ES6 class syntax are adopted among devs.
dgellowover 9 years ago
I didn&#x27;t know about iron-node, it&#x27;s an awesome tool!<p>Great stuff, thanks for sharing.
luisrudgeover 9 years ago
Visual Studio Code is not an IDE. It&#x27;s just a bad named Editor
评论 #10645112 未加载
评论 #10644580 未加载
tasnimrezaover 9 years ago
Thanks for sharing such great list. My everyday coding somehow relates JavaScript. Visual Studio is the best IDE i have ever used, though it has some intellisense issue only for javascript, specially when your project consumed many libraries and some of the library used same method name. As a debugging tool Chrome Dev tool is awesome.
voltagex_over 9 years ago
<a href="http:&#x2F;&#x2F;vorlonjs.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;vorlonjs.com&#x2F;</a> is pretty amazing.