Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why Ember.js?

Why Ember.js?

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

Paul McMahon

May 24, 2016
Tweet

More Decks by Paul McMahon

Other Decks in Technology

Transcript

  1. Building your first Ember Application npm install -g [email protected] ember

    new ember-quickstart cd ember-quickstart ember serve
  2. 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
  3. 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.
  4. A route in Ember import Ember from 'ember'; export default

    Ember.Route.extend({ model() { return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann']; } });
  5. A template in Ember <h2>List of Scientists</h2> <ul> {{#each model

    as |scientist|}} <li>{{scientist}}</li> {{/each}} </ul>
  6. Ember Data Models 1. Defining a model 2. Fetching /

    persisting via a REST API 3. Caching data locally 4. Computed properties
  7. 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')}`; }) });
  8. Fetching a single record export default Ember.Route.extend({ model: function(params) {

    return this.store.findRecord('scientist', params.scientist_id) } });