DEV Community

Discussion on: Helpful patterns I use in Vue

Collapse
bernardwiesner profile image
Bernard Wiesner

Thanks for explaining. Just to clarify if you have:

app.js
search.vue
list.vue
favoriteButton.vue

You would implement the favorite button component using custom elements?

The favorite button is a button for adding the item on the search results list to your favorite items.

The same favorite button is also used on the detal page.

That would be considered a 4th layer?

Thread Thread
jfbrennan profile image
Jordan Brennan Author • Edited

Generally yes. However, if I take that example at face value then it seems like there’s no need for a fourth layer at all. The list component and the detail component both use a regular button and their click handler uses whatever API there is for adding an “item” to “favorites”. No compelling reason for an abstraction here and just because two event handlers call the same storage API doesn’t mean the code isn’t DRY either. That’s my simple approach anyway.

Thread Thread
bernardwiesner profile image
Bernard Wiesner

Well the button does a few things.

A star on the button changes color depending on if the item is already in the favorite list, so have to keep that state.

If the user is not logged in, a popup is shown, asking the user if he wants to login.

So having it as a component is convenient, cause it's easy to reuse. I am not sure what would be the advantage of using custom elements.

Thread Thread
jfbrennan profile image
Jordan Brennan Author • Edited

Ah, then yeah I'd go CE.

There's no huge must-have advantage in doing this, I just mostly prefer to use vanilla js when possible. The minor advantage in this case being one more little piece of the app is pure dependency-free js, which means the app is just a teeny weeny bit smaller and faster and this CE could be possibly be used with a non-Vue project should the need arise. The big gains come as these little components (and the plain js modules I mentioned as well) add up over time as the project scales. If there's 20, 30, or more of these vanilla components you're saving real bytes and overhead and a good portion of your codebase is emancipated.

Definitely not ground-breaking stuff, but I'll take these little wins where I can, especially if it means more vanilla code.

Thread Thread
bernardwiesner profile image
Bernard Wiesner

Thanks, seems interesting to look more into CE