1. dsNo1

Group Members:
1. (Leader)Zijun Wang(@ZijunWang810)
2. Jia Gao(@gaojia1999)
3. Huachen Gao(@GaoHchen)
4. Jiaming Gu(@olivergu6657688)
5. Kaixun Jiang (@deep-kaixun)
6. Weize Kong(@kongkk233)
7. Lihao Sun(@sunlihao2018)
8. Xiaonan Zhao(@voidzx123)
9. Yangbohan Miao(@S1mp13)
10. Tianhao Sun (@stickice)

• HISTORY
• OVERVIEW
• DESIGN PHILOSOPHY
• CORE CONCEPTS
• FUTURE DEVELOPMENT
• REFERENCES
• DIVISION of WORK

In December 2011, the SproutCore 2.0 framework was renamed to Ember.js, to reduce confusion between the application framework and the widget library of SproutCore 1.0. The framework was created by Yehuda Katz, a member of the jQuery, Ruby on Rails and SproutCore core teams. Like many of Katz's other projects, it advocates convention over configuration.

Ember.js is an open source JavaScript client framework for developing web applications and using the MVC (Model-View-Controller) architecture pattern. The original name of Ember.js is the Sproutcore MVC framework.
Ember is used on many popular websites, including Apple Music, Square, Inc., Discourse, Groupon, LinkedIn, Vine, Live Nation, Nordstrom, Twitch, and Chipotle.Although Ember was primarily considered as a framework for the web, it is also possible to build desktop and mobile applications in Ember. The most notable example of an Ember desktop application is Apple Music, a feature of the iTunes desktop application. The Ember trademark is owned by Tilde Inc.

There are several key ideas:

Ember is committed to providing a comprehensive solution to client-side-application problems. This is in sharp contrast to many JavaScript frameworks that first provide a solution for V in MVC(Model-View-Controller) and then try to develop from it.

Ember is part of a set of tools that together provide a complete development stack. The purpose of these tools is for developers to improve their work efficiency immediately. For example, the Ember CLI provides a standard application architecture and build pipeline. It also has a pluggable architecture and more than 3500 plug-ins to enhance and extend it. This is the view that backward compatibility is very important, which can be maintained while continuously innovating and developing the framework.

Ember is an early adopter and pioneer of many standards around JavaScript and the web, including promises, web components, and ES6 syntax. Yehuda Katz is one of Ember’s cofounders and a member of TC39, the committee responsible for the future version of the JavaScript language. Like ruby on rails, Ember follows Convention over Configuration(CoC) and the Don't Repeat Yourself(DRY). It is described as a highly opinionated framework, which is very flexible to build.

At its core, Ember's UIs are HTML driven - every part of the UI that is shown to the user is defined in an HTML template somewhere in your application. Because of this, templates are central to Ember, and one of the most important parts of the framework.
Ember consists of five key concepts:

A component is a custom HTML tag. Behavior is implemented using JavaScript and its appearance is defined using HTMLBars templates. Components "own" their data. They can also be nested and can communicate with their parent components through actions (events). Other component libraries such as Polymer can also be used with Ember.

• A example:

The central template in an Ember application is the app/templates/application.hbs file.We can copy HTML into this file, and it will work without any changes. For instance, you can copy the following example HTML for a simple messaging app:

app/templates/application.hbs

<div class="messages">
  <aside>
    <div class="avatar is-active" title="Dssdad's avatar">dd</div>
  </aside>
  <section>
    <h4 class="username">
      Dssdad
      <span class="local-time">their local time is 6:66pm</span>
    </h4>

    <p>
      Hey Ds, have you had a chance to look at the EmberConf brainstorming doc
      I sent you?
    </p>
  </section>

  <aside class="current-user">
    <div class="avatar" title="Ds's avatar">d</div>
  </aside>
  <section>
    <h4 class="username">Ds</h4>

    <p>Hey!</p>

    <p>
       I'm sure it's going to be the best one yet. Some quick notes:
    </p>

    <ul>
      <li>
        Definitely agree that we should double the coffee budget this year.
      </li>
      <li>
        Although I am your dad. Ds, you are No1.
      </li>
    </ul>

    <p>Let me know when you've nailed down the dates!</p>
  </section>

  <form>
    <input />
    <button type="submit">
      Send
    </button>
  </form>
</div>

Regardless of how the URL becomes set, the Ember router then maps the current URL to one or more route handlers. A route handler can do several things:

• It can render a template.
• It can load a model that is then available to the template.
• It can redirect to a new route, such as if the user isn't allowed to visit that part of the app.
• It can handle actions that involve changing a model or transitioning to a new route.

To define a route, run

ember generate route route-name

This creates a route file at app/routes/route-name.js, a template for the route at app/templates/route-name.hbs, and a unit test file at tests/unit/routes/route-name-test.js. It also adds the route to the router.

• Basic Routes

The map() method of your Ember application's router can be invoked to define URL mappings. When calling map(), you should pass a function that will be invoked with the value this set to an object which you can use to create routes.

app/router.js

Router.map(function() {
  this.route('about', { path: '/about' });
  this.route('favorites', { path: '/favs' });
});

A Service is an Ember object that lives for the duration of the application, and can be made available in different parts of your application. Services are useful for features that require shared state or persistent connections. Example uses of services might include:

• User/session authentication.
• Geolocation.
• WebSockets.
• Server-sent events or notifications.
• Server-backed API calls that may not fit Ember Data.
• Third-party APIs.
• Logging.

Defining Services

• Services can be generated using Ember CLI's service generator. For example, the following command will create the ShoppingCart service:

ember generate service shopping-cart

• Services must extend the Service base class:
  app/services/shopping-cart.js

import Service from '@ember/service';
export default class ShoppingCartService extends Service {
}

• Like any Ember object, a service is initialized and can have properties and methods of its own. Below, the shopping cart service manages an items array that represents the items currently in the shopping cart.
  app/services/shopping-cart.js

import { A } from '@ember/array';
import Service from '@ember/service';

export default class ShoppingCartService extends Service {
  items = A([]);

  add(item) {
    this.items.pushObject(item);
  }

  remove(item) {
    this.items.removeObject(item);
  }

  empty() {
    this.items.clear();
  }
}

Ember Data, a powerful set of tools for formatting requests, normalizing responses, and efficiently managing a local cache of data. In Ember Data, models are objects that represent the underlying data that your application presents to the user. Note that Ember Data models are a different concept than the model method on Routes, although they share the same name.

Project status can be tracked via the core team meeting minutes. However major changes to Ember go through the Request For Comment process. This gives the Ember community a chance to give feedback on new proposals. Notable RFCs include:

• Engines. Engines allow multiple logical applications to be composed together into a single application from the user's perspective. Currently released as an experimental addon.
• Release cycle improvements. Among other things it proposes changes to Ember CLI to support "svelte builds", which will strip out deprecated and unused features.
• Outlet Focusing. Making Ember accessible by default. This RFC aims to improves the user experience for people using screen readers.

Some introduction: https://en.wikipedia.org/wiki/Ember.js
Some explanation: https://guides.emberjs.com/release/tutorial/part-1/
Components example refer to: https://guides.emberjs.com/release/components/
Routing example refer to: https://guides.emberjs.com/release/routing/
Services example refer to: https://guides.emberjs.com/release/services/
Ember Data example refer to: https://guides.emberjs.com/release/models/
https://www.w3cschool.cn/emberjs/emberjs_overview.html

• Zijun Wang(@ZijunWang810): HISTORY and OVERVIEW
• Yangbohan Miao(@S1mp13): DESIGN PHILOSOPHY
• Jiaming Gu(@olivergu6657688): CORE CONCEPTS->Components
• Tianhao Sun (@stickice): CORE CONCEPTS->Routing and CORE CONCEPTS->Services
• Kaixun Jiang (@deep-kaixun): CORE CONCEPTS->Ember Data and FUTURE DEVELOPMENT