Hacker News new | ask | show | jobs
by hamilton 2541 days ago
As someone who has built a number of data products w/ React, I decided to give Svelte a try a few months ago. At this point I am using it on some internal projects to great success & ease and probably wouldn't go back to React for newer projects unless there was a compelling reason to (eg collaboration w/ other React devs). As a disclaimer, I admire the React community + devs and think React has made a lot of hard things much, much easier.

A few unvarnished takeaways from a data science / viz point of view that I was thinking of writing up, but will use HN as a sketchpad:

1. I don't really miss the React 3rd party ecosystem as much as I thought I would. Since most of what I do is data viz / data presentations, I really just need a few d3 helper functions, and most other things I can build myself w/ svelte's affordances. The biggest downside, however, is that there aren't any good accessible UX component libraries for Svelte, so I have built my own. This all said, I'm productively code-homesteading and I love it. Animating component lifecycles, component style scoping, and state management are 1st-class citizens, so these pieces are pretty high-quality, usable, and thoughtfully built.

2. my "time to first meaningful render" metric was at an all-time low with Svelte. Getting started on a new idea or project is far, far easier than w/ any React project I've ever done. Substantially less boilerplate means I can get much, much more done in the same amount of time. I feel this every time I jump back into the React projects I work on & maintain.

3. as my apps have grown in complexity, I've found that Svelte really holds up beautifully. The style/layout/behavior colocation strategy keeps the cognitive overhead of working on all the parts of multiple components to a minimum. The performance gains of Svelte, even with complex components and interactions, feels magical. Bundle sizes are bizarrely small.

4. as someone who feels CSS will absolutely outlive all of these frameworks, I think the design of Svelte really feels like the best of both worlds. And that's how it should be – css + markup should be first-class citizens.

5. the testing story isn't fully there yet, so I would say to that end, proceed with caution. I typically try to compartmentalize JS logic from presentation as much as possible, but perhaps you don't.

6. the reactivity parts shine everywhere and are fairly easy to reason about in all cases, but they REALLY shine when you're building complex visualizations.

7. this is an important one to me – building something in Svelte really tickles the same part of the pleasure centers of the brain that JQuery did for a previous generation (and d3 did for early data scientists). You just SEE the thing work, effortlessly, at a low cognitive cost, and everything fits together so nicely. I often start svelte-powered experiments and end with a great, reusable component. I think there is a large group of engineers who remember the JQuery days and sat out the React era because it just seemed like way too much to do simple things. I think Svelte is especially for them.

In sum, really highly recommended to at least try it. I wanted to find evidence to discount Svelte, but haven't found any at this point, despite my best efforts. There is probably a certain class of dev that should be trying it – one without a ton of organizational constraints, probably. But if you do data science and want to level up your data presentation skills, you should be using Svelte imo.

1 comments

I've been considering svelte for exactly this d3 datavis use case. Are any of your projects publicly available to explore and get a feel for? I'm new to front end and so far have been disappointed with the speed of plotly and dash, which as I understand it are written around react. I'd love to see an example of svelte performance in a more datavis use case.
Unfortunately not – they're all private, internal views at the moment. I do hope to clean up some of my components and write something about some of the cool workflow aspects I've been able to unlock.

In the meantime, I would recommend walking through the tutorials & examples. They're very well written and I go back to them regularly to try out different parts. Try just making a simple line chart! Now make six on one page! Now try to link the rollovers for all of them! You'll probably learn a ton doing just that.

as an aside, Rich made svelte, according to a podcast I was listening to, because he does dataviz for, currently the Times ( previously the Guardian ). So it should work well for that use case.
Thanks, that's exactly what I'll do this weekend