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

More Decks by Paul McMahon

Other Decks in Technology


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

  2. None
  3. None
  4. None
  5. None
  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

  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/