Svelte and Sapper — Initial thoughts after a course by Rich Harris (the creator of Svelte) and a mini project
I recently completed 2 courses on Svelte and Sapper — one by Rich Harris on Frontend Masters and another on Udemy. I built a mini project using Svelte and recreated it in Sapper — here are my first thoughts.
What I loved
Syntax — the syntax is soooo much leaner!
There’s very little boiler plate and the way its structured as regular html with script and style tags — it’s very easy to copy markdown and styles from a reference you really love. Personally, I felt like I had much less resistance to creating new components, simply because of this:
Rich Harris says that Svelte components are typically 40% less code than React. Now this example is very basic so I don’t know if the difference is going to be that large every time. But I definitely see the benefit of using Svelte.
Global Store Management Simplified
If you’ve been using Redux — this will feel like a God send! Creating a reducer is can be soooo frustrating. For me, it typically went like this. Start the reducer file -> realise I need the action constants -> create the constants in the actionConstants file -> complete the reducer -> Create the action constants -> Dispatch the action from the component… and obviously, it fails because I forgot to add the reducer into the combinedReducer. BTW, I still need to write a selector — Ahhhhh!
This gets so much simpler with Svelte. The Svelte store is like a class that has encapsulated access to the store and exports the methods needed for manipulating the store as key value pairs — that’s it!
All you need to do now, is import the store wherever you’re using it and access it’s methods like this — store.addMeetup(obj). You could even add a selector to this same file!
Easy to Learn
I did 2 courses for Svelte — and they were really helpful. But if you’re familiar with React, implementing Svelte will be a breeze. It’s really easy to create a new Svelte project with their degit command — just like Create React App. The tutorial at https://svelte.dev/tutorial/basics is all you will need to learn the syntax. The structure of components is essentially the same and we have very similar life-cycle events (onMount, onDestroy). useEffects and useMemos implemented using ‘$:’ statements (which I find really cool — no dependency array BTW).
The concepts of Sapper map over very well to Next.JS. The folder strucure is essentially the same and the pages work in the same way.
- Next — ‘pages’ directory = Sapper — ‘routes’.
- export async getInitialProps = export async preload
- _app.js = _layout.js
- <Head> = <svelte:head>
There are a few nuances, but it’s nothing major.
“Await” blocks in html
This pattern is so common — we are waiting for a promise to resolve, we want to show a loader till the time it does. If it resolves, we show the content, if it rejects, we show an error message. With React, that meant managing the store, a loading variable and an error variable. Svelte handles this internally and gives us this cool ‘await’ block!
Styles, animations, transitions
Styles are really intuitive to add. Just add the style tag in the same .svelte file — it’s like css in js — except it’s actually css! The styles are automatically scoped to that specific component. No added boiler plate for that.
Animations and transitions come out of the box and don’t need to be added to css. Instead, you can add them to your elements as props!
It’s really intuitive to write and it makes the UX so much better.
The fastest one yet
Svelte is benchmarked to be 35 times faster than React! That’s insane. Although, this will probably never be an issue — React is performant enough that you won’t face a bottle neck because of this. I still love that it’s so much faster. And because Svelte is a compiler, not a framework, your build sizes are smaller because you just ship the parts of Svelte that you use and not the entire optimized framework like React.
Concerns
Sometimes it fails silently
Sometimes, if you change your code and something has gone wrong, Svelte may serve up the last working cached version of your code rather than breaking the code (At least I think that’s what’s happening). Error messages show up in the console rather than as a loud pop up — and since I’m used to next and react failing loudly — it’s going to take some getting used to.
Community Support
React is huge and support for React is very easy to find. This isn’t the case with Svelte as yet. So packages and support may be a bit difficult. However, there are enough companies already using Svelte which should give us the confidence to move ahead with it.
