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:

Best places to find help:

Questions?