You are previewing Learning Yeoman.
O'Reilly logo
Learning Yeoman

Book Description

Design, implement, and deliver a successful modern web application project using three powerful tools in the Yeoman workflow

In Detail

We will explore the options and subgenerators available with the four most popular office generators, AngularJS Backbone.js, Ember.js, and webapp. You'll learn how to use these tools in web application development and create or integrate this streamlined workflow into new or existing projects. We will then explore the AngularJS framework and learn how to use the Yeoman Angular generator to create an AngularJS web application.

Next, we move on to learning about the concepts of the Backbone.js and Ember.js libraries and how it fits into application development and why it's useful for you. By the end of the book, you will have a good understanding of the available Yeoman resources and how to troubleshoot issues that might occur when using the Yeoman workflow tools and ecosystem.

What You Will Learn

  • Rediscover your workflow with the power of Yo, Bower, and Grunt
  • Use Yo, the scaffold tool, to create parts of your app from boilerplate templates
  • Use Bower, the package tool, to search, install, and update your client-side dependencies
  • Use Grunt, the build tool, to automate repetitive tasks by linting, previewing, and testing
  • Use the Grunt API to create custom tasks that can be shared between projects
  • Create custom libraries using community best practice templates that are published to Bower and npm
  • Utilize the Yeoman API to create testable custom generators that run in the Node.js environment
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Learning Yeoman
      1. Table of Contents
      2. Learning Yeoman
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Modern Workflows for Modern Webapps
        1. An overview of Yeoman
          1. Yeoman's architecture
            1. Node's package manager
          2. Features of Yeoman
          3. Quick installation
            1. Installing Yeoman and friends
            2. Installing a generator
          4. Scaffolding with Yo
            1. Creating the project
            2. Invoking the generator
            3. Directory structure
          5. The build process
          6. The Connect LiveReload server
            1. Previewing the server
          7. Package management with Bower
          8. Code linting with JSHint
          9. Automation
          10. Testing with PhantomJS
            1. Running tests
          11. Optimizing for production
        2. Self-test questions
        3. Summary
      9. 2. Getting Started
        1. Yo – generators
          1. The Yeoman workflow
          2. Official generators
          3. The generator-webapp
            1. Features
            2. Installing the generator-webapp
            3. Using the generator-webapp
            4. Options
            5. Example usage
            6. Previewing
            7. Conclusion
          4. The generator-angular
            1. Features
            2. Installing the generator-angular
            3. Using the generator-angular
            4. Options
            5. Example usage
            6. Angular subgenerators
            7. Previewing
            8. Conclusion
          5. The generator-backbone
            1. Features
            2. Installing the generator-backbone
            3. Using the generator-backbone
            4. Options
            5. Example usage
            6. Backbone subgenerators
            7. Previewing
            8. Conclusion
          6. The generator-ember
            1. Features
            2. Installing the generator-ember
            3. Using the generator-ember
            4. Options
            5. Example usage
            6. Ember subgenerators
            7. Previewing
            8. Conclusion
        2. Self-test questions
        3. Summary
      10. 3. My Angular Project
        1. Anatomy of an Angular project
          1. Why Angular?
          2. Creating a new Angular project
            1. Installing the generator-angular
            2. Scaffolding the application
              1. Understanding the directory structure
            3. Configuring the application
            4. Creating the application definition
            5. Creating the application controller
            6. Creating the application views
              1. Modifying the application's index.html
              2. Creating Angular partials
              3. Creating the application's header
              4. Creating the application's footer
            7. Customizing the main view
            8. Previewing the application
          3. Testing an Angular application
            1. Angular unit tests
              1. Configuring the Karma Runner
              2. Running unit tests
            2. End-to-end tests with Protractor
              1. Configuring Protractor
              2. Creating Protractor e2e spec
          4. Angular controllers
            1. Creating controllers
            2. Using controllers
            3. Testing controllers
          5. Angular services
            1. Creating services
            2. Using services
            3. Testing services
          6. Angular filters
            1. Creating filters
            2. Using filters
            3. Testing filters
          7. Angular directives
            1. Creating directives
            2. Using directives
            3. Testing directives
          8. Angular views
            1. Creating the Angular views
              1. Creating the posts list
              2. Creating the post-header view
        2. Self-test questions
        3. Summary
      11. 4. My Backbone Project
        1. Anatomy of the Backbone project
        2. The new Backbone project
          1. Installing the generator-backbone
          2. Scaffolding a Backbone application
            1. Understanding the directory structure
          3. Configuring the application
          4. Scaffolding the app view
            1. The Backbone app view
            2. The Handlebars app template
          5. Scaffolding the main view
            1. The Backbone main view
              1. The Handlebars main template
          6. Scaffolding the app router
          7. Bootstrapping the app
          8. Previewing the app
        3. Testing
          1. Configuration
          2. Unit testing
          3. End-to-end tests
        4. Backbone.Events
          1. Creating events
          2. Using events
          3. Testing events
        5. Backbone.Model
          1. Scaffolding models
          2. Using the Backbone models
            1. Creating a model
            2. Updating a model
            3. Saving a model
            4. Destroying a model
            5. Validating a model
          3. Testing a model
        6. Backbone.Collection
          1. Creating collections
          2. Using collections
          3. Testing collections
        7. The Backbone view
          1. Creating views
          2. Using views
          3. Testing views
        8. Backbone.Router
          1. Creating routers
          2. Using routers
          3. Testing routers
        9. Self-test questions

        10. Summary
      12. 5. My Ember Project
        1. Anatomy of the Ember project
        2. The new Ember project
          1. Installing the generator-ember
          2. Scaffolding the application
          3. Understanding the directory structure
          4. Application configuration
          5. Application definition
          6. The application template
          7. The index template
          8. The feature component
          9. Previewing the application
        3. Testing
          1. The test helpers
          2. Setup
          3. End-to-end integration tests
          4. Unit tests
        4. Ember Data
          1. Ember Data concepts
        5. Models
          1. Creating a model
          2. Methods
          3. Attributes
          4. Fixtures
        6. Records
          1. Finding all records
          2. Finding a single record
          3. Creating a record
          4. Deleting a record
        7. Routes
          1. Creating the routes
          2. Using routes
          3. Posts route
          4. Post route
          5. Posts edit route
        8. Templates
          1. Handlebar helpers
          2. Posts template
          3. Post template
          4. Posts edit template
        9. Controllers
          1. Post edit controller
        10. Self-test questions
        11. Summary
      13. 6. Custom Generators
        1. Anatomy of a generator
          1. Types of generators
        2. The new custom generator
          1. Installing the generator-generator
          2. Using generator-generator
          3. Understanding the directory structure
          4. Adding logic to the generator
            1. Initializing the generator
            2. Asking questions to the user
            3. Copying the project files
            4. Copying the application files and folders
            5. Installing dependencies with Bower
          5. Creating custom templates
            1. Creating the Gruntfile.js file
              1. Creating the watch task
              2. Creating the serve task
              3. Creating the bowerInstall task
              4. Registering tasks in Gruntfile.js
            2. Creating the package.json file for npm
            3. Creating the .editorconfig file for IDEs
            4. Creating the .jshintrc file for JSHint
            5. Creating the .travis.yml file for Travis CI
            6. The .gitattributes file for Git
            7. The .gitignore file for Git
            8. Creating the .bowerrc file for Bower
            9. Creating the bower.json file for Bower
            10. Creating the application templates
              1. The index.html file
              2. The main.css file
              3. The main.js file
          6. Testing a custom generator
            1. Setup
            2. Testing the generator output
            3. Test generator loading
        3. The new custom subgenerator
          1. Understanding the subgenerator's directory structure
          2. Creating subgenerator templates
          3. Adding logic to the subgenerator
          4. Using your custom generator
            1. Link your generator
            2. Scaffolding a new webapp
        4. Self-test questions
        5. Summary
      14. 7. Custom Libraries
        1. The new CommonJS project
          1. Installing the generator-commonjs
          2. Scaffolding a CommonJS project
          3. The CommonJS logic
            1. Module properties
            2. Connecting to MongoDB
            3. Finding all models
            4. Finding a model
            5. Creating a model
            6. Updating a model
              1. Destroying a model
          4. Testing a CommonJS project
            1. Test for no model
            2. Test finding all models
            3. Test finding one model
            4. Test creating a model
            5. Test updating a model
            6. Test destroying a model
          5. Deploying to npm
          6. Conclusion
        2. The new Node.js module project
          1. Installing the generator-node
          2. Scaffolding a Node.js module project
          3. The Node.js module logic
          4. Testing a Node.js module
          5. Deploying
          6. Conclusion
        3. The new jQuery project
          1. Installing the generator-jquery
          2. Scaffolding a jQuery project
          3. Adding the plugin logic
            1. Testing a jQuery plugin
            2. Creating the unit test
          4. Deploying to Bower
          5. Conclusion
        4. Self-test questions
        5. Summary
      15. 8. Tasks with Grunt
        1. Overview on GruntJS
        2. Installing the Grunt CLI
          1. Installing Grunt
            1. Grunt usage
            2. Grunt options
          2. Installing the generator-gruntfile
          3. Using Grunt
            1. The package.json file
            2. The Gruntfile.js file
            3. Loading tasks
            4. Creating the alias tasks
            5. Multiple target tasks
            6. Registering the basic tasks
              1. Options – files
              2. Options – file patterns
              3. Options – dynamic patterns
              4. Options – templates
              5. Options – importing data
          4. The new project
        3. My custom Grunt plugin
          1. Installing the generator-gruntplugin
          2. Usage
          3. The directory structure
          4. The Grunt plugin logic
            1. Plugin options
            2. Using Grunt to read files
            3. Using Grunt to write files
          5. Testing a Grunt plugin
            1. Creating test fixtures
            2. Running the tests
          6. Deploying to npm
          7. Usage
        4. Self-test questions
        5. Summary
      16. 9. Yeoman Tips and Tricks
        1. Webapp generator solutions
          1. Creating a RESTful Node.js server
            1. Installing module dependencies
            2. Creating the server
            3. Configuring the server
            4. Configuring the data source
            5. Defining server routes
              1. The default route
              2. GET – fetch the posts route
              3. POST – create the post route
              4. GET – a single post route
              5. PUT – update the post route
              6. DELETE – remove the post route
            6. Starting the server
            7. Running the server
            8. Testing the server
            9. Setting up the proxy server
              1. Configuring the proxy server
          2. Conclusion
        2. Angular generator solutions
          1. Protractor e2e testing
            1. Installing Protractor
            2. Installing the grunt-protractor-runner
            3. Configuring the Protractor task
            4. Creating the Protractor configuration
            5. Creating an e2e spec
              1. The MainPage object
              2. The PostPage object
              3. The e2e spec
            6. Starting the Selenium WebDriver
            7. Starting the application
            8. Running e2e tests
        3. Backbone generator solutions
          1. Code coverage with Karma
            1. Installing Karma and plugins
            2. Karma configuration
            3. Configuring test-main.js
            4. Running tests
            5. Code coverage report
        4. Self-test questions
        5. Summary
      17. A. Yeoman Resources
        1. Reference guides
          1. Yo – the scaffolding tool
            1. Usage
          2. Bower – the package tool
            1. Usage
            2. Commands
            3. Options
          3. Grunt – the build tool
            1. Usage
            2. Options
          4. Git
            1. Usage
            2. Commands
          5. Jasmine – behavior-driven JavaScript
            1. Structure of a suite
            2. Matchers
            3. Spy matchers
            4. Reserved words
        2. Installation guides
          1. Installing Git
            1. Installing Git on Windows
            2. Installing Git on Mac
          2. Installing Node.js and npm
            1. Installing Node on Windows
            2. Installing Node on Mac
          3. Installing Yo
            1. Installing Yo on Mac/Windows
          4. Installing Grunt
            1. Installing Grunt on Mac/Windows
          5. Installing Bower
            1. Installing Bower on Mac/Windows
        3. Self-test answers
          1. Chapter 1, Modern Workflows for Modern Webapps
          2. Chapter 2, Getting Started
          3. Chapter 3, My Angular Project
          4. Chapter 4, My Backbone Project
          5. Chapter 5, My Ember Project
          6. Chapter 6, Custom Generators
          7. Chapter 7, Custom Libraries
          8. Chapter 8, Tasks with Grunt
          9. Chapter 9, Yeoman Tips and Tricks
        4. Summary
      18. Index