malloryerik

malloryerik

Svelte - what do you think about it?

Any thoughts on Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser , Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Most Liked

dorgan

dorgan

I’ve used it, both svelte and sapper.
My opinions:


The good:
It’s reactivity works well, you get used to the special syntax bits very quickly, so don’t be afraid of it.

Overall it’s quite fast, both for those synthetic benchmarks(look at how I render a million dom nodes with my library instead of using canvas!) and for real use cases.

It comes with a state management solution(stores), animations and transitions out of the box.

Sapper makes sense, and is a fast and quite batteries included solution for both SPA and SSR. You can get an decent SPA with SSR website up and running in a couple minutes. Handling cookies can be a bit confusing at first, though.

It’s relatively easy to integrate with other js libraries, I wrote some bindings for prosemirror while learning it and it worked quite fine.


The bad:
It’s output doesn’t work in legacy edge nor older browsers(try to see any NYT article featuring Rich Harris visualisations on an older browser, it just doesn’t load).

There’s no way to access child nodes. If you want to wrap individual childs(say, receive a list of components and wrap each of them in some other component, like you would do with special list items), you can’t.
For example, I created a ListStream component that imitates discourse’s cloaking behaviour(unmount out of screen dom nodes), and I had to pass the list items as a prop for the ListStream to wrap them, which is a horrible workaround in my opinion.
There was a discussion about that in the svelte’s discord when this article was published and there was no solution. Responses from contributors were too defensive from my pov(part of that was valid: the medium article wasn’t particularly good, but it had valid criticism on svelte’s lack of reflection) and ranged from “yes you can” or “why would you do that”, but no examples of how is it possible was given, and it was proven to be impossible.

That discussion and Rich’s responses in his Why I don’t use web components article, where people addressed his criticisms and he replied with snarky comments or refused to continue the discussion left me with a bitter taste. I would like to see more transparency and discussions about svelte’s weak points too, so they can be addressed properly.

Typescript support was bad a couple months ago, though it is supposed to improve sometime in the future.


Overall it’s very good, and it’s worth trying out.

I’m not currently using it though, since I want to render as much html as possible with Elixir Phoenix and custom elements are more suitable for that usecase.

fzngagan

fzngagan

We’re at an opposite end of the spectrum working with Ember.js. Kinda maximalists :wink:

dimitarvp

dimitarvp

Sadly never worked with it – just heard a lot of good feedback from JS devs.

It’s kind of like Rust for JS, meaning that it compiles to “native” JS without you having to carry the framework with you. Which I quite like.

Where Next?

Popular Frontend topics Top

DevotionGeo
Dart is not the first language with that mistake, but it’s newer. It shouldn’t have repeated this mistake.
New
First poster: bot
Why do ARM chips have an instruction with Javascript in the name (FJCVTZS)?. FJCVTZS is “Floating-point Javascript Convert to Signed fix...
New
MikhailPertsev
Finally, I am going to enhance my css skills! I have always somehow ignored this, but now I finally decided to understand animations, tr...
New
mrmurphy
The situation Hi there! I’m working on a live view app right now that encrypts sensitive user content (text and images) using the browser...
New
KnowledgeIsPower
It seems it is going to change, currently they forked Next.JS. Now they want to stop forking it and change their project direction.
New
harwind
Why does the image in my <img> tag appear larger than its specified width within a flex container? Here’s my HTML and CSS code: HT...
New
riyajohnson
When it comes to selecting a framework for a development project, it’s crucial to make an informed decision. With so many options availab...
New
jaeyson
Hi Elixir and React friends! I read a post (Stephen Bussey - React in LiveView: How and Why?) on use case for reaching react for complex...
New
zoosky
Hi! After working hard on this side project (a Rust based Markdown CMS for humans and agents) and reaching a level, where the product can...
New
Amzy31
Charlex WebOS: A Zero-Trust Web Page as an Operating System Experience a fun and innovative web-based operating system simulation crafte...
New

Other popular topics Top

PragmaticBookshelf
Andy and Dave wrote this influential, classic book to help their clients create better software and rediscover the joy of coding. Almost ...
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
PragmaticBookshelf
Build highly interactive applications without ever leaving Elixir, the way the experts do. Let LiveView take care of performance, scalabi...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29994 760
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New
PragmaticBookshelf
Overarching tutorial for Python beginner and intermediate developers that teaches web development with the Flask framework. Miguel Gr...
New
PragmaticBookshelf
Write elegant Ruby code—not just correct, but idiomatic. Go beyond the vocabulary and syntax and learn to express yourself with eloquence...
New