Why Ember.js?

Introduces the Ember.js framework, and why you might choose it over other frameworks like React and Angular.js.

Transcript

1. Why Ember.js? Paul McMahon Doorkeeperגࣜձࣾ @pwim
6. A framework for building ambitious web applications
7. Web Applications Designed for single page applications
8. Ambitious Built for teams of developers working together.
9. Framework Has everything you need to build a web application in one package.
10. You don't need to make trivial choices.
11. One ember app is structured like another.
12. Has a plugin architecture and is easy to extend and customize.
13. Building your first Ember Application npm install -g ember-cli@2.5 ember new ember-quickstart cd ember-quickstart ember serve
14. 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
15. 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.
16. A route in Ember import Ember from 'ember'; export default Ember.Route.extend({ model() { return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann']; } });
17. A template in Ember <h2>List of Scientists</h2> <ul> {{#each model as |scientist|}} <li>{{scientist}}</li> {{/each}} </ul>
18. Ember Data Models 1. Defining a model 2. Fetching / persisting via a REST API 3. Caching data locally 4. Computed properties
19. 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')}`; }) });
20. Fetching all records export default Ember.Route.extend({ model: function(params) { return this.store.findAll('scientist'); } });
21. Fetching a single record export default Ember.Route.extend({ model: function(params) { return this.store.findRecord('scientist', params.scientist_id) } });
22. Other features —Testing —Components —Services —Initializers —Add-ons —Adapters —Serializers
23. Thanks! —http://emberjs.com/ —https://trbmeetup.doorkeeper.jp/ —https://emberjs.doorkeeper.jp/ —https://machida-tech.doorkeeper.jp/