Building Alpine-like attributes with RxJS

Comparing AlpineJS and Potions Reactive Components
profile photo
Téo Montlouis
The idea here is to enable developers to create “components” : custom-element that can react directly to data changes.
Alpine.js does that already more or less
Start Here - Alpine.js
Create a blank HTML file somewhere on your computer with a name like: i-love-alpine.html Using a text editor, fill the file with these contents: Open your file in a web browser, if you see I ❤️ Alpine, you're ready to rumble!
Here are the differences with our components
→ observables instead of VueJS reactiveData and effect under the hood
→ custom elements so no DOM parsing and flaky node structures
→ only references to observables and not evaluated javascript in the HTML
→ no magics, plugin-s and stuff like that… just pure functions.
Related posts
post image
Potions Reactive Elements
Example
With custom components
Example of a way to link a component custom element to an RxJS state
post image
Concrete example of a product card implemented with Potions framework
post image
Concrete example of a list of product cards implemented with Potions framework
Powered by Notaku