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:

Happy coding!

Questions? Hit me up: @hashtagserg

Copy of Yo, install your next app with Yeoman

By Praveen Poonia

Source: Sergio Cruz

Copy of Yo, install your next app with Yeoman

A brief introduction to Yeoman and the Angular Generator for a more opinionated AngularJS app.

  • 810

More from Praveen Poonia