One of the things I recognize at Google is how productive developers surround themselves with powerful tools for iterative development and debugging. For us front-end developers, the ecosystem of tools has exploded in the past two years, as we have a lot more software and libraries beyond Firebug and jQuery to help us build webapps. In the talk below I walk through the current ecosystem of tools and how they can make your development experience a more enjoyable one.
Because there are so many tools around, I wanted to break them down somehow. I think contextualizing the tools as to what phase of development that assist with works well:
(You could think of the Y-axis here as the amount of code in a project..)
Looking at our tools this way we end up with:
- You likely start a project with more than a single blank text file.
- Authoring Abstractions
- CSS preprocessors, Languages that transpile to JS, Templating
- Frameworks and Application Stack
- Clientside MVC, UI Components, Widgets
- Iteration Workflow
- Browser Devtools, Browser/Unit/Integration Testing
- Performance Tuning
- Profiling, Memory mgmt, browser instrumentation
- Build & Optimization
- Minifiers, Concat, Image compression…
- Continuous Integration, Continuous deployment
I’ve been thinking a lot about workflow and integrating these tools together. Screencasts like Andrey Tarantsov’s Sublime Text Workflow really excite me and I’m eager to see more people exploring a robust development setup.