1 files changed, 37 insertions, 9 deletions
diff --git a/doc/development/new_fe_guide/style/javascript.md b/doc/development/new_fe_guide/style/javascript.md
index 171aff20a00..cad69b7f415 100644
--- a/doc/development/new_fe_guide/style/javascript.md
+++ b/doc/development/new_fe_guide/style/javascript.md
@@ -45,30 +45,58 @@ function a(p) {
 
 <a name="avoid-constructor-side-effects"></a><a name="3.1"></a>
 - [3.1](#avoid-constructor-side-effects) **Avoid side effects in constructors**
+  Avoid making some operations in the `constructor`, like async calls, API requests, DOM manipulations.
+  Prefer moving them into separate functions. This will make tests easier to right and code easier to maintain.
+
+  ```javascript
+  // bad
+  class myClass {
+    constructor(config) {
+      this.config = config;
+      axios.get(this.config.endpoint)
+    }
+  }
+
+  // good
+  class myClass {
+    constructor(config) {
+      this.config = config;
+    }
+
+    makeRequest() {
+      axios.get(this.config.endpoint)
+    }
+  }
+  ```
+
+<a name="avoid-classes-to-handle-dom-events"></a><a name="3.2"></a>
+- [3.2](#avoid-classes-to-handle-dom-events) **Avoid classes to handle DOM events**
+
+If the only purpose of the class is to bind a DOM event and handle the callback, prefer using a function
 
 ```
 // bad
 class myClass {
   constructor(config) {
     this.config = config;
+  }
+
+  init() {
     document.addEventListener('click', () => {});
   }
 }
 
 // good
-class myClass {
-  constructor(config) {
-    this.config = config;
-  }
 
-  init() {
-    document.addEventListener('click', () => {});
-  }
+const myFunction = () => {
+  document.addEventListener('click', () => {
+    // handle callback here
+  });
 }
 ```
 
-<a name="element-container"></a><a name="3.2"></a>
-- [3.2](#element-container) **Pass element container to constructor** When your class manipulates the DOM, receive the element container as a parameter.
+<a name="element-container"></a><a name="3.3"></a>
+- [3.3](#element-container) **Pass element container to constructor** When your class manipulates the DOM, receive the element container as a parameter.
 
 ```
 // bad