Ember.js Study Notes

I am always curious about how do those libraries/frameworks like React, Angular, Ember work in background. I know it all about design patterns, which appeals me very much.

Now, I have been working on React for about 2 years, and AngularJS for some time. It’s time to start an adventure in Ember world. Items below are my thoughts while I went through the official documentation, and will be kept updating.

1. Ember framework/ecosystem behaves like a custodian, it

   • takes template, component, service, data, route, etc defined by developers, via interfaces.
   • ditches them together in background

   While React is more like a library, it works together with other library like Redux, React Router, Webpack to build up applications.

2. Ember CLI can deal with file system, create scaffolds based on convention over configuration

3. this in hbs:

   1. Each template / component is an object / instance
   2. what does this refer to? / what is the context?
   3. why not using function programming, getting rid of this / context?

4. .hbs: will be pre-compiled before it converted into valid html?

   1. Compilation workflow?
      • only handler-bar syntax will be scanned
      • other valid html syntax will be omitted
      • valid html generated

5. Ember’s rendering engine

6. render lifecycle

7. almost all functions are injected into Ember, if they are intended to used in another file.

   • eg.: helper functions will be in handlebar file, are injected by helper()

8. function invokation in hbs: function-name arg1 arg2, will be executed as function-name([arg1, arg2])

9. Router => Route [modal + template] => template with its model (consist of resuable components)

10. Ember Data is data management lib, in charge of API call and other data massages

11. .extend(): use Ember Component class/interface; Meanwhile, add customed function / data

    Component.extend({
    	isBig: false,
    	productList: []
    })

12. A component consists of two parts:

    • UI part: .hbs file (app/templates/components/list-filter.hbs)
    • Logic Part: component object (app/components/list-filter.js)

13. A template can also have its own logic part: controller object

    1. UI part: .hbs file (app/templates/rentals.hbs)
    2. Logic Part: controller object (app/controllers/rentals.js)

14. Ember.Object

    1. expand properties and methods on original JS object

    2. make it observable (design pattern), used heavily in Ember env system

    3. Issue: create() to instantiate a object with preset properties, using init() at the same time

       1. Problem: preset properties and init properties which one called first?

          1. properties in init beats instance preset properties
          2. the hash passed to the create method is essentially treated as a mixin that is applied before init is run
          3. My early exploration encounterring such issue: seem like this is a good sign, which give me an impression this framework is not with a simple philosophy. But hold on, let me dig on.

       2. How to overwrite init in reopen?

          const Person = Ember.Object.extend({
            init() {
              this.set("shoppingList", Ember.A(['eggs', 'cheese']));
            }, 
            addItem(item) {
              this.shoppingList.pushObject(item);
            }
          });
          
          Person.reopen({
            init() {
              this._super();
              this.set("age", 10);
            }
          })
          
          let p1 = Person.create({
            name: 'Stefan Penner',
          });
          
          let p2 = Person.create({
            name: 'Robert Jackson',
          });
          
          let p3 = Person.create({
            name: "a",
            age: 199,
            kkk: function(){console.log("333")}
          })
          
          console.log(p1.age);
          console.log(p2.age);
          console.log(p3.age);
          
          p3.set('age', 3333)
          console.log(p3.age);