JS-arch-learning

Learning basic design principles, tech, patterns, templates, data structure...

1) Paradigms:

• Imperative;
• Non structured;
• Structured:
  • Procedural:
    • OOP (class/prototype);
• Declarative:
  • Functional;
  • Logical;
• Data-driven;
• Generic;
• ...

2) Techniques:

• Async programming;
• Parallel programming;
• Distributed programming;
• OOP programming:
  • Objects and classes;
  • Class-based vs prototype-based creation;
  • Dynamic dispatch/message passing;
  • Encapsulation;
  • Composition; ✅
  • Inheritance (Prototype); ✅
  • Delegation; ✅
  • Polymorphism;
  • Open recursion;
• Function programming:
  • First-class functions;
  • HOC functions; ✅
  • Recursion; ✅
  • Closures; ✅
  • Currying; ✅
  • Lazy evaluations;
  • Referential transparency;
  • Immutability;
  • Pure functions;
  • Partial application; ✅
• Visual programming (ER/RUP/CAD/CAM);
• Reactive programming:
  • RxJS;
• Event oriented programming;
• Functional-reactive programming;
• Meta-programming;
• Multyparadigm-programming;
• ...

3) GOF Design patterns:

• Fundamental:
  • Delegation; ✅
  • Functional;
  • Immutable interface;
  • Interface;
  • Marker interface;
  • Property container;
  • Event channel;
• Creational:
  • Abstract Factory;
  • Builder;
  • Lazy initialization; *
  • Multiton; *
  • RAII; *
  • Factory; ✅
  • Prototype; ✅
  • Singleton; ✅
  • Pool; ✅
• Behaviour:
  • Chain of responsibility; ✅
  • Command;
  • Interpreter;
  • Iterator;
  • Mediator;
  • Memento;
  • Null Object; *
  • Observer;
  • Servant; *
  • Specification; *
  • State;
  • Strategy; ✅
  • Template method;
  • Visitor;
  • Simple Policy; *
  • Event listener; *
  • Single-serving visitor; *
  • Hierarchical visitor; *
• Structural:
  • Adapter;
  • Bridge;
  • Composition; ✅
  • Decorator (Wrapper); ✅
  • Facade; ✅
  • Flyweight;
  • Front controller; *
  • Proxy; ✅
  • Dependency injection;

4) Programming language concepts (OOP):

• module;
• mixin; ✅

5) Design Principles:

• Functional programming principles: ✅
  • Pure Functions; ✅
  • No side effects; ✅
  • Immutability; ✅
  • Referential transparency; ✅
  • Functions as first-class entities; ✅
  • Higher order functions; ✅
  • Disciplined state; ✅
• OOP programming principles:
  • GRASP: ✅
    1. Информационный эксперт (Information Expert); ✅
    2. Создатель (Creator); ✅
    3. Контроллер (Controller); ✅
    4. Слабое зацепление (Low Coupling); ✅
    5. Высокая связность (High Cohesion); ✅
    6. Полиморфизм (Polymorphism); ✅
    7. Чистое изготовление (Pure Fabrication); ✅
    8. Перенаправление (Indirection); ✅
    9. Устойчивость к изменениям (Protected Variations); ✅
  • SOLID: ✅
    1. Принцип единственной ответственности (single responsibility principle); ✅
    2. Принцип открытости/закрытости (open–closed principle); ✅
    3. Принцип подстановки Лисков (Liskov substitution principle); ✅
    4. Принцип разделения интерфейса (interface segregation principle); ✅
    5. Принцип инверсии зависимостей (dependency inversion principle); ✅
  • DRY (Don’t Repeat Yourself);
  • YAGNI (You aren't gonna need it);
  • KISS (KEEP IT SIMPLE, STUPID);
• ...

6) Optimization techniques:

• Algorithmic optimizations (https://habr.com/ru/post/350018/):
  • Memoization; ✅
• Language-specific optimizations:
  • JIT (https://github.com/21Michael/Backend-arch-learning/blob/main/4)NodeJS/ENGINE-V8/Execution-process/Execution_process.md); ✅
  • Garbage-collector (https://github.com/21Michael/Backend-arch-learning/blob/main/4)NodeJS/ENGINE-V8/Garbage-collector/Garbage_collector.md); ✅
• Engine-specific optimizations:
  • V8;
  • ...
• WebAssembly (WASM);

7) Data structure:

• Collections:
  • Object; ✅
  • Dequeue (Array); ✅
  • Map; ✅
  • WeakMap; ✅
  • Set; ✅
  • WeakSet; ✅
• Linked List; ✅
• Stack; ✅
• Queue; ✅
• Binary Tree;
• Binary Search Tree;
• Heap;
• Hashing;
• Graph;
• Matrix;
• Misc;
• ...

8) Frameworks:

• Techniques:
  • Components:
    • communication:
      • one-way-data-binding; ✅
      • two-way-data-binding; ✅
    • event handling; ✅
    • conditional rendering:
      • imperative (React); ✅
      • declarative (Vue); ✅
  • Reactivity:
    • Local (React/Vue); ✅

9) State management patterns:

1. MVC / MVP / MVVM; ✅
2. Flux: ✅
   • Redux: ✅
     • Hooks:
       • useSelector (mapStateToProps); ✅
       • useDispatch (mapDispatchToProps); ✅
       • useStore; ✅
     • React-Redux; ✅
     • Redux-thunk; ✅
     • Redux-promise; ✅
     • Redux-saga; ✅
     • Redux-toolkit; ✅
   • Dva; ✅
   • Reflux;
   • Fluxxor;
   • Alt;
3. Vuex; ✅
4. MobX; ✅

10) Refs:

• https://github.com/krasimir/react-in-patterns
• https://learn-vuejs.github.io/vue-patterns/patterns/#component-communication
• https://www.youtube.com/playlist?list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw

11) Books:

• React Design Patterns and Best Practices (Carlos Santana Roldán);
• Vue.js 2 Design Patterns and Best Practices (Paul Halliday);