11 ms·
> "PETAL stack" of Phoenix, Elixir, Tailwind, Alpine.js, and LiveView Oh, finally a hipster stack after my own heart. My initial stack used Web Components ins
by 1_player 6y ago
> "PETAL stack" of Phoenix, Elixir, Tailwind, Alpine.js, and LiveView
Oh, finally a hipster stack after my own heart. My initial stack used Web Components instead of Alpine.js, but after one year trying to make it work (using lit-element) I'm battered, bruised and I declare Web Components a failed piece of technology [1].
Alpine is interesting, but not powerful enough for my use case, which is encapsulating common UI behaviours in reusable packages. Stimulus seem to be the missing ingredient in the mix for me. Any other suggestion for lightweight rich JS components that do not require one to buy into Vue, React or other "full-stack" JS libraries?
Also, I wholeheartedly recommend Unpoly as well, fits nicely in the PETAL stack.
1: shadow DOM isn't great on your OWN components, styling isn't fun paired with global CSS/tailwind, dealing with properties/attributes/observables/reactivity in general is an absolute pain in the buttocks, good luck wrapping an <input> in a web component.
- benzible 6y agoHave you checked out Surface [1]? In a recent interview [2] Chris McCord hinted at merging at least some of Surface into LiveView. [1] http://surface-demo.msaraiva.io http://surface-demo.msaraiva.io [2] https://thinkingelixir.com/podcast-episodes/024-liveview-uploads-with-chris-mccord/ https://thinkingelixir.com/podcast-episodes/024-liveview-upl...
- cultofmetatron 6y agoI love where surface is going but its not ready for general use yet. last I checked, it was pinned to an older fork of liveview.
- benzible 6y agoLook again - the current Surface release is pinned to the current LiveView release, 0.15. https://github.com/msaraiva/surface/blob/master/CHANGELOG.md https://github.com/msaraiva/surface/blob/master/CHANGELOG.md
- cultofmetatron 6y agothanks for the heads up, gonna try integrating this today and see what happens
- dsego 6y agoConsider redom, mithril, snabbdom, riot.js, lighterhtml or even svelte.
- davidjnelson 6y agoReact is great though, why not just use that?
- cargoshipit 6y agobecause then you need an api
- davidjnelson 6y agoReact supports server side rendering.
- hu3 6y agoand then you need a nodejs server and sacrifices of kittens to webpack gods. Everything that libs like Stimulus aim to avoid.
- davidjnelson 6y agoYa depends on what you’re doing. Webpack is worth mastering though in general.
- deleted 6y ago[deleted]
- danjac 6y agoSure, but where is your data and business logic going to live? If the answer is "just write it in JS" then it's no longer a question of "just use React" but "let's replace our entire stack with Javascript".
- davidjnelson 6y agoYa it really depends. I like redis and Postgres generally speaking for data, and Ruby on Rails generally for business logic. And you can certainly do universal rendering with that easily with react_on_rails. If you do end up needing more perf, maybe go would be interesting.
- 1337shadow 6y agoShadow dom is optional for web components, web components are still useful without it, so I hardly see how that could be a reason for "failed piece of technology". Also, did you try with pure JS ? no lit ? I just removed StencilJS from my component to go pure-JS and it turns out I really prefer it that way, maybe it would suit you too to do WC without any additional JS lib ?
- 1_player 6y agolit-element is a very light wrapper on top of the native API. The problem isn't lit-element, the problem is the native API is not that good, not ergonomic, still incomplete and so far removed from the modern way of building reactive websites, i.e. view = render(state) You need some abstraction on top of the native API, working directly with it is even more painful. The fact I'm using lit-element is because many WC libraries force shadom DOM upon you, and only some make it optional (Stencil is one of those few, but the TS requirement is a no-go for my use case)
- deergomoo 6y ago> Shadow dom is optional for web components Not the OP, but slots are part of the shadow DOM spec, so if you don’t want isolated styles, you have to forego slots. I tend to build my app scaffolding with wrapper components that provide layout and/or functionality to their child components via slots, so as much as I like the idea of WebComponents they’re a complete non-starter for me.
- deleted 6y ago[deleted]
- gampleman 6y agoIn the above stack LiveView doesn’t play that well with web components that render their own children, as it will remove those children when it rerenders. So you do kind of need shadow DOM.
- 1_player 6y ago
- deergomoo 6y ago> Any other suggestion for lightweight rich JS components that do not require one to buy into Vue, React or other "full-stack" JS libraries? Depending on your needs, you can sort of use Alpine + server-side templating to achieve this. While Alpine itself has no concept of components, you can define a template fragment that consists solely of the “component” for basically the same effect. Because the x-data directive is freshly evaluated each time it appears, you can include a fragment multiple times and get isolated “instances”. YMMV though, I eventually found that because templating is much more simplistic than a real tree of components as you would get with Vue or React, things started getting hard to follow, especially when my “components” were nested, or involved approximating slots. Ultimately I converted to Inertia.js, which is a very small glue library that lets me write the whole front end in Vue (or React, or Svelte) while keeping a more traditional Laravel (or Rails) backend.