Search code examples
javascriptember.jsember-data

Better practices for catching code mistakes with Ember.js (specifically, messed up variable names)

In Ember.js, we use Ember's own object variants which recommend/necessitate using this.get and this.set in order to access object attributes.

I (mostly) understand why this is done, and appreciate the consistency and flexibility it adds to the Ember programming experience, but I do feel that I lose out on my IDE's sanity checking.

With Jetbrain products (or any good IDE w/ deep analysis and completion) I can usually rely on symbol suggestions to make sure I'm choosing the correct variable name. Entering in strings with ember relies on me to get the name right, and I'm a fallible human.

I have a few thoughts regarding possible solutions.

  • Some IDE plugin which does static analysis to suggest the correct string to use
  • An ES6 or alternative transpired language which accesses members the ember way by default
  • Some way of automatically establishing string constants where I need them
  • Some ember debugging setting which at least throws warnings if I try to get a variable which hasn't been defined.
  • I would also find it useful to throw warnings if ember catches me trying to set an attribute to undefined.

Hopefully, someone will tell me that one of these solutions exists, something better has been thought of, or my problem isn't really a problem.

(An example to illustrate my problem:) In the following snippet

  const email = this.get('email');

  const newInvitation = this.store.createRecord('invitation', {email: email});

I am trying to get the attribute email but the real attribute I meant to get was called emailAddress. When I create the record, I do so with an undefined email field which isn't caught until later in the code.

It wasn't terrible to debug, but if I have to manually sift through every line of code every time I misspell something, I'm going to waste a lot of time and be a sad debugging-boy. Help!

Solution

  • Currently we don't have a good solution for this. However the future looks bright!

    Currently there is a lot of work going on in the ember-typings repository to build a typescript definition that will allow the typescript language server to give you that completion. This will give you completions for things like this.get('foo') but not for things like this.get('foo.bar') in near future.

    Also I've build this, which will allow you to omit .get and .set on browsers that support the proxy object. However this is more a proof-of-concept then something you should use in production!

    If you just want debug messages if you access a property thats null you can use unknownProperty:

    unknownProperty(key) {
  console.log('access to unknown property');
}

    However I sometimes its required to access an unknown property for code like this:

    if(!obj.get('foo')) {
  obj.set('foo', 'bar');
}

    So overall I would recommend you to try out typescript, because thats probably the solution that will give you a good developer experience soon and good support from the community as well. Interesting is also the ES classes RFC, that shows, that ember goes toward standard ES classes and at some point we won't .set and .get at all. Also glimmer integration is going forward, and inside a glimmer component you won't need .set and .get.

    Also I don't recommend you ember script. I tried it out, but there is basically no-one using it, and no support at all.