Modern Front-end Workflows and Tools – My Previous Project – Development Workflow

My Previous Project

Developers were in Kansas, NYC and Siberia.

Operations were in Kansas.

Product owner and Designers were in Boulder, Colorado.

Development Workflow

Product owner and designers had private meetings about design and business decisions.

Developers and project manager were not included.

Designers threw wireframes and 2 PSDs of "desktop" view over the fence to developers.

Designers got paid, left and were no longer in the picture.

The Problems we had with this workflow ...

A large percentage of data represented on wire-frames and PSDs did not exist.

Mobile was not a priority.

We did not believe in mobile testing, but when we did we did it on production.

Silos

An information silo is an insular management system incapable of reciprocal operation with other, related information systems.

silo mentality

A mind-set present in some companies when certain departments or sectors do not wish to share information with others in the same company. This type of mentality will reduce the efficiency of the overall operation, reduce morale, and may contribute to the demise of a productive company culture.

Giving PSDs to a team of developers and walking away is waterfall, not agile.

We prefer agile!

Current Project

We are designing in the browser.

The product owner is signing off in the browser.

We are designing components not pages.

When the components are built and styled then they will be assembled to create the page or what ever the future brings us.

We are designing mobile first.

We are designing content first not picture first.

No one does this!?!

bit.ly/Starbucks-styleguide

http://bit.ly/yelp-styleguide

Why!?!

Guess what. The web’s not a laser printer.

For ...

The point of creating [responsive] sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts.

A workflow like this is made possible by modern tools like ...

and ...

"Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications."

The Yeoman workflow consists of three tools:

Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.

Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.

Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

To find out more visit: bit.ly/yeoman-start

Awesomesauce

I mean it seriously!

Let's scaffold up a project!