Action naming conventions, what's your preference?

Questions
1

I’m curious to find out what naming conventions people are using for their actions.

Our app is a mix of camel-case eg:selectImage and kebab-case eg:on-saveand we’re trying to settle on one convention that works. I’ve seen both approaches used in popular add-ons and core ember seems to prefer kebab-case judging by the conventions used in on the input component actions however there doesn’t seem to be any clear indicator as to what’s preferred in the community.

One thing I like in the react world is the convention of onClick={handleClick} for event bindings, where the left side of the binding is onSomething and the right hand side is handleSomething. That seems to work great for react however handleClick doesn’t feel very ember like to me.

I’m very curious to get other peoples take on things.

1 Like
2

Here we choose to use camelCase. One this we are doing in the top of it is finishing all our actions by Action word: {{input on-blur=(action 'checkInputAction')}} So when you are passing actions through many nested components, you know what is just a ‘simple’ attribute or a computed pp, and what is an action.

For the name itself, i think it’s depend if you are building a very generic component, or if you are in a kind of routable component. If you are doing a generic one, on-blur=(action 'onBlurAction') seems appropriate. While when you are defining an action into your route or something like this, it can more appropriate to have a more descriptive name like saveUserAction.

3

I’m curious to ask why?

4

It’s just not something I’ve seen used much anywhere in the community. My guess is most of the time the action being invoked exists at the controller/route level and a name like handleClick inside of a route feels like it’s too detached from the operation the action is performing if that makes any sense.

5

Just thinking out loud here and wondering if it’s even possible to maintain a convention when “currying” actions through nested components comes in to play. Say we take the onSomething=handleSomething approach:

{{!-- application/template.hbs --}}

{{my-thing onSave=(action "handleSave")}}

and then inside {{my-thing}}:

{{!-- components/my-thing/template.hbs --}}

{{ui-button onSave=onSave}} {{!-- convention just broke here --}}
6

Most applications I work on seem to have a mix. I’ve been pretty lazy about this sort of thing in the past, but recently I’ve been making an effort to use camel case for no reason other than consistency. For example, our button’s API now looks like this {{ui-button onClick=(action ...)}}.

7

FWIW, the application I lead on has a convention that actions always start with the prefix on, and are camel case, e.g. onClick. We’ve found this quite useful as we always know which component arguments are actions, and also it guides the naming a bit more generally. YMMV of course.