Intro to

Hi, I'm Jimmy!

jimmay5469

Lets learn to

$ npm install -g ember-cli

$ ember new ember-twitter

All ember-cli commands begin with `ember`

`new` will create a new directory for your project, a git repository, and make the first commit for you

The name of your project, typically hyphenated

Author: Tomster <tomster@emberjs.com>
Date:   Wed Apr 13 12:00:00 2016 -0400

    Initial Commit from Ember CLI v2.4.3

                                                            _...,
                                                         ,:^;,...;
                  -+===;.         ,,--++====++-,,,     .:  /.....,
                :::::~+++++#:,+#++++++++++++++++++#*..:   /,......
               (,,,,,,::=+++##++++++++++++++++++++++#.   :....../
                ...,,,,,::++++++++++++++++++++++++++++++*..,...:
                *..+...,#@@@@@@@@@++++++++++++++++++++++#*....*
                  @#,;##############@@@+*+#@@@@@@@@@@#*++#..<
                  *@##@@+,-*^^^*-+@####@@@######@@@#####@@,,,+
                    @#@*            @#@@@@#@@+--*^^*--#@@@@@@#
                    @#@.    @#      @##+++@#,           .@@#@@
                     #@#    @@     +@@++++#@@     @@     :@@
                     :@#*         @#@++++++@#*    #@     @@+
                    :*+@@#;,.__.+@#@+,-^^.++@#          @@++
                   ;*  :*@@@##@@@@;++r._j^.+@##@+,.__,,@@++.
                  /*    ........+++++++++++++#@@@@@###@@#++++,
                ,:       ...,@@@#++===----==@@@####,,....+++++
               .:       ......@@##@\   ;   :@####@,,...... +++.
               ;       .........@###,   ;  ;xx#@;,,.....   *;+,
               |       ........,*;xxxx--^--=xxx,........   :+#;
               ;         ......,,;xxxxxxxxxxxxx;,.....     *+#
                ;          ......,::xxxx;.     ......       +.   .
                 *;            .........  +###  ....       / ,. /:| ,.
                   .+:             ...  ;##++##, .      ,#. (..v..;*./
                      **                ##  ###*    .:*&&&+. \.,....<,
                       #&+**==-..,,__  ;##  ###  :,*+&&&&&&&v+#&,,.._/
                      #&&&&*...,::,,.  ##; ,##* .*****;:&&&&&&&&&
                     ,+*+;~*..*** *.* ### ###* *******    *+#&;*
                                      ##,;##    ****    :,  **
             #####    ##   ###  ###,  ########       .#####   ;##  ##
            #######  ;##  #### ,###.  ##########    ########  ### ####
           ###  ###  ### ##########   ####  ####   ,##   ###  #######*
          ### ,###  ##############:   ##     ###  #### ,##   :#### ###  ##;
      ##########    ########### ##   .##    ,###  #######    ##### :######
        ######    .###### ####  ##   ###    ### ######*    :#####   ####
           #############  ####  ################    ######## ###
            #####*  *#*    #:   :###   *###*         *####    #*

$ ember new ember-twitter

app/
  components/
  controllers/
  helpers/
  models/
  routes/
  styles/
    app.css
  templates/
    components/
    application.hbs
  app.js
  index.html
  resolver.js
  router.js
config/
  environment.js
public/
tests/
vendor/
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.travis.yml
.watchmanconfig
README.md
bower.json
ember-cli-build.js
package.json
testem.js

<h2 id="title">Welcome to Ember</h2>

{{outlet}}

# Ember-twitter

This README outlines the details of collaborating on this Ember application.
A short introduction of this app could easily go here.

## Prerequisites

You will need the following things properly installed on your computer.

* [Git](http://git-scm.com/)
* [Node.js](http://nodejs.org/) (with NPM)
* [Bower](http://bower.io/)
* [Ember CLI](http://ember-cli.com/)
* [PhantomJS](http://phantomjs.org/)

## Installation

* `git clone <repository-url>` this repository
* change into the new directory
* `npm install`
* `bower install`

## Running / Development

* `ember server`
* Visit your app at [http://localhost:4200](http://localhost:4200).

### Code Generators

Make use of the many generators for code, try `ember help generate` for more details

### Running Tests

* `ember test`
* `ember test --server`

### Building

* `ember build` (development)
* `ember build --environment production` (production)

### Deploying

Specify what it takes to deploy your app.

## Further Reading / Useful Links

* [ember.js](http://emberjs.com/)
* [ember-cli](http://ember-cli.com/)
* Development Browser Extensions
  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

$ ember server

(or `ember s`)

$ ember server

$ ember server
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Build successful - 6910ms.

Slowest Trees                                 | Total
----------------------------------------------+---------------------
Babel                                         | 2893ms
Babel                                         | 1936ms
Babel                                         | 448ms

Slowest Trees (cumulative)                    | Total (avg)
----------------------------------------------+---------------------
Babel (12)                                    | 6089ms (507 ms)

auto-reload comes free
hot-loading styles comes free now too

$ ember generate component tweet-list-item

components names must be 2+ words, hyphenated

$ ember generate component tweet-list-item

$ ember generate component tweet-list-item
installing component
  create app/components/tweet-list-item.js
  create app/templates/components/tweet-list-item.hbs
installing component-test
  create tests/integration/components/tweet-list-item-test.js

// app/components/tweet-list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
});

{{!-- app/templates/components/tweet-list-item.hbs --}}

{{yield}}

$ ember generate component tweet-list-item

// app/components/tweet-list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tweet: null,
  onDelete: null,

  author: Ember.computed.alias('tweet.author'),

  canDelete: Ember.computed('author', {
    get() {
      return this.get('author') === 'jimmay5469';
    }
  }),

  actions: {
    delete() {
      this.onDelete(this.get('tweet'));
    }
  }
});

{{!-- app/templates/components/tweet-list-item.hbs --}}

<div class='author'>
  {{author}}
</div>
<div class='text'>
  {{tweet.text}}
</div>
{{#if canDelete}}
  <button onclick={{action 'delete'}}>
    Delete
  </button>
{{/if}}

Templates have objects they are bound to.

$ ember generate component tweet-list-item

{{!-- app/templates/application.hbs --}}

<h2 id="title">Tweets</h2>

{{#each model as |tweet|}}
  {{tweet-list-item tweet=tweet onDelete=(action 'removeTweet')}}
{{/each}}

{{outlet}}

But, what object is application.hbs bound to if templates are all bound to objects?

How to use a component:

$ ember g controller application

Shorthand for `ember generate`

$ ember g controller application

// app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: null,

  actions: {
    removeTweet() {
      ...
    }
  }
});

{{!-- app/templates/application.hbs --}}

<h2 id="title">Tweets</h2>

{{#each model as |tweet|}}
  {{tweet-list-item tweet=tweet onDelete=(actino 'removeTweet')}}
{{/each}}

{{outlet}}

So how does the model property get filled in?

$ ember g route tweets

These, like controllers, are lowercase and hyphenated
Unlike components, they do not require more than one word
The route name, template name, and controller name much match exactly

While we're at it lets move our tweet list to a more appropriate place...

$ ember g route tweets

$ ember g route tweets
installing route
  create app/routes/tweets.js
  create app/templates/tweets.hbs
updating router
  add route tweets
installing route-test
  create tests/unit/routes/tweets-test.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.query('tweets', { top: 100 });
  },
  actions: {
    removeTweet() {
      ...
    }
  }
});

...
Router.map(function() {
+  this.route('tweets');
});
...

The model hook is a special hook which sets its result to the model property on the controller.

$ ember g controller application

// app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: null,

  actions: {
    removeTweet() {
      ...
    }
  }
});

{{!-- app/templates/application.hbs --}}

<h2 id="title">Tweets</h2>

{{#each model as |tweet|}}
  {{tweet-list-item tweet=tweet onDelete=removeTweet}}
{{/each}}

{{outlet}}

$ ember g route tweets/detail

Nested routes have a `/` in the name

$ ember g route tweets/detail

{{!-- app/templates/tweets.hbs --}}

<h2 id="title">Tweets</h2>

{{#each model as |tweet|}}
  {{tweet-list-item tweet=tweet onDelete=removeTweet}}
{{/each}}

{{outlet}}

{{!-- app/templates/tweets/detail.hbs --}}

<h2 id="title">Tweets</h2>

{{#modal-dialog}}
  <div class='author'>
    {{model.author}}
  </div>
  <div class='text'>
    {{model.text}}
  </div>
  {{#each model.comments as |comment|}}
    {{comment-list-item comment=comment}}
  {{/each}}
{{/modal-dialog}}

{{outlet}}

$ ember generate component tweet-list-item

$ ember generate component tweet-list-item
installing component
  create app/components/tweet-list-item.js
  create app/templates/components/tweet-list-item.hbs
installing component-test
  create tests/integration/components/tweet-list-item-test.js

// app/components/tweet-list-item.js

import Ember from 'ember';

export default Ember.Component.extend({
});

{{!-- app/templates/components/tweet-list-item.hbs --}}

{{yield}}

$ ember g service auth

$ ember g service auth

import Ember from 'ember';

export default Ember.Service.extend({
  mostAwesomeAuth: Ember.inject.service('auth')
});

import Ember from 'ember';

export default Ember.Route.extend({
  auth: Ember.inject.service()
});

import Ember from 'ember';

export default Ember.Controller.extend({
  authService: Ember.inject.service('auth')
});

import Ember from 'ember';

export default Ember.Service.extend({
  isAuthenticated: Ember.computed.notEmpty('user'),

  user: null
});

$ ember install ember-cli-sass

$ ember install ember-cli-sass

In addition to generators, ember-cli provides addon support, backed by npm and bower
While we're at it lets `ember install ember-cli-autoprefixer`

$ ember install ember-power-select

$ ember install ember-power-select

You can also install ui controls, go to emberobserver.com to find addons
Other common addons
- ember-simple-auth - authentication
- ember-cli-mirage - testing api fakes
- ember-cli-deploy - deployment

Other things you should know:

Models

Adapters

$ ember g model tweet

$ ember g adapter application

Acceptance tests

$ ember g acceptance-test tweets/detail

Integration tests

// included when using `ember g component`

Helpful tools:

Ember Inspector

Ember Twiddle

Best places to find help:

Ember guides: https://guides.emberjs.com/
Ember api docs: http://emberjs.com/api/
Ember CLI docs: http://ember-cli.com/
Ember discussion forum: http://discuss.emberjs.com/
Blogs (make sure to check the post date)
EmberJS Community Slack
#emberjs room in Cincy Tech Slack