Web components manifest certain behaviors over and over again. These include:
- importing a value from an attribute,
- exporting a value to an attribute,
- sharing a value with other components,
- observing DOM nodes, attributes, and state data for changes
- getting a value from or setting a value to a remote source
- automatically reacting to DOM, attribute, or state changes
In most UI libraries, the DOM is mapped to a virtual DOM, state is managed as one or more objects using an approach unique to the library, and often a secondary language, e.g. JSX, must be pre-processed to generate the final app. All three of these create abstractions that increase the cognitive space for a developer to navigate and sometimes they result in the need to write more rather than less code. As Richard Harris lays out well, this generally leads to more bugs.
Svelte has done a great job of reducing the cognitive space and lines of code, but perhaps another step could be taken to simplify the above activities.
What if you could declare both the type of data and its default behaviors at the point of declaration? Some would say you already can, just use classes. Well, that works for one set of functionality, but what if…
