Great article! I'm in love with Svelte, it makes me feel so productive. Recently I made one small project with Svelte and then with React. Just to see the difference. React has more (better) tools like routing, making UI... which is natural. But developing this project with Svelte was pretty straightforward and fluid. I'm not sure if Svelte is ready to be used in large, complex projects though. What do you think? Thanks!
I am also using it in production.
Development experience with Svelte has been great.
I am blown away by it.
We did not have any issues related to the framework.
There are some features that we've felt that we need but they are not available yet.
Performance has been great. Stability, predictability has been great.
Compile time barely noticeable.
Looking forward to these suggestions! Right now I try to isolate my main .svelte file keeping only core structure there. Then I have an 'actions' folder and 'services' folder. Functions like fetchData() is inside services and listData() inside actions. So in my main .svelte I just call these actions. I think it's clean and easy to maintenance.
Where is the component named? In React it's the exported function name, but what about svelte?
Great question. In Svelte, you give a component a name when you import it. The whole file is the component, and it ends up being the default export. Typically you'd give the component file the same filename as the component name you want to be used. For example:
import Example from './Example.svelte';
Cool that makes sense. So definitely never two components in one file? I've been meaning to try svelte out lately. Just got to find a good project to test it with
Yes exactly, one component per file. It's an interesting design decision, but I think it's a smart one, because it really minimizes the boilerplate needed. In fact, an empty file is a valid Svelte component!
Yeah usually the only reason why I end up putting two components in one file for react is to avoid having to write those few lines of boilerplate over again. If I don't have to do that then I would be able to stick to the best practice of using a new file for every one
What about helper functions like 'useContext' and 'useEffect' any tips on how to share state or reconcile complex prop updates or cleanup event listeners.
Sure, Svelte has a bunch of features that can help here. Stores, onMount, context, and event dispatching. svelte.dev/docs
That's pretty compelling. I'll be in React Native land for a while, but maybe by then, there'll be a Svelte Native. Interested to see some more involved examples.
Great idea. I love rewriting React code as Svelte, I'd like to do a more complicated example in a future post or video sometime.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.