Yo, install your next app with Yeoman

An introduction to Yeoman and the generator-angular

Presented by @hashtagserg

Who is Sergio Cruz?

Twitter:

Website:

Blog:

@hashtagserg

https://sergiocruz.me

https://blog.sergiocruz.me

The guy holding the magic mouse

• Application Developer in Orlando, FL.
• Has been focusing on javascript for the past couple of years
• Loves startups!

conventions
&
Best practices

The typical story of starting a new app

• What tech stack should be used?
• What is the directory structure going to look like?
• How to package this app for production?

Woohoo! It's almost ready but...

• Google Chrome Audit Tool is screaming at you
• Source code is not minified
• Maintainability of your app is not great
• Everything is a manual process:
  • Create new file in correct directory
  • Add reference to index.html
  • Make a test file (you do test your code right?)

Enter yeoman:

• Web scaffolding tool
• Proposes full-blown workflows
• Includes 1000's of generators
• It is NOT a web-framework
• It does NOT make you coffee

Big shout out to my friend @davidkpiano

What is Yeoman?

Web scaffolding tool

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive."

Includes 1000's of generators

A generator is basically a plugin that can be run with the `yo` command to scaffold complete projects or useful parts."
 

- http://yeoman.io

PREREQUISITES

tools you need to do before getting started with yeoman and the angular-generator

npm install -g yo bower grunt-cli generator-angular

angular-generator?

• Angular is not opinionated
• 1000's of ways to achieve the same goal
• Consolidates workflow
• Predictable directory structure for your source files, tests, etc.
• Builds: minify your js and css files from day one

why use the

Typical generator-angular workflow

Generating a new controller:

yo angular:controller Foo

Controller file

1) Yeoman adds new files to our application's directory

Test file

Typical generator-angular workflow

Generating a new controller:

yo angular:controller Foo

2) Yeoman adds file reference to our index.html

Typical generator-angular workflow

Generating a new controller:

yo angular:controller Foo

3) Yeoman registers newly created controller to angular

Time to do some live coding!

Not happy with these conventions?

• No problem, fork code and/or make a pull request
• Make your own generator

The learning doesn't need to stop here

How to learn more about Yeoman:

• http://yeoman.io
• http://blog.michaelgenesini.com/try-angular-with-yeoman
• https://blog.sergiocruz.me/angularjs-how-to-generate-code-coverage-for-yeoman-scaffolded-apps
• http://wes.is/2015/01/13/how-to-use-yeoman-to-scaffold-your-next-web-app

Happy coding!

Questions? Hit me up: @hashtagserg