Phoenix+Ash+Svelte : Better together
This is the beginning of an Ash project using Svelte for responsive UX and collaborative editing via TipTap coming soon. It will become a daily team diary but it's mainly a tool for you and I to learn how to get up and running with performant code fast. This is the result of about 30 hours of mostly client-side work. I spent more time on styles than I expected but I should have known better. This is an experiment in technology as well as "working in public." While nothing will be earth-shattering, I think you will be surprised by how few lines of actual code (Elixir on backend, JavaScript on frontend) will be written. https://github.com/dev-guy/ash-svelte-flowbite
GitHub
GitHub - dev-guy/ash-svelte-flowbite
Contribute to dev-guy/ash-svelte-flowbite development by creating an account on GitHub.
9 Replies
Very cool! LiveSvelte sounds very interesting 😄
More sounds and even pictures https://www.youtube.com/watch?v=asm2TTm035o
ElixirConf
YouTube
ElixirConf 2022 - Ryan Cooke - E2E Reactivity - using Svelte with P...
In this talk, Ryan will demonstrate how to use Svelte with Phoenix LiveView to create a dramatically reactive and fast user web experience. By leveraging Svelte's reactive component properties, combined with LiveView's web socket assignments, page rendering and state management transforms into a fully cohesive pattern from the back end to the br...
@Terris In your opinion, is LiveSvelte ready for production?
LiveSvelte is about to add a sigil (https://github.com/woutdp/live_svelte/discussions/33) to make it easier to use. SSR is probably something that most people would disable as a lot of Svelte usage doesn’t support it and I doubt many Elixir devs want to be running Node or Deno in production. LiveSvelte is cool but it doesn’t do much, which means that there are fewer things to go wrong so IMO it is production ready because Svelte is rock solid. The combination of Svelte and LiveView makes combining server and client state easier. I am currently working on integrating a design system with semantic colors and small look-things like rounding. This has nothing to do with Svelte or Phoenix but as Svelte has a larger community, it is further along in that regard. Whereas phoenix has only recently added Tailwind, Svelte Skeleton has been implementing a design system on tailwind for much longer (see https://www.skeleton.dev/docs/tokens and watch https://www.youtube.com/watch?v=JbxKTBvSLeY). Only small projects and MVPs hard-code color names in a billion places. Green and blue should instead be called primary and secondary.
GitHub
Sigil in LiveView for Svelte · woutdp live_svelte · Discussion #33
So I had this idea that you can use a Sigil for defining Svelte inside the render function, inspired by https://surface-ui.org/ I think it should be possible, here's the idea: Before defmodule ...
Skeleton
Skeleton — UI Toolkit for Svelte + Tailwind
Skeleton is a fully featured UI Toolkit for building reactive interfaces quickly using Svelte and Tailwind.
Thanks! Svelte is great and I like the idea of pushing what you want to the elixir "store" and the compartmentalization of a single component in one easy-to-read file.
If you haven’t seen this video, it’s powerful. https://www.youtube.com/watch?v=JMkvbW35QvA
Wout De Puysseleir
YouTube
LiveSvelte - Render Svelte directly into Phoenix LiveView with E2E ...
Github: https://github.com/woutdp/live_svelte
Examples: https://github.com/woutdp/live_svelte/tree/master/example_project
Blog post: https://wout.space/notes/live-svelte
Chapters:
00:00 Intro
03:57 Example 1
05:54 Example 2
09:49 Example 3-5
15:22 Example 6
20:24 Example 7
24:58 Example 8
30:04 Conclusion
I’m still learning. For example, I’m still not sure what the word component means exactly in Phoenix and liveview. It seems trivial but there are details.
Yep, I've watched it and looked through the examples. Like you said, the Svelte community is larger with a lot of components ready to go. I like the idea of utilizing what's already built and sprinkling in a server-side store vs recreating components and writing the JS
But maybe I feel that way because I'm newer to Elixir...and a bit lazy
The Phoenix community is generally anti-javascript. If you're proficient in JS, LiveSvelte is for you. Phoenix and LiveView are for battle-hardened scalability, collaboration, and API-less app development. Svelte completes the picture.