7 ms·

Alpine.js is worth a look as well [1]. I've been working with it as part of the newly christened "PETAL stack" [2] of Phoenix, Elixir, Tailwind, Alpine.js, and

Alpine.js is worth a look as well [1]. I've been working with it as part of the newly christened "PETAL stack" [2] of Phoenix, Elixir, Tailwind, Alpine.js, and LiveView. [1] https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/ https://css-tricks.com/alpine-js-the-javascript-framework-th... [2] https://thinkingelixir.com/podcast-episodes/021-tailwind-css-alpine-js-and-liveview-with-patrick-thompson/ https://thinkingelixir.com/podcast-episodes/021-tailwind-css...

pspeter3 6y ago
Do you use Alpine with Turbolinks?
codetrotter 6y ago
I was thinking that Alpine here was referring to Alpine Linux, which I found strange in the context because often these sorts of acronyms (LAMP, MEAN, etc etc) don’t mention specific distros and I also would not expect CSS-Tricks.com to write about Linux distros. But the answer of course was that it’s not Alpine Linux, it’s something called Alpine.js.
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 ago
  Have 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 ago
    I 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 ago
      Look 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 ago
        thanks for the heads up, gonna try integrating this today and see what happens
- dsego 6y ago
  Consider redom, mithril, snabbdom, riot.js, lighterhtml or even svelte.
- davidjnelson 6y ago
  React is great though, why not just use that?
  - cargoshipit 6y ago
    because then you need an api
gjsman-1000 6y ago
I've also been playing with Alpine, but on the also-newly-christened "TALL stack" [1] of Tailwind, Alpine.js, Laravel, and LiveWire. It's also worth a look. [1] https://tallstack.dev https://tallstack.dev
fouc 6y ago
PETAL is a good name! I was calling it TAPE (Tailwind, Alpine.js, Phoenix, and Elixir) http://tapestack.party http://tapestack.party

pspeter3 6y ago

Do you use Alpine with Turbolinks?

codetrotter 6y ago

I was thinking that Alpine here was referring to Alpine Linux, which I found strange in the context because often these sorts of acronyms (LAMP, MEAN, etc etc) don’t mention specific distros and I also would not expect CSS-Tricks.com to write about Linux distros. But the answer of course was that it’s not Alpine Linux, it’s something called Alpine.js.

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 ago
Have 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 ago
  I 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 ago
    Look 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 ago
      thanks for the heads up, gonna try integrating this today and see what happens
dsego 6y ago
Consider redom, mithril, snabbdom, riot.js, lighterhtml or even svelte.
davidjnelson 6y ago
React is great though, why not just use that?
- cargoshipit 6y ago
  because then you need an api

gjsman-1000 6y ago

I've also been playing with Alpine, but on the also-newly-christened "TALL stack" [1] of Tailwind, Alpine.js, Laravel, and LiveWire. It's also worth a look. [1] https://tallstack.dev https://tallstack.dev

fouc 6y ago

PETAL is a good name! I was calling it TAPE (Tailwind, Alpine.js, Phoenix, and Elixir) http://tapestack.party http://tapestack.party