Our Angular application is made up of excel-like grids, with 20 components each containing a unique grid.
Every component includes a save() function that handles adding, editing, and deleting items. The save() function is quite large and resides in each component's .ts file due to the differences between them.
I decided to refactor the save() function starting with one component. However, I realized that it might be more efficient to centralize the function within a service, resulting in just one save() for the entire app instead of 20 individual ones. But there are potential drawbacks to this approach as well. I'm looking for insights from other Angular developers on why placing a function in a service could be beneficial compared to leaving it in each component.
PROS
- Simplify development - changes only need to be made in one place if refactoring is necessary. However, this may not always be the case:
CONS
- Development/maintenance may become more challenging, or not any easier. The significant differences between save() functions in each component could complicate matters.
- Decreased performance of save() due to additional switch case statements required to identify which component is calling save(). This performance impact may be subtle but still present.
- Consolidating and testing will be time-consuming - everything currently works fine, so breaking something would be unfortunate.
Any thoughts on this?