Welcome to Ember-CLI 101 workshop hosted by San Diego Ember.

Pre-event setup instructions

  1. Install Git
  2. Install Node.js
  3. Setup NPM for non-sudo installation
    1. The easiest way to do this is by checking out this awesome shell script that will do it for you
    2. NPM is the node package manager. It will automatically be installed when you install node.
    3. NPM installs packages locally (within the directory it is invoked in) for per-project modules, or globally for packages you want accessible everywhere.
    4. However, by default NPM installs global packages in a root-restricted location, requiring SUDO to install. This creates a huge headache. As an alternative, before you install any packages, follow this guide to configure your NPM to install in your home directory without requiring sudo.
  4. Install Bower: npm i -g bower
  5. Install Ember-CLI: npm i -g ember-cli
  6. And create a new project named workshop: ember new workshop
  7. Move into the workshop directory: cd workshop

Reduce the glue

Web application development can involve a lot of repetition. Attempts to reduce the repetition involved in web development has given rise to a variety of scaffolding tools and best practices. These scaffolding tools are all trying to do the same thing: reduce the amount of work necessary to "get started" by providing a set of "best practices" that are enabled default. These choices include things like:

  1. Application directory structure
  2. Generators for common components
  3. Modularity choices (AMD/node modules/etc)
  4. Build system
  5. Asset compilation & minification
  6. Testing framework and setup

Ember-CLI

Ember-CLI provides choices for all of the aforementioned areas. We'll dive into some of these choices in more detail later but at a high level Ember-CLI builds in:

  1. A directory structure which we'll explore more later
  2. Generators for all common components
  3. ES6 modules transpiled to AMD
  4. Broccoli build tool for builds. (Fast and extensible with plugin architecture
  5. Asset minification also via Broccoli
  6. QUnit for testing

Modules

Modules allow you to divide logical portions of code into smaller, functional pieces and include them as needed. As your application grows, smaller pieces of functional code become easier to manage, support, maintain and test. To learn more about JS Modules, check out jsmodules.io

Naming best practices

  1. Code
    1. TitleCase naming of classes
    2. camelCase naming of attributes
    3. use modules, avoid globals
    4. reusable code → components, mixins, add-ons
  2. Files
    1. kebab-case-naming.js
    2. children in subdirectory → routes/invoices/edit.js & routes/invoices/new.js