# can.Component.extend() vs. other approaches

**URL:** <https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921>\
**Category:** DocumentJS\
**Created:** [June 27, 2018, 4:44pm UTC](https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921 "2018-06-27T16:44:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![code-read](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/code-read/32/111_2.png) [@code-read](https://forums.bitovi.com/u/code-read)\
**Post date:** [June 27, 2018, 4:44pm UTC](https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921/1 "2018-06-27T16:44:00Z")

</div>

In the documentation I see different recipes and code examples implemented using:

1. [can.Component.extend()](https://canjs.github.io/next/doc/guides/recipes/canvas-clock.html#Drawtheminuteandhourhand)

2. [can.DefineMap.extend()](https://canjs.github.io/next/doc/guides/recipes/weather-report-simple.html#Result)

3. [Both of the above combined](https://canjs.github.io/next/doc/guides/recipes/cta-bus-map.html#Cleanupmarkerswhenlocationschange)

4. [`<script type="text/stache">` combined with can.DefineMap.extend()](https://canjs.github.io/next/doc/guides/recipes/signup-simple.html#Loginerrors)

It seems that #4 accomplishes what #1 alone does in other examples, but I’m not sure. It also seems as though **_#1 could be used for any of the above_** , but again I’m not sure.

Is there a benefit to using #2, #3, or #4, or could I just as well use #1 for all projects?

Thanks.

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [June 28, 2018, 4:54pm UTC](https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921/2 "2018-06-28T16:54:15Z")

</div>

In general, I would always define a component and use it vs. create a `text/stache` script and render it with a view model.

In CanJS 4, we added the ability to upgrade an element that’s in the html to a component. Internally we call this auto-mounting, but I don’t think it’s a documented feature (it’s a by-product of CanJS components being backed by real [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)). Some of our code examples haven’t been updated to take advantage of that, which is why you might see some recipes that show the “old” way.

The default type for a component’s ViewModel is a `can-define/map/map`, which is why you can just write `ViewModel: { ... }`. Just yesterday I opened a PR to make the docs a little more clear (feedback welcome): [https://github.com/canjs/can-component/pull/268](https://github.com/canjs/can-component/pull/268)

---

<div class="post-metadata">

**Author:** ![code-read](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/code-read/32/111_2.png) [@code-read](https://forums.bitovi.com/u/code-read)\
**Post date:** [June 29, 2018, 3:40pm UTC](https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921/3 "2018-06-29T15:40:13Z")

</div>

That does clarify the issues some, but I’m still not sure if there is a reason not to go with #1 above for all projects. Is there?

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [June 29, 2018, 5:31pm UTC](https://forums.bitovi.com/t/can-component-extend-vs-other-approaches/921/4 "2018-06-29T17:31:55Z")

</div>

Go with #1, like it’s shown in the [Setting Up CanJS JS Bin](https://canjs.com/doc/guides/setup.html#JSBin):

```auto
can.Component.extend({
  tag: "my-app",
  view: `
    {{#eq page 'home'}}
      <home-page/>
    {{else}}
      <h2>Away</h2>
      <a href="{{routeUrl(page='home')}}">
        Home
      </a>
    {{/eq}}
  `,
  ViewModel: {
    page: "string"
  }
});

```