diff --git a/0015-split-business-logic-from-dom-logic.md b/0015-split-business-logic-from-dom-logic.md new file mode 100644 index 0000000..9904f68 --- /dev/null +++ b/0015-split-business-logic-from-dom-logic.md @@ -0,0 +1,38 @@ +# 15. Split business logic from dom logic of JavaScript classes and components + +Date: 2021-09-16 + +## Status + +In discussion + +## Context + +PrestaShop developers are working on JavaScript components by mixing some DOM handlers with some logic not linked to the DOM at all. + +For example: +The new product page is calculating some prices depending on events and form changes, for this, it takes some data from the DOM and manipulates these data at the same time as updating the DOM. + +It cause some issues: + +- We can't use unit tests, because they rely on the DOM generated by a template engine (Twig, smarty...), except if we create a virtual DOM with hardcoded markup which is unmaintainable. +- It's really hard to review because we use intern dependencies that you should be aware of to review properly. If concerns are split properly, it's easier to understand. + +Benefits: + +- JavaScript unit tests are possible. +- Better readability and it is easier to review. +- Helpers are reusable in the future with any front-end libraries. + +## Decision + +[Please, take a look at this proof of concept](https://github.com/PrestaShop/PrestaShop/pull/25909), some tax ratios calculations are split into a helper folder, using functional programming (because it's easier to understand the data flow: You have some data going in, you have some data going out, which is not the case of class programming in general because it's a more complex paradigm). And I added a unit test example using the helper. This unit test was impossible to be written with the class method, without having a complex virtual dom system. + +What should we do: +- Use a global folder containing helpers with a relative path, they are designed to be reusable and as we are speaking about functional programming, the helper should not modify any software state, it's a basic I/O function that take some params and returns some data. +- Use functional programming, because it's more performing and doesn't require object logic. +- Every helper requires a unit test to be written to accept a pull request. + +## Consequences + +We have to think about the logic of our JavaScript code while working on something and split it as proposed. We also need to write unit tests.