Learning Yeoman电子书

Learning Yeoman

Table of Contents

Learning Yeoman

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Modern Workflows for Modern Webapps

An overview of Yeoman

Yeoman's architecture

Node's package manager

Features of Yeoman

Quick installation

Installing Yeoman and friends

Installing a generator

Scaffolding with Yo

Creating the project

Invoking the generator

Directory structure

The build process

The Connect LiveReload server

Previewing the server

Package management with Bower

Code linting with JSHint

Automation

Testing with PhantomJS

Running tests

Optimizing for production

Self-test questions

Summary

2. Getting Started

Yo – generators

The Yeoman workflow

Official generators

The generator-webapp

Features

Installing the generator-webapp

Using the generator-webapp

Options

Example usage

Previewing

Conclusion

The generator-angular

Features

Installing the generator-angular

Using the generator-angular

Options

Example usage

Angular subgenerators

Previewing

Conclusion

The generator-backbone

Features

Installing the generator-backbone

Using the generator-backbone

Options

Example usage

Backbone subgenerators

Previewing

Conclusion

The generator-ember

Features

Installing the generator-ember

Using the generator-ember

Options

Example usage

Ember subgenerators

Previewing

Conclusion

Self-test questions

Summary

3. My Angular Project

Anatomy of an Angular project

Why Angular?

Creating a new Angular project

Installing the generator-angular

Scaffolding the application

Understanding the directory structure

Configuring the application

Creating the application definition

Creating the application controller

Creating the application views

Modifying the application's index.html

Creating Angular partials

Creating the application's header

Creating the application's footer

Customizing the main view

Previewing the application

Testing an Angular application

Angular unit tests

Configuring the Karma Runner

Running unit tests

End-to-end tests with Protractor

Configuring Protractor

Creating Protractor e2e spec

Angular controllers

Creating controllers

Using controllers

Testing controllers

Angular services

Creating services

Using services

Testing services

Angular filters

Creating filters

Using filters

Testing filters

Angular directives

Creating directives

Using directives

Testing directives

Angular views

Creating the Angular views

Creating the posts list

Creating the post-header view

Self-test questions

Summary

4. My Backbone Project

Anatomy of the Backbone project

The new Backbone project

Installing the generator-backbone

Scaffolding a Backbone application

Understanding the directory structure

Configuring the application

Scaffolding the app view

The Backbone app view

The Handlebars app template

Scaffolding the main view

The Backbone main view

The Handlebars main template

Scaffolding the app router

Bootstrapping the app

Previewing the app

Testing

Configuration

Unit testing

End-to-end tests

Backbone.Events

Creating events

Using events

Testing events

Backbone.Model

Scaffolding models

Using the Backbone models

Creating a model

Updating a model

Saving a model

Destroying a model

Validating a model

Testing a model

Backbone.Collection

Creating collections

Using collections

Testing collections

The Backbone view

Creating views

Using views

Testing views

Backbone.Router

Creating routers

Using routers

Testing routers

Self-test questions


Summary

5. My Ember Project

Anatomy of the Ember project

The new Ember project

Installing the generator-ember

Scaffolding the application

Understanding the directory structure

Application configuration

Application definition

The application template

The index template

The feature component

Previewing the application

Testing

The test helpers

Setup

End-to-end integration tests

Unit tests

Ember Data

Ember Data concepts

Models

Creating a model

Methods

Attributes

Fixtures

Records

Finding all records

Finding a single record

Creating a record

Deleting a record

Routes

Creating the routes

Using routes

Posts route

Post route

Posts edit route

Templates

Handlebar helpers

Posts template

Post template

Posts edit template

Controllers

Post edit controller

Self-test questions

Summary

6. Custom Generators

Anatomy of a generator

Types of generators

The new custom generator

Installing the generator-generator

Using generator-generator

Understanding the directory structure

Adding logic to the generator

Initializing the generator

Asking questions to the user

Copying the project files

Copying the application files and folders

Installing dependencies with Bower

Creating custom templates

Creating the Gruntfile.js file

Creating the watch task

Creating the serve task

Creating the bowerInstall task

Registering tasks in Gruntfile.js

Creating the package.json file for npm

Creating the .editorconfig file for IDEs

Creating the .jshintrc file for JSHint

Creating the .travis.yml file for Travis CI

The .gitattributes file for Git

The .gitignore file for Git

Creating the .bowerrc file for Bower

Creating the bower.json file for Bower

Creating the application templates

The index.html file

The main.css file

The main.js file

Testing a custom generator

Setup

Testing the generator output

Test generator loading

The new custom subgenerator

Understanding the subgenerator's directory structure

Creating subgenerator templates

Adding logic to the subgenerator

Using your custom generator

Link your generator

Scaffolding a new webapp

Self-test questions

Summary

7. Custom Libraries

The new CommonJS project

Installing the generator-commonjs

Scaffolding a CommonJS project

The CommonJS logic

Module properties

Connecting to MongoDB

Finding all models

Finding a model

Creating a model

Updating a model

Destroying a model

Testing a CommonJS project

Test for no model

Test finding all models

Test finding one model

Test creating a model

Test updating a model

Test destroying a model

Deploying to npm

Conclusion

The new Node.js module project

Installing the generator-node

Scaffolding a Node.js module project

The Node.js module logic

Testing a Node.js module

Deploying

Conclusion

The new jQuery project

Installing the generator-jquery

Scaffolding a jQuery project

Adding the plugin logic

Testing a jQuery plugin

Creating the unit test

Deploying to Bower

Conclusion

Self-test questions

Summary

8. Tasks with Grunt

Overview on GruntJS

Installing the Grunt CLI

Installing Grunt

Grunt usage

Grunt options

Installing the generator-gruntfile

Using Grunt

The package.json file

The Gruntfile.js file

Loading tasks

Creating the alias tasks

Multiple target tasks

Registering the basic tasks

Options – files

Options – file patterns

Options – dynamic patterns

Options – templates

Options – importing data

The new project

My custom Grunt plugin

Installing the generator-gruntplugin

Usage

The directory structure

The Grunt plugin logic

Plugin options

Using Grunt to read files

Using Grunt to write files

Testing a Grunt plugin

Creating test fixtures

Running the tests

Deploying to npm

Usage

Self-test questions

Summary

9. Yeoman Tips and Tricks

Webapp generator solutions

Creating a RESTful Node.js server

Installing module dependencies

Creating the server

Configuring the server

Configuring the data source

Defining server routes

The default route

GET – fetch the posts route

POST – create the post route

GET – a single post route

PUT – update the post route

DELETE – remove the post route

Starting the server

Running the server

Testing the server

Setting up the proxy server

Configuring the proxy server

Conclusion

Angular generator solutions

Protractor e2e testing

Installing Protractor

Installing the grunt-protractor-runner

Configuring the Protractor task

Creating the Protractor configuration

Creating an e2e spec

The MainPage object

The PostPage object

The e2e spec

Starting the Selenium WebDriver

Starting the application

Running e2e tests

Backbone generator solutions

Code coverage with Karma

Installing Karma and plugins

Karma configuration

Configuring test-main.js

Running tests

Code coverage report

Self-test questions

Summary

A. Yeoman Resources

Reference guides

Yo – the scaffolding tool

Usage

Bower – the package tool

Usage

Commands

Options

Grunt – the build tool

Usage

Options

Git

Usage

Commands

Jasmine – behavior-driven JavaScript

Structure of a suite

Matchers

Spy matchers

Reserved words

Installation guides

Installing Git

Installing Git on Windows

Installing Git on Mac

Installing Node.js and npm

Installing Node on Windows

Installing Node on Mac

Installing Yo

Installing Yo on Mac/Windows

Installing Grunt

Installing Grunt on Mac/Windows

Installing Bower

Installing Bower on Mac/Windows

Self-test answers

Chapter 1, Modern Workflows for Modern Webapps

Chapter 2, Getting Started

Chapter 3, My Angular Project

Chapter 4, My Backbone Project

Chapter 5, My Ember Project

Chapter 6, Custom Generators

Chapter 7, Custom Libraries

Chapter 8, Tasks with Grunt

Chapter 9, Yeoman Tips and Tricks

Summary

Index