For a simple form use case is it better to use controllers or components?

Design
1

I have a use case where I am using a tabbed controller to display some tabs and some forms under each tab and the user can jump back and forth between these tabs/forms to fill them. They all have different fields and can have some properties that can be dependent on each other. Is it better to use a controller or a component for this scenario?

Also, I need to be able to add/ remove similar divs like for example : a user can have multiple addresses so in that case components make more sense.

2

Good rule of thumb is to just not use controllers if you can.

1 Like
3

Here’s something to help you decide.

Controllers maintains long term state and does not get reset/destroyed automatically.

Components maintains short term state and gets destroyed/recreated whenever you navigate to and from it.

2 Likes
4

Ya my main question is for a FORM kinda use case does it make sense to have component. Since, each form is different then the other and one of the main points of using component is reusability.

5

Components are used for isolation too. Not just reusability. With where Ember is headed, your app structure should be built around multiple components.

So rather than having a component to be used just for reusability, split your template into multiple components. Based on your example scenario above, one possible way to structure it is to have a component for the tab buttons and a component for each tab form.

{{tab-buttons}}
{{tab1-form}}
{{tab2-form}}

How should you know what should be its own component? I try to follow React’s guideline:

Just use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

1 Like
6

Thank you for the answer good sir.