EmberJS

tags:  JavaScript, framework

Ember Tools

Glint

Typechecker for Ember templates (Components, Helpers and Modifiers) similar to tsc in TypeScriptTypeScript
Override

Introduced in TypeScript v4.3.

References

https://dev.to/lioness100/introducing-typescript-override-keyword-4b36
https://www.typescriptlang.org/docs/handbook/release-notes/typescrip.... It specially oriented to Glimmer components in TypeScript, but it can work with classic components or using a different component manager. Also, it could be used with JavaScript but JSDoc types info is recommended (otherwise, it won't do type checking). There is a VSCode extension available allowing features like autocompletiong or link files inside the IDE.

Ember Deploy

The Future of EmberJS

  • PODs for components aren't going to be compatible with EmberJS v6.

TODO add new syntax about:

  • Glimmer (template tags)
  • SchemaRecord (and deprecations of Adapters, Serializers, Models and Transforms)
  • Embroider? (roadmap?)
  • Move Glint to their own article

Tracked properties

Currently, tracked properties aren't compatible with JSON.stringify. This could be a problem in two situations:

  • when sending data to an API (it isn't going to send tracked properties)
  • when duplicating an object with JSON.parse(JSON.stringify(o) hack.

A possible solution to this issue could be to add the following code inside the base class with tracked properties:

export class BaseClass {
   toJSON() {
        // fields that are @tracked don't work with JSON, fix that. https://github.com/ember-learn/guides-source/issues/1138
        // Implemented based off of this https://stackoverflow.com/a/50785428/1148118
        const jsonObj = Object.assign({}, this);
        const proto = Object.getPrototypeOf(this);
        for (const key of Object.getOwnPropertyNames(proto)) {
            const desc = Object.getOwnPropertyDescriptor(proto, key);
            const hasGetter = desc && typeof desc.get === 'function';
            if (hasGetter) {
                jsonObj[key] = this[key];
            }
        }
        return jsonObj;
    }
}

Source

TODO

  • Further work about cloning an object could be required (like creating a util function to do this same behaviour instead a patched inner method to the class).
  • A better solution when sending data to the API could be to use Ember Data and Ember Data Models attributes. But, as currently Ember Data Models are in the path of deprecation, more research could be needed about it.
  • Regarding Digital Gardens Private or Broken Links
    The page you're looking for is either not available or private!
    , this text could require its own note and reorganization work.

Typical issues

  • Deprecate array prototype extensionsDeprecate array prototype extensions
    Context

    In EmberJS v5.0, the Array prototype extensions were deprecated. They were needed to adapt Arrays into reactivity system but aren't needed anymore. This included a bunch of customized ...

Best practices

  • Data down, actions upData down, actions up
    Context

    Data Down, Actions Up (DDAU) is the fundamental pattern in EmberJS framework.


    Data is fetched in parent components (ideally, in Routers or Controllers) and the data is passed to th...

Important Resources

References