USEFUL

[TESTS] Run all tests npm run test:run, or run specific test file npm run test:run sample

[CDN] Content Delivery Network To import fwk import { createApp, h } from 'https://unpkg.com/<fwk-name>' for a specific version https://unpkg.com/<fwk-name>@1.0.0' or last major version https://unpkg.com/<fwk-name>@1'

INSIGHTS

1. VanillaJS (Default HTML + JS + CSS) implementation: mix of application logic and DOM manipulation, using the document API to modify the browsers document. "Double Burden" of imperative UI, meaning logic and its UI representation are 2 separate states/environments. // Mixing two distinct layers of abstraction: the actual logic of the application and DOM manipulation (adding/updating/removing).
2. Imperative VS Declarative: Imperative means a step-by-step description of how to do something. Declarative describes what to do, but without specifying how to do it.
3. THREE MAIN types of DOM nodes that need to be represented as virtual nodes:
   • text nodes - simplest type of node, no tag name, no attributes, no children, no props - just text content
   • element nodes - most common type, HTML elements ("div", "p" or "ul" etc.)
   • fragment nodes - collection of nodes, temporary container, lightweight version of "Document", if 100 items need to be added to a list, they will be added to Fragment first, instead of recalculating the layout of the actual DOM 100 times for each item.
   • example of building nodes using framework:
4. Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) software architecture designs that separate logic/concerns.
   • MVC (Model -> View -> Controller):
     • Model: The data and the "source of truth." It handles database logic.
     • View: The UI (what the user sees). It’s usually "dumb", only displays.
     • Controller: The brain. It takes user input from the View, processes it (using the Model), and tells the View what to update.
   • MVVM (Model-View-ViewModel):
     • Model: same as MVM, data and business logic.
     • View: The UI, but this time active
     • ViewModel: It acts as a converter. It takes data from the Model and turns it into a format the View can easily display. Also called Data Binding, kinda works similar to a virtual DOM, by creating a separating layer, that maps all fields/states to specific data and uses them as a shortcut.

// The application creates the virtual DOM that the framework renders into the DOM 5. Virtual DOM saves reference of all real DOM nodes under el property (el for element). This is how reconciliation algorithm knows what DOM nodes to update.

• el for regular node properties and listeners property for event listeners (buttons etc.), text for text nodes

6. Real DOM uses Document API (set of tools, methods) to manipulate & interact the content of a web page.

7. SETUP: Define Handler -> Dispatcher subscribes -> Dispatcher saves the handler ACTION: Button click -> EventListener -> Handler -> Dispatcher dispatches, finds correct functions -> Command executed (Handler triggered)

2.0.0 Version Functionality:

• First version is made of a renderer and a state manager wired together.
• The renderer first destroys the DOM (if it exists) and then creates it from scratch. This process isn’t very efficient and creates problems with the focus of input fields, among other things.
• The state manager is in charge of keeping the state and view of the application in sync.
• The developer of an application maps the user interactions to commands, framed in the business language, that are dispatched to the state manager.
• The commands are processed by the state manager, updating the state and notifying the renderer that the DOM needs to be updated.
• The state manager uses a reducer function to derive the new state from the old state and the command’s payload.

3.0.0 Version Functionality:

• The reconciliation algorithm has two main steps: diffing (finding the differences between two virtual trees) and patching (applying the differences to the real DOM)
• Diffing two virtual trees to find their differences boils down to solving three problems: finding the differences between two objects, finding the differences between two arrays, and finding a sequence of operations that can be applied to an array to transform it into another array.

8. Arrow functions are lexically scoped, meaning they inherit "this" keyword binding from parent, while regular functions takes binding based on who calls it