The road from Ember classic to Glimmer components

1. glint

   1 2 117 9.4 TypeScript

   TypeScript powered tooling for Glimmer templates

   

   In 2022 Ember acknowledged official TypeScript support with a dedicated core team. Glimmer components unlock the full potential of TypeScript support in Ember. Template type checking with Glint is also under active development. Exciting!

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. rfcs

   2 19 803 8.8 Shell

   RFCs for changes to Ember (by emberjs)

   

   Ember.js development doesn’t stagnate. Progress is already being made for new improvements to the current component model. The RFC for first-class component templates has been accepted and merged in 2022 and will provide new benefits to Ember users. By first adopting Glimmer components, we’re prepared for what’s coming next.

4. ember-native-class-codemod

   3 2 68 0.0 TypeScript

   A codemod-cli project for converting Ember objects to es6 native classes

   

   Ember provides a codemod to convert object syntax to class syntax. This has saved us a tremendous amount of time. By doing this our development experience also greatly improved.

5. ember-no-implicit-this-codemod

   4 1 17 5.5 TypeScript

   Template codemod for refactoring from `{{foo}}` to `{{this.foo}}`

   

   Glimmer component templates reflect this by using the @ prefix when using arguments and the this. prefixes when accessing properties of the backing class. This way of working is also supported in classic components, even though arguments are in the same scope as local properties. This means the migration is non blocking, and luckily there’s a codemod available for this as well. The codemod however can’t make a distinction between arguments and local properties, and is something that will be cleaned up in a later phase.

6. ember-render-modifiers

   5 3 86 6.1 TypeScript

   Implements did-insert / did-update / will-destroy modifiers for emberjs/rfcs#415

   

   A second issue was that lifecycle hooks that depended on this wrapping element no longer got invoked. Those lifecycle events contain the Element reference, e.g. didInsertElement. To migrate these we made use of the render-modifiers package. Ever since Glimmer and Octane, there are new ways to encapsulate this logic like using the constructor and destructor, writing custom modifiers, or using resources. For the sake of limiting the scope we opted to keep this a separate effort.

Suggest a related project