Known component/view patterns:
- https://stimulus.hotwired.dev/handbook/introduction
- https://backbonejs.org/#View
- https://docs.angularjs.org/tutorial/step_02
- https://docs.angularjs.org/tutorial/step_03
- https://angular.io/guide/component-overview
- https://vuejs.org/guide/essentials/template-syntax.html#directives
- https://svelte.dev/docs/svelte-components
- https://guides.emberjs.com/release/components/introducing-components/
vite plugins:
Additional information:
- https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
- https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
- Enough for usage within Rails views, partials and helpers
- Full compatibility with Turbo
- Mostly valid HTML (not really valid XML)
- No additional compilation required (except TypeScript/Dart if any used)
- No virtual DOM or any additional VMs
- Default controller id from file path and name
- Attach component to DOM element:
data-component="users-index" - Define DOM element action handler:
data-action-click="users-index#myclickhandler" - Define custom action handler:
data-action-mycontroller-myevent="users-index#myeventhandler" - Define window action handler:
data-window-action-click="users-index#myeventhandler" - Define keyboard action handler:
data-keyboard-action-keydown="users-index#keydownhandler" - Define class binding:
data-class-loading="loading" - Add value to component:
data-value-loader-url="/messages" - Set DOM element as target:
data-target="myelement" - Set action parameters:
data-param-item-id="1" data-param-item-url="/items/1"
- no explanation of convention on controller names (it just what it is, I can't get double dashes thing "--")
- no explanation of convention on data attr names (why not using prefixes instead of suffixes?)
- possibility to attach multiple controllers to the same DOM element
- not clear encapsulation/scoping
- no lazy loading, loads everything at once (if one follows "official guidelines")
- targets, values and selectors very long names that include controller name
- all events are mixed (would like to have them namespaced on data attr name level)
- Try using Dart as compiler for new implementations and in the same time it should be possible to use vanilla JavaScript and TypeScript.
- Component should have configurable selector, by default it's
data-component="my-component-name". - It should be possible to add services to initialiser of component (same idea as in Angular with automated injection).
- It should be possible to load component on demand (aka lazy).
- There should be similar patterns to Rails (e.g. "mycomponent#mymethod").
- how can I load javascript/typescript/dart code per view? (use vite tag always on view template level, basically same as
require) - how can I load css/scss per view? (use vite tag always on view template level, basically same as
require) - how do I get same amount of sugar syntax and automations without stimulusjs? also considering possible places for memory leaks and heavy resources usage.
- avoid using stimulusjs if you can't follow the practices that will include proper encapsulation, pseudo-lazy loading and other optimisations
- backbonejs seems to be good alternative, but it does not have any HTML sugar and helpers
- implement own library
- use stimulusjs if there are no other options
- use vitejs for bundling assets, avoid using webpack
- avoid using backbonejs, reactjs, vuejs, nextjs, angularjs, emberjs, elmjs, etc
DATE: 2023.09.10 AUTHOR: Andrei Makarov (github.com/amkisko)
Update 2023.01.09: