027 Yeoman

28 Dec 2012

Yeoman serves to help us create a modern workflow for building modern applications. In this episode, we will create a little project on terminologies related to object-oriented programming (oop) that will help us explore the main features of Yeoman such as scaffolding, compiling into css and js, linting, starting a local web server, image optimisation and so much more!

Download video: mp4

Sample code: Github

Version: 0.9.6

Similar episodes: 002 Terminal, 009 Package Managers, 013 RequireJS, 021 GruntJS

##Background on Yeoman and Tools

  1. Main website, twitter, intro video
  2. installation

##Things to learn with Yeoman

####1. installing yeoman

  1. in the command line: curl -L get.yeoman.io | bash
  2. the installation will prompt you to install its pre-requisites as needed such as Homebrew, Command Line Tools for Xcode, Compass, Git, JPEGTran, NodeJS, npm, PhantomJS, Ruby, RubyGems, OptiPNG and yeoman itself.
  3. once installed check with yeoman --version
  4. with just yeoman or yeoman help you will also get a list of helpful commands
  5. yeoman init --help will show a list of projects to get started with

####2. starting a simple project in yeoman

  1. go to an empty project folder oop and yeoman init

    [?] Would you like to include Twitter Bootstrap for Compass instead of CSS? (Y/n) Y [?] Would you like to include the Twitter Bootstrap JS plugins? (Y/n) n [?] Would you like to include RequireJS (for AMD support)? (Y/n) n [?] Would you like to support writing ECMAScript 6 modules? (Y/n) n [?] Do you need to make any changes to the above before continuing? (y/N) N

  2. start the yeoman server with yeoman server

####3. add in plugins/components to the project

  1. yeoman list will list all plugins for the project - will be nil
  2. yeoman search to list packages available for install
  3. yeoman install prism to install prismjs for syntax highlighting
    • connect styles with <link rel="stylesheet" href="components/prism/prism.css">
    • connect scripts with <script src="components/prism/prism.js"></script>
  4. yeoman list will list prism now
  5. yeoman update will list
  6. tryout yeoman install <package> and then yeoman uninstall <package>

####4. prepare for production

  1. Ctrl + C to quit the running any server
  2. yeoman build to run Gruntfile.js - new folder dist created for production
  3. start server yeoman server:dist to view production ready app from the dist folder

##More Resources on Yeoman

  1. Say Yo to Yeoman from Nettuts
  2. Yeoman at your Service from Adobe
  3. Improved developer tooling and Yeoman by Addy Osmani
  4. The Breakpoint episode on Yeoman by Paul Lewis and Addy Osmani
  5. Web Application Development Workflow talk by Paul Irish

##More Resources on the episode project about Object Oriented Programming (OOP)

on oop:

  1. Python and OOP by Nettuts
  2. JavaScript and OOP by MDN
  3. PHP and OOP by Lynda
  4. OOP video explanation by CodeSchool.org
  5. OOP: A critical appraoch by Udemy blog

on building the project:

  1. prismjs for syntax highlighting

##Build Link of this Episode

The Breakpoint [youtube], a live show hosted by Paul Irish and Addy Osmani.