Note that I didn’t say “the best IDE”. If you’re looking for a central IDE that unifies your entire dev tool experience, check out Microsoft’s Visual Studio for C#. Pair it with Unity for a good time. I don’t use it myself, but I have heard from people I trust that it’s pretty solid.
I have used C++ and the Unreal Game Engine. The first time I tried that, I realized that the web platform dev tools still had a long way to go.
What Are Dev Tools?
Developer tools are a collection of software that makes life easier for developers. Traditionally, we’ve thought of them primarily as the IDE, linter, compiler, debugger, and profiler.
For the purposes of this article, I’m going to include runtime tooling, and even a couple libraries that enhance runtime developer visibility and debugging. The line between dev tools and libraries is starting to blur. With mind-blowing results.
TL;DR quick list:
- Atom & atom-ternjs
- Chrome Dev Tools
- PageSpeed Insights
- FireFox Developer Edition
- rtype (the spec) & rfx (the library) Warning: These are unfinished developer previews.
- Greenkeeper.io & updtr
- Webpack + Hot module replacement
- Redux + Redux DevTools
About the Tools
Your dev life is going to center around two things: The editor, and your runtime environment (e.g., the browsers, platforms, and devices you’re coding for).
The Editor: I started my dev career using big, massively integrated IDEs like Borland IDE, Microsoft Visual Studio, Eclipse, and WebStorm. In my opinion, the best of these are WebStorm and Visual Studio.
I also use vim for quickie edits from the terminal.
Debuggers: I missed the integrated debugger when I started programming for the web, but the Chrome and FireFox teams have elevated runtime debugging to a whole new level. Everybody today seems to know about Chrome’s DevTools and how to step through code, but did you know it has great features for advanced performance & memory profiling and auditing? Have you used the flame charts or the dominators view?
Speaking of performance auditing, you also need to get to know PageSpeed Insights:
On top of all that goodness, there are also some cool features for live editing CSS, & very cool features to help you edit animations. Get to know your Chrome DevTools. You won’t regret it.
Not to be outdone, FireFox has a dedicated browser just for developers. FireFox Developer Edition:
BrowserSync: BrowserSync is a great way to test your responsive layouts by controlling several browsers at once. In other words, you can use the BrowserSync CLI to open your app on your desktop, tablet, and phone.
You can tell it to watch files and automatically reload the synchronized browsers on file changes. Actions such as scrolling, clicks, and form interactions will also be synchronized across devices so you can easily test your app workflows and be sure that everything appears correctly everywhere.
TraceGL: TraceGL is a runtime debugging tool that lets you observe all of the function calls in your software as they’re happening in realtime, rather than stepping through your code manually, one step at a time. It’s super powerful and extremely useful.
ironNode: ironNode is a desktop debugging app for Node built on Electron, the same cross-platform desktop runtime that powers the Atom editor. Like node-inspector, it allows you to trace through your code using features similar to Chrome’s DevTools.
To use it with Babel, I use the following debug.js script:
To launch the debugger:
Works like a charm.
Linting: ESLint is by far the best linter I’ve used for any language. I like it better than JSHint, and much better than JSLint. If you’re not sure what to use, stop worrying and use ESLint. Why is it so cool?
- Very configurable — every option can be enabled and disabled. They can even take parameters.
- Create your own rules. Do you have your own style conventions you want to enforce on your teams? There’s probably a rule for that, but if there isn’t, you can write your own.
I was also really impressed by TypeScript’s structural type solution.
TypeScript has issues though:
Keep in mind that they’re very young, and there will almost certainly be breaking changes in the short-term.
Greenkeeper.io: Greenkeeper monitors your project dependencies and automatically opens a pull request on your project. Make sure you’ve hooked up a CI solution to automatically test pull requests. If the tests pass, just click “merge”, and you’re done. If they fail, you can dig in manually and figure out what needs fixing, or just close the PR.
If you prefer a hands-on approach, check out updtr. I recommend that you run updtr on your repo before you enable Greenkeeper for the first time.
Webpack: Webpack bundles modules and dependencies into static assets for browsers. It enables a lot of really interesting features such as hot module replacement, which lets your live code in the browser update automatically as you change files without a page reload. Hot module replacement is the first step towards a truly continuous realtime developer feedback loop. If you’re not using it, you should be. To get started fast, check out the webpack config in the Universal React Boilerplate project.
React: This one is a bit of a stretch, because React isn’t strictly a developer tool. It has more in common with a UI library. Think of React as the modern jQuery: A simple way to address the DOM. But React is more than that. It is really a UI abstraction layer that abstracts you away from the DOM. In fact, you can target a lot more than the DOM with React, including native mobile UI APIs (iOS & Android), WebGL, canvas, and so on. Netflix uses it to target their own Gibbon rendering API for TV devices.
So why am I listing it among developer tools? Because React’s abstraction layer is used by some great developer tools to enable the amazing developer tools of the future, featuring hot loading (updates to your live running code without page refreshes), time travel, and more… read on!
Redux + Redux DevTools: Redux is an application state management library inspired by the React/Flux architecture and the concept of pure functions from functional programming. Another library in a list of developer tools? Yep. Here’s why:
Redux and Redux DevTools enable some truly next-level debugging interactions against your live running code. It allows you to get really great, understandable insights about the actions that have been performed in your app:
It even allows you to shuttle back and forth in time using the time travel debugging features. Here’s what it looks like with the slider view:
I also believe that the line between the application we’re building, and the development environments we use to build it will blur over time. For example, the Unreal game engine integrates blueprint editing into the game engine itself, allowing developers and designers to build complex behaviors from inside the running game. I think over time, we’ll start to see those features in web and native mobile applications as well.