# Not generate .js file

**URL:** <https://discuss.emberjs.com/t/not-generate-js-file/18033>\
**Category:** Ember CLI\
**Created:** [July 9, 2020, 11:36am UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033 "2020-07-09T11:36:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dhanabal](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@Dhanabal](https://discuss.emberjs.com/u/Dhanabal)\
**Post date:** [July 9, 2020, 11:36am UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/1 "2020-07-09T11:36:30Z")

</div>

While generate component through cli comment.

`ember generate component component-name`

Message :   
installing component  
create app\components\testing.hbs  
skip app/components/testing.js  
tip to add a class, run `ember generate component-class testing`  
installing component-test  
create tests\integration\components\testing-test.js

it doesn’t generate .js file and component inside template.

How to solve this?

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [July 9, 2020, 3:28pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/2 "2020-07-09T15:28:27Z")

</div>

First, welcome!

Second, any time you have a question about the behavior of Ember CLI you can type `ember help`—up to and including about specific commands! So, here, you can run `ember help generate component`, and it’ll print this:

```auto

ember help generate component
Requested ember-cli commands:

ember generate <blueprint> <options...>
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p, -pods
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo <value>, -ir <value>
  --in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

      component <name> <options...>
        Generates a component.
        --path (String) (Default: components)
          aliases: --no-path (--path="")
        --component-class (@ember/component, @glimmer/component, @ember/component/template-only, "") (Default: --no-component-class)
          aliases: -cc (--component-class=@ember/component), -gc (--component-class=@glimmer/component), -tc (--component-class=@ember/component/template-only), -nc (--component-class=""), --no-component-class (--component-class=""), --with-component-class (--component-class=@glimmer/component)
        --component-structure (flat, nested, classic) (Default: flat)
          aliases: -fs (--component-structure=flat), -ns (--component-structure=nested), -cs (--component-structure=classic)

```

As you can see, the command you want to get a backing class is `ember generate component <component name> --component-class @glimmer/component`. The short version of that would be `ember g component <component name> -gc`.

Now, you might be wondering: **why is the default to _not_ generate a backing class?** Since the launch of Ember Octane, Ember CLI defaults to generating “template-only” components because they’re the _right_ starting point:

- _very often_ you don’t actually need a backing class: you can do everything you need to just by passing in arguments (including actions)
- template-only components have the best performance—the lowest memory usage and the fastest to render
- once you have a backing class, it’s a “state magnet”: it’s tempting to make components have their own local state _whether or not_ that’s actually the best fit for your app’s data flow
- you can also always generate a backing class _later_ by using the `ember generate component-class` command!

---

<div class="post-metadata">

**Author:** ![Ben\_Glancy](https://avatars.discourse-cdn.com/v4/letter/b/9de053/32.png) [@Ben\_Glancy](https://discuss.emberjs.com/u/Ben_Glancy)\
**Post date:** [February 17, 2021, 10:33pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/3 "2021-02-17T22:33:48Z")

</div>

I am still a bit dumbfounded that the default is not to create a backing class. The component must surely be doing absolutely nothing if you don’t need a backing class. I’ve never yet not needed one.

You can pass arguments in but you usually need to filter it, order it etc If all you have is static html why even bother using ember.js for it.

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [February 18, 2021, 1:39am UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/4 "2021-02-18T01:39:27Z")

</div>

Template-only components are not _static_, they’re just not _stateful_. That’s a key difference: there are tons of interesting things you can do in rendering HTML without stateful components. The code can be quite dynamic in the HTML it generates, depending on the arguments passed in. And many of the kinds of transformations you might want can be done in a parent component or in helpers. (In fact, there are whole programming paradigms and languages where this is how _all_ rendering works: Elm, for example.)

By way of analogy: a template-only component is just like a function in JS. A JS function can do a lot of things, and isn’t “static” at all. The same is true of templates! And in fact, a template-only component _is_ just a function in the underlying implementation of the template language.

As for never not needing one: I believe you! However, I’ll also note that we have found a great many places where they’re useful in the app that powers [LinkedIn.com](http://LinkedIn.com)! In fact, many components which _used_ to have backing classes before we moved to Octane and Glimmer components don’t anymore: more and more of our components over time are template-only.

---

<div class="post-metadata">

**Author:** ![Ben\_Glancy](https://avatars.discourse-cdn.com/v4/letter/b/9de053/32.png) [@Ben\_Glancy](https://discuss.emberjs.com/u/Ben_Glancy)\
**Post date:** [February 18, 2021, 9:17am UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/5 "2021-02-18T09:17:26Z")

</div>

Thanks. It would be interesting to see the sort of case where previously you had a JS file and then was gotten rid of?

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [February 18, 2021, 2:57pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/6 "2021-02-18T14:57:02Z")

</div>

I find it’s very common to have had backing classes which were largely present to do things in `didInsertElement` or `didReceiveAttrs`. Where they were using/working with the element, switching to a [custom modifier](https://github.com/ember-modifier/ember-modifier) often eliminates the need for the backing class entirely. Where they were using `didReceiveAttrs` to perform side effects (API calls, etc.), refactoring to one-way data flow also often ends up removing the need for `didReceiveAttrs`.

There’s a good example [here](https://www.notion.so/Mixin-With-Observers-Triggering-Actions-10281e8d86e84a518585cd9c0bca4442), which I extracted from our app a while back. Here the original Ember Classic version made _very_ heavy use of backing classes (including mixins and even an observer). The Octane implementation still has one backing class, but one of the components became a template-only component: the refactors that let it move to Octane also made the backing class extraneous.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [February 18, 2021, 4:22pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/7 "2021-02-18T16:22:35Z")

</div>

Helper addons like ember-truth-helpers and ember-composable-helpers are extremely powerful here as you can replace most basic computed properties (especially CP macros) with them.

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [February 18, 2021, 10:31pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/8 "2021-02-18T22:31:13Z")

</div>

I would add that in many cases we are finding that places people tended to reach for components in the Ember Classic world, we are now solving with helpers. This happened just today for a place or an engineer was stumped about how to deal with what he would have used the `didReceiveAttrs` hook for in the past. His initial thought was to reach for the `did-update` modifier, but the actual solution ended up being having a small helper which did _just one thing_, and solved the entire problem cleanly so that the entire backing class for the component was gone. There was much less state to manage and less total code this way, as well as cleaner separation of concerns. Wins all around.

---

<div class="post-metadata">

**Author:** ![Ben\_Glancy](https://avatars.discourse-cdn.com/v4/letter/b/9de053/32.png) [@Ben\_Glancy](https://discuss.emberjs.com/u/Ben_Glancy)\
**Post date:** [October 13, 2021, 1:19pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/9 "2021-10-13T13:19:25Z")

</div>

I’m still dumbfounded that it doesn’t create js by default you have to add --component-class at the end.

If you have a button that responds to a click…how to I get it to do something on a click in the component if there is no js!? Basic usage!

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [October 13, 2021, 4:11pm UTC](https://discuss.emberjs.com/t/not-generate-js-file/18033/10 "2021-10-13T16:11:23Z")

</div>

🤷‍♂️ i still think the default makes sense, i generate a lot of template only components and don’t want to go back and delete unnecessary backing classes…

it’s only 3 extra keystrokes to add a backing class:

```auto
ember g component <name> -gc

```

and if that is unbearable you could make yourself a custom script or shell alias or something
