From d1964772e4162863fc08674ea866827a16ca7aef Mon Sep 17 00:00:00 2001 From: NeOMakinG Date: Thu, 16 Sep 2021 15:55:51 +0200 Subject: [PATCH 1/3] 0015 - Split business logic from dom logic of JavaScript classes and components --- 0015-split-business-logic-from-dom-logic.md | 38 +++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 0015-split-business-logic-from-dom-logic.md 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..05bb6f9 --- /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 logics 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 datas from the DOM and manipulate theses datas at the same time than updating the DOM. + +It cause some issues: + +- We can't use unit tests, because it rely on the DOM generated by a template engine (Twig, smarty...), except if we create a virtual DOM with hard coded 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 splitted 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 ccalculations are split into an helper folder, using functional programming (because it's easier to understand the data flow: You have some datas going in, you have some datas going out, which is not the case of class programming in general because it's a more complexe paradigm). And I added an unit test example using the helper. This unit test was totally impossible to be written with the class method, without having a complexe virtual dom system. + +Some propositions: +- Always use the same folder containing helpers, but we have to decide if the folder is global, or inside every pages/components. +- Use functional programming, because it's more performing and doesn't require an object logic. +- Every helper require an unit test to be written in order 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. From 2b353ab03d5ee502d370ca1fe6607398a6090746 Mon Sep 17 00:00:00 2001 From: SZCZUPAK Valentin Date: Thu, 16 Sep 2021 16:03:05 +0200 Subject: [PATCH 2/3] Correct grammar --- 0015-split-business-logic-from-dom-logic.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/0015-split-business-logic-from-dom-logic.md b/0015-split-business-logic-from-dom-logic.md index 05bb6f9..c20629e 100644 --- a/0015-split-business-logic-from-dom-logic.md +++ b/0015-split-business-logic-from-dom-logic.md @@ -8,15 +8,15 @@ In discussion ## Context -PrestaShop developers are working on JavaScript components by mixing some DOM handlers with some logics not linked to the DOM at all. +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 datas from the DOM and manipulate theses datas at the same time than updating the DOM. +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 it rely on the DOM generated by a template engine (Twig, smarty...), except if we create a virtual DOM with hard coded 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 splitted properly, it's easier to understand. +- 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: @@ -26,12 +26,12 @@ Benefits: ## Decision -[Please, take a look at this proof of concept](https://github.com/PrestaShop/PrestaShop/pull/25909), some tax ratios ccalculations are split into an helper folder, using functional programming (because it's easier to understand the data flow: You have some datas going in, you have some datas going out, which is not the case of class programming in general because it's a more complexe paradigm). And I added an unit test example using the helper. This unit test was totally impossible to be written with the class method, without having a complexe virtual dom system. +[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. Some propositions: -- Always use the same folder containing helpers, but we have to decide if the folder is global, or inside every pages/components. -- Use functional programming, because it's more performing and doesn't require an object logic. -- Every helper require an unit test to be written in order to accept a pull request. +- Always use the same folder containing helpers, but we have to decide if the folder is global, or inside every page/component. +- 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 From 9419529f1be4922622ed8a0958afbf54ef2c4501 Mon Sep 17 00:00:00 2001 From: SZCZUPAK Valentin Date: Wed, 22 Sep 2021 15:53:35 +0200 Subject: [PATCH 3/3] Update the ADR --- 0015-split-business-logic-from-dom-logic.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/0015-split-business-logic-from-dom-logic.md b/0015-split-business-logic-from-dom-logic.md index c20629e..9904f68 100644 --- a/0015-split-business-logic-from-dom-logic.md +++ b/0015-split-business-logic-from-dom-logic.md @@ -28,8 +28,8 @@ Benefits: [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. -Some propositions: -- Always use the same folder containing helpers, but we have to decide if the folder is global, or inside every page/component. +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.