ga-wdi-boston / ember-object Goto Github PK

Replacing var with let and const, primarily.

Host images with the GitHub CDN issue trick.

@jrhorn424 introduced Ember.get and Ember.set in cohort 016, is this a pattern we should include in the talk?

The principle driving this issue is called "The Principle of Uniform Access".

It helps that adhering to this principal will avoid bugs, and that breaking this principle in Ember will break your application code in odd and hard-to-debug ways.

// GIVEN
const Person = Ember.Object.extend({
  givenName: null,
  familyName: null,
});

const Developer = Person.extend({
  jobTitle: 'Developer',
  doJob () {
    return 'Computering';
  },
});

let jeff = Developer.create({
  givenName: 'Jeffrey',
  familyName: 'Horn',
});

// BAD
jeff.givenName; // some Ember junk
// GOOD
jeff.get('givenName'); // "Jeffrey"

// BAD
jeff.givenName = 'J-Rizzle' // let's break Ember
// GOOD
jeff.set('givenName', 'J-Rizzle'); // "J-Rizzle"

// BAD
jeff.doJob(); // 'Computering'
// GOOD
jeff.get('doJob')(); // 'Computering'

As a specific example for execution done wrong in this talk:

const Person = Ember.Object.extend({
  fullName: function(){
    return `${this.get('givenName')} ${this.get('surname')}`;
  }
});

let bob = Person.create({
  givenName: 'Bob',
  surname: 'Belcher'
})

-bob.fullName(); // 'Bob Belcher'
+bob.get('fullName')(); // 'Bob Belcher'

Seems unnecessary.

Template strings are used in introductory examples. Code examples like the following:

const Person = Ember.Object.extend({
  sayHello: function(){
    return "Hi, my name is " + this.get('name');
  }
});

Should become:

const Person = Ember.Object.extend({
  sayHello: function(){
-    return "Hi, my name is " + this.get('name');
+    return `Hi, my name is ${this.get('name')}`;
  }
});

This is an entire repo that has a lot of people's names in it, and none of them are female or even androgynous. Inclusivity in examples is important!

Use .remarkrc from templates.

We need to be able to write scripts in order to create and muck around with arbitrary Ember Objects. However, copying and pasting scripts into the console is awkward. It would be great if we could find a better way to do it.

See #4

The code example has

Person.create({
...
  kids: [
-    Ember.Object.create({ name: 'Tina', age: 13 }),
-    Person.create({ name: 'Tina', age: 13 }),
  ...
  ]
})

Can you call Person.create inside Person.create? I don't see why not, but someone should test this and then change it in the README if 👍

Can we move some, or all of this into a study? To me, this lesson feels a little lack-luster during our Ember unit, and the end game is:

• Use .get and .set
• There are computeds
• "binding" ...kind of

It's using pods, so things should get fixed to follow that convention.

console.log(`X: ${objX.get()}`);
objX.set(10);
console.log(`X: ${objX.get()}`);
console.log(`Y: ${objY.get()}`);
objY.set(100);
console.log(`Y: ${objY.get()}`);
console.log(`X: ${objX.get()}`);

Should be:

console.log(`X: ${objX.get()}`);
objX.set(10);
console.log(`X: ${objX.get()}`);
//=> 10
console.log(`Y: ${objY.get()}`);
//=> 5
objY.set(100);
console.log(`X: ${objX.get()}`);
//=> 10
console.log(`Y: ${objY.get()}`);
//=> 100

In the Bob Belcher Computed Properties example, the 'call' reads bob.get and I believe it should be bob.get('fullName').

Please disregard if wrong and let me know.

Lab says to run the server using --proxy which in class we were told not to use. It also says to point to http://localhost:4200/ when we should be going to http://localhost:7165/