Last updated 2017-08-09
Tools & Platforms
Learn more about front end development tools
Chrome dev tools
The best tool we have in our hands today. Since its birth, Chrome has invested a lot in its developer tools and is still improving them continuously. Each release (every 6 weeks or so) comes with its own brand new dev tool features.
The dev tools are a complete suite of diverse instruments. You can edit the DOM (HTML)/CSS in real-time, debug Javascript step by step while undertaking a deep performance analysis, even add a terminal. We recently solved some render performance issue thanks to this.
The DOM/CSS editor is an extremely powerful tool, letting you provide realtime feedback to your team, iterating fast on the UI/UX of a new feature.
The official website and the Google Developers Youtube channel both are goldmines of information. For example, the section about command-line API contains really useful commands.
You can for example copy anything to your clipboard from the console by calling the special `copy` function and pass the thing to be copied (object, function return, etc.)
A lot of great tutorials are also available on HTML5 Rocks.
On top of all this, the network tools let you understand what is really going on under the hood and optimize your loading flows, all while the timeline gives you a deeper view of what the browser does.
If you’re curious enough (like us) you can learn a lot about how a browser (and indirectly, the web) is working, letting you take back full control of your application’s lifecycle.
I personally think that if they continue to follow this path, they will definitely become the ultimate IDE (or Integrated Developer Environment) for the web offering web developers a powerful development space bundled directly into the browser.
Gulp
- Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
- Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
- Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations
- Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use
Grunt
The JavaScript Task Runner
Why use a task runner?
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
Why use Grunt?
The Grunt ecosystem is huge and it's growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn't already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to get started.
Webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
TL;DR
- Bundles ES Modules, CommonJS and AMD modules (even combined).
- Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
- Dependencies are resolved during compilation, reducing the runtime size.
- Loaders can preprocess files while compiling, e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.
- Highly modular plugin system to do whatever else your application requires.
NPM
npm is the package manager for JavaScript and the world’s largest software registry. Discover packages of reusable code — and assemble them in powerful new ways.
Use npm to install, share, and distribute code; manage dependencies in your projects; and share & receive feedback with others.
Learn more on