Why Ember.js? Paul McMahon Doorkeeperגࣜձࣾ @pwim

No content

No content

No content

No content

A framework for building ambitious web applications

Web Applications Designed for single page applications

Ambitious Built for teams of developers working together.

Framework Has everything you need to build a web application in one package.

You don't need to make trivial choices.

One ember app is structured like another.

Has a plugin architecture and is easy to extend and customize.

Building your first Ember Application npm install -g ember-cli@2.5 ember new ember-quickstart cd ember-quickstart ember serve

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

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.

A route in Ember import Ember from 'ember'; export default Ember.Route.extend({ model() { return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann']; } });

A template in Ember

List of Scientists

{{#each model as |scientist|}}
• {{scientist}}
{{/each}}

Ember Data Models 1. Defining a model 2. Fetching / persisting via a REST API 3. Caching data locally 4. Computed properties

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')}`; }) });

Fetching all records export default Ember.Route.extend({ model: function(params) { return this.store.findAll('scientist'); } });

Fetching a single record export default Ember.Route.extend({ model: function(params) { return this.store.findRecord('scientist', params.scientist_id) } });

Other features —Testing —Components —Services —Initializers —Add-ons —Adapters —Serializers

Thanks! —http://emberjs.com/ —https://trbmeetup.doorkeeper.jp/ —https://emberjs.doorkeeper.jp/ —https://machida-tech.doorkeeper.jp/