Intro to

@jimmay5469

jimmylauzau.com

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?

Intro to Ember

By Jimmy Lauzau

Made with Slides.com

Intro to Ember

Ember is a great tool once you know the basics. The infamous learning curve of the old days has improved drastically. Even then, convention can be difficult when you don't know what the conventions are. This talk should help get you running.

  • 1,619

More from Jimmy Lauzau