vue-calculator icon indicating copy to clipboard operation
vue-calculator copied to clipboard

Modularize and separate core logic from view layer

Open KAndersonUS opened this issue 7 years ago • 0 comments

Thanks for putting this together and demonstrating Vue components and CSS Grid!

Implementation of the core logic concerned me though for two reasons:

  1. Logic is tightly coupled with the view layer
  2. The core logic sometimes dealt directly with strings (i.e. negating with charAt and concatenation) instead of numbers (val = -val;)

I broke out the core logic into a lib module and implemented it into the Vue component.

Benefits to this approach:

  • Core logic deals entirely with numbers, and string manipulation is left to the view layer
  • Core logic is modular and can be re-used and tested independently of the view layer

Admittedly there is a lot more code to grok here, but I feel it's in the best interest of growing developers to learn this approach of separating core logic from the view layer wherever possible.

I'm sure my implementation isn't perfect, but at least it demonstrates the best practices of modularity and separation of concerns described above.

Looking forward to your feedback. Thanks!

KAndersonUS avatar Aug 14 '18 23:08 KAndersonUS