Glimmer.js is a front-end templating engine, which is a thin wrapper around Glimmer-VM. It provides a structured framework for:
- building web applications
- data management
- conventions for organizing your code.
Glimmer.js extends Glimmer-VM by providing higher-level abstractions such as routes, components, services, and templates. It promotes a component-centric development approach, encouraging the separation of concerns and reusability of UI components. It includes development tools and a development server for building and debugging applications. The presence of all the features within Glimmer ecosystem is evident due to the fact that it was being used for building / testing small applications.
Detailed Lifecycle hook definitions and DDAU (Data down Actions Up) concepts with introduced during Glimmer adoption.
For code organizztion, it follows a project structure and some opinionated conventions. It is designed to be fully compatible with Ember.js and uses the Ember.js CLI to generate code & manage project dependencies. Though it can be used without the wrapper of Ember, as it provides a more lightweight alternative for building web applications but with Ember-like concepts.
The Component API introduced with Handlebars were not very intuitive, and introduction of Glimmer with Octane solves certain problem with existing syntax:
- due to curly brackets syntax, it cannot accept
htmlattributes. Adding them becomes relatively painful compared to other frameworks and web-components.
- readability due to declarative syntax, and no wrapper DOM elements
- argument namespacing: immutable
argsprevent unexpected overrides by parent components, which pass values. Thereby standardizing the public API. Ref: Component unification RFC
Glimmer components have 2 Lifecycle hooks and 3 properties