HTML5 Rocks

HTML5 Rocks

The Landscape Of Front-end Development Automation (Slides)

By Addy Osmani at

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this?

In the slides from my FOWA keynote, I walk through a landscape of tools to keep you productive on the front-end. Learn how to iterate faster, get real-time feedback, avoid bugs through tools and incorporate these into a functional developer workflow.

Some key points

  • Desktop tools for workflow automation can save time on simple projects.
  • Command-line automation tools are better for complex projects where you need more flexibility.
  • Use an editor that gives you real-time feedback during development to maximize productivity.
  • New authoring features in the Canary DevTools make editing in the browser pleasant
  • Augment your system workflow with productivity tools like Alfred
  • Use cross-device testing, network throttling and visual regression testing for a better mobile workflow.

Choose tools you’ll use

Front-end tooling has come a long way in the last few years. That said, it’s hard not to think that developing for the web today is awesome without thinking that it’s now more complex.

The key to staying effective is choosing tools you’ll actually use. Spend time analyzing your personal workflow and select those tools that will help you become more effective.

If you have any questions, comments or tooling suggestions you’d like to share, please feel free to let us know in the comments below!