nikokozak
Hello all,
I’ve been working on Svonix - a library for quickly integrating Svelte components into Phoenix views. It’s a much-needed successor to Sveltex given that it’s been more than two years since any updates have been rolled out (Phoenix 1.6 is not supported), and because I couldn’t find any other libraries for integrating Svelte components with Phoenix views in a pleasant manner.
So far it’s been a real pleasure to use, with minimal (if any) pain points. It even includes a mix task that runs most of the tedious setup.
This is my first real attempt at a library, and I would love any help from others interested in Svelte + Phoenix integrations. I’ve been building it as I work on another project, and have been pretty lax regarding testing given that I’m not sure how to even go about testing a lib for Phoenix.
Other than that, I hope people find it useful - so far I’ve loved the productivity boost of being able to quickly integrate Svelte whenever more interactivity is called for, while still being able to use Phoenix views for most of my static content.
Have a lovely day!
Where Next?
Trending in Announcing
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All Posts (oldest first)
- Show All Posts (newest first)
cpgo
I’m not really familiar with the svelte ecosystem so forgive me if its a dumb question, but why not use the esbuild svelte plugin (esbuild - Plugins) instead of replacing esbuild?
nikokozak
Not at all! This is actually the next step I’m hoping to take, it’s just that I’m way more familiar with Rollup than I am with ESBuild, so I went with the former for my current project.
cpgo
Oh I see. That makes sense
egze
That’s a cool library. I wonder if there’s also something similar for VueJS.
nikokozak
@cpgo Just updated the lib to use ESBuild - thank you for the suggestion, recompilation is much snappier!
cpgo
Whoa that was fast!
I may use this as an excuse to start learning svelte again.
It looks like your readme link still points to rollup
https://github.com/nikokozak/svonix/commit/7d6648ac1986e0cad4d18afc7f5aedc01f2ec8a4#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L7
Eiji
@nikokozak I really like that
Svelteminifies transfer by fetching only required code. I was interested in this topic for a longer time. However I do not understand one thing …We have
LiveViewwhich gives us a low resources usage at client side and I see that in theory we can go fully intoSvelteSPA to have the reverse case. However what’s the sense of using anyJavaScriptonly partially?Do you think it’s reasonable to have only API over
Phoenixchannels and then useSveltefor theSPAto minify server resources usage or maybe this approach is too extreme?Do you plan to support or if there is nothing extra needed just write documentation how to setup
SvelteSPA using your library?LostKobrakai
I like the thought of a svelte SPA (possibly with node or deno on the server-side), but having a phoenix API as well as a svelte store implementation, which uses channels to sync data with the SPA similar to liveview, but as you said, kinda in reverse.
TwistingTwists
I am sorry if this is dumb, but
Can you give a real world scenario for this reverse Svelte implementation? Like where this sort of thing would be “necessary”?
Eiji
How about you want to render huge amount of data? I believe that in such case you may decide to stream data using
Phoenixchannel and render one entry or graph at a time, so the first (ordered or just most important) things would appear immediately. In some cases deliver content as soon as possible may be critical. Even on typical forums you have either pagination or render when needed strategies i.e. you never have rendering list of all topics.