Automating Your Front-End Workflow With Yeoman 1.0

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 appear to grow each year.

What if however, you could automate a lot of this?

This session introduces you to the Yeoman workflow, a combination of three tools working in harmony to keep you productive on the front-end. Whether you're using JavaScript or CoffeeScript, RequireJS or script tags, this workflow can help you spend less time on process and more time on what matters - building great web apps.

We will walk-through how to use Yo - a scaffolding tool for creating apps, Bower - a package manager for client-side dependency management and Grunt - a popular task-based build tool.

[piyushsrivastava]

Thanks for the demo. I had to run the following commands to make it run:
> npm install -g generator-angular generator-karma
> yo angular
> bower install angular-ui
> grunt server

[StevenCritchfield]

Finally dug deep enough to find my problem was with the angular generator and bower. Once I figured this out, I was able to install the angular components with bower directly. So this wasn't a problem with yeoman itself, but with a specific generator.

[GregBabula]

I wasn't fully sold on Yeoman but now I definitely am (in the context of working with Angular). Also Addy, you know I love you but don't let anyone mess with your eyebrows.

[iamfrankstallone]

A bit over my head but perfect for getting my feet wet. You articulated concepts very well, and are a clear speaker. Keep up the good work. =)

[AddyOsmani]

Glad you're sold on it :) I think the Angular team have done a wonderful job on their generator and I know they're excited to continue improving it. I'll also keep the latter in mind :p.

[GaryStafford]

Great introductory video on Yeoman! Thank you. 

[RonanConnolly]

I was just getting my head around NPM.
The more you know the less you know.
Great tools!

[AddyOsmani]

That's correct. We're going to be pushing out a version that requires far fewer steps to install these deps in the very near future but for now I'll be adding one or two extra notes as annotations on the video for those folks that could benefit from them.

[AddyOsmani]

Thanks for the feedback, Patrick. Could you post this as an issue on the generator-backbone github repo? I really want to make sure we address these issues soon so your experience with the next version of that generator is significantly more smooth.

[DavidSilverman-darktoad]

Excellent video! Thanks for sharing this. Really helped me get started with a complete and functional workflow.

[AddyOsmani]

Thanks for mentioning this. We're going to make sure to update this in the Backbone generator shortly. Sorry it caught you out!

[csmicRay]

Awesome tutorial, great example of what AngularJS can do along with Yeoman

[homosaur]

Great vid Addy, also a nice advertisement for Angular for devs unfamiliar with it.

[rbarona]

Yeoman it's great! I love it and thanks a lot for the video Addy. One question, It is possible to add the Zurb Foundation 4 in one of the options of the AngularJs Generator?

Thanks!

[addyosmani]

We don't currently have support for Zurb Foundation in that generator specifically, but have added it to generator-mobile (a mobile-first web app generator). We'll see what we can do to make it easier to scaffold out projects using Zurb, Pure, TopCoat and a few of the other options available these days.

[roblevintennis]

Sir Addy! Congrats to you and the team and nice vid!

I'm considering making a rapid prototyping guide (and of course feature the yeoman toolset!). I feel that Yeoman's strength (its amazing toolset) is also its weakness, simply because folks aren't yet aware of some of these sub-tools e.g.: what's compass, sass, modernizr, bower, grunt, live reload, etc.? I would try to inform as such with said guide.

Would I be stepping on any toes in doing this? Any special attribution considerations, etc.?

[AddyOsmani]

You wouldn't be stepping on toes at all. In fact, if you reach out to me I'm happy to help point out a few more areas that would be useful to mention to them. We need as much help educating developers about modern tooling as possible at the moment. Thanks for asking!

[mitsoz]

Nice presentation. But I get the feeling that yeoman is best at exactly this type of web applications: Ones that are built in 15 minutes for demonstration purposes. How many of those do actually matter?

[AddyOsmani]

nit: I say 'size' at 3:31 which of course isn't the number of characters. I was thinking of 'maxlength'. Other than that I hope you enjoy the video! :)

[LukeWatts]

I think the problem with bower_components not being installed/created is actually because when installing git on windows it soesn't automatically get placed in the Environment Variables to be accessible through the cmd prompt. So people try it through cmd which will do almost everything but that. So for windows users try type git and hit enter and if you get 'git' unrecognised you'll need to place the path in the Environment Variables. Otherwise run this through the git bash. Worked for me...