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/