How the hbs are deployed into index.html in emberjs

Questions
1

Can anyone please explain how the hbs are deployed into index.html in emberjs

2

Welcome! For now I’ll just give a brief overview.

The basic idea is the hbs files are converted into Ember-specific Javascript that can be found when needed. Then, when your app needs to use the appropriate .hbs file the app looks for appropriate component / template and then renders it.

There’s a lot more that occurs under the hood, but that’s a basic overview. Does that help? What are you wanting to understand?

3

I’ll expand on this.

  1. the build system will compile HBS source to a JavaScript module in which is a function that will provide Glimmer a specialized array of OpCodes and values.
  2. If the component has a backing JS file the build system will assign the new template module to the component class.
  3. If the component has only an HBS file (no JS backing class) the build system will generate one implicitly and run step two on it.
  4. This modules are concatenated to the output with all the other JS modules.
  5. When the rendering engine (Glimmer) is asked to render the component it will use the compiled OpCode program to run—essentially the compiled component becomes a VirtualMachine program and Glimmer is the VM running it.
  6. As the GlimmerVM runs these mini programs it auto-tracks dependencies and calculates optimized instructions for updating when changes happen to the underlying tracked data.
  7. Re-renders have Glimmer run these optimized self generated update programs.
1 Like