Slide 1
Slide 1 text
Why Ember.js?
Paul McMahon
Doorkeeperגࣜձࣾ
@pwim
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
A framework for building
ambitious web
applications
Slide 7
Slide 7 text
Web Applications
Designed for single page
applications
Slide 8
Slide 8 text
Ambitious
Built for teams of developers
working together.
Slide 9
Slide 9 text
Framework
Has everything you need to build a
web application in one package.
Slide 10
Slide 10 text
You don't need to make
trivial choices.
Slide 11
Slide 11 text
One ember app is
structured like another.
Slide 12
Slide 12 text
Has a plugin architecture
and is easy to extend and
customize.
Slide 13
Slide 13 text
Building your first Ember Application
npm install -g [email protected]
ember new ember-quickstart
cd ember-quickstart
ember serve
Slide 14
Slide 14 text
Create a route
ember generate route scientists
Output:
installing route
create app/routes/scientists.js
create app/templates/scientists.hbs
updating router
add route scientists
installing route-test
create tests/unit/routes/scientists-test.js
Slide 15
Slide 15 text
Create a route
1. An entry in the application's router which maps
the URL /scientists to a Route object.
2. A Route object that fetches the model and
renders a template.
3. A template to be displayed.
4. A unit test for this route.
Slide 16
Slide 16 text
A route in Ember
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
}
});
Slide 17
Slide 17 text
A template in Ember
List of Scientists
-
{{#each model as |scientist|}}
- {{scientist}} {{/each}}
Slide 18
Slide 18 text
Ember Data Models
1. Defining a model
2. Fetching / persisting via a REST API
3. Caching data locally
4. Computed properties
Slide 19
Slide 19 text
Example of defining a model
export default Model.extend({
familyName: attr("string"),
givenName: attr("string"),
birthdate: attr("date"),
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
Slide 20
Slide 20 text
Fetching all records
export default Ember.Route.extend({
model: function(params) {
return this.store.findAll('scientist');
}
});
Slide 21
Slide 21 text
Fetching a single record
export default Ember.Route.extend({
model: function(params) {
return this.store.findRecord('scientist', params.scientist_id)
}
});
Slide 22
Slide 22 text
Other features
—Testing
—Components
—Services
—Initializers
—Add-ons
—Adapters
—Serializers
Slide 23
Slide 23 text
Thanks!
—http://emberjs.com/
—https://trbmeetup.doorkeeper.jp/
—https://emberjs.doorkeeper.jp/
—https://machida-tech.doorkeeper.jp/