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:
- 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
Questions?
Intro to Ember
By Jimmy Lauzau
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,632