Towards a behavioral paradigm for building web interfaces

Principles

• Subtractive mindset + remove layers of abstraction
• Behavior is more important to understanding than UI hierarchy.
• Leverage new (and old) features of the browser.
• Optional patterns than can be layered together.
• Stop combining the server/client into one.

Patterns

• Use event delegation to avoid needing to attach event listeners directly to DOM elements or attaching global event listeners.
• Declare "intentions" in HTML that map raw DOM event to semantically meaningful events. (e.g. <form on:submit="ADD_TODO">)
• Use custom elements to organize & reuse behavior by the progressively enhancing the light DOM.
• Progressively hydrate custom elements based on when they are used. This could be when the CPU first becomes idle, when the custom element becomes visible on the page, or when the custom element was first interacted with.
• CSS "reactivity" that conditionally styles the page based on DOM attributes or other state-based selectors (e.g. :has). Originally written about by Noam.

Provided in the repo are some optional/unopionated helpers that implement these patterns.

For a more detailed explanation check out this