Background and Context:
Day to day, I build React applications using the amazing Next.js framework. I love the React Ecosystem, but recently I was intrigued by all the interesting developments surrounding Svelte - and not being really familiar with it - I decided to investigate and was very excited by what I discovered.
My overall impression is that Svelte seems to be in a similar place now as the Rust programming language was a few years ago. Svelte is currently very beloved by its still comparably small community of users. But - as it was with Rust a few years ago - Svelte seems almost destined for growth and success.
In my eyes, Svelte is currently the top contender to disrupt the React and Vue duopoly of JavaScript UI libraries. In the next few years, I wouldn’t be surprised at all if Svelte became the dominant way to build for the Web.
Here are my Top #10 reasons for why I think this is the case:
10: Growing Ecosystem
The monthly “What’s new in Svelte” blog post is regularly filled with announcements of new and interesting projects in the Svelte ecosystem. I think part of the reason why this is the case is the current excitement about Svelte, but I’m convinced that the other part has to do with Svelte's technical architecture - that I’m going to cover higher in this list.
Svelte Fall Summit 2021 has seen the announcements of several libraries built specifically to be used with Svelte
- svelte-cubed - A three.js component library for Svelte by Rich Harris (the creator of Svelte)
- svelte-fsm - a tiny finite state machine library for Svelte
- Several static site generation tools - Primo, Plenti and Slinkity
A few self standing open source projects have demoed their support for Svelte during the Summit, among them:
- vest - a framework for form validation
- unplugin-icons - a library enabling the universal access to tens of thousands of SVG icons
9: Svelte Stores
Svelte takes a different approach to React when it comes to the application global state.
While React has a very UN-opinionated stance on this topic - offering only the loosely coupled assortment of utilities that the developer needs to integrate correctly how they see fit, Svelte offers an opinionated default approach in the form of Svelte stores - which feel like a natural extension to JavaScript modules.
In my opinion this is should result in higher productivity when developing with Svelte, since the application global state is such a common feature that it gets reinvented unnecessarily so many times.
8: Svelte is a compiler
This cannot be overstated: Svelte is a compiler, and not a library or a framework in the sense that React and Vue are.
In a React app, the React library is sent to the browser as part of the JavaScript bundle alongside the application code.
Svelte compiles the application down to Vanilla JavaScript - and browsers themselves don’t interact with Svelte at all.
Due to not being present in the browser, Svelte is also thought of as being a “disappearing framework”. This approach has already been proven to improve the performance and the overall developer experience.
7: Svelte's true reactivity
In React, reactivity is tightly coupled to setting state and rendering the UI.
In Svelte, reactivity is more fundamental and can apply to any JavaScript value at any time - independent of component renders.
Another major difference in how React and Svelte treat reactivity can be seen in the way that a component tree is rendered in each of them:
In React, an update to the state of a top level component could cause a rerender of entire component tree - to achieve more optimized rendering performance, developers could opt-out of renders by using React.memo and the useMemo and useCallback hooks
In Svelte, for updates to propagate to the UI, the developer needs to opt-into the updates explicitly which makes Svelte’s default behavior more performant than the one in React.
6: Svelte's embedability
Guillermo Rauch - Vercel’s CEO - calls this property of Svelte fractality.
This term describes that Svelte can incrementally scale from:
- Being embedded in a large software project through to...
- Forming a Single-Page-Application ...
- or even implementing an entire Multi-Page-Application with the use of SvelteKit
Multiple speakers during the Summit have shown how easy it is to embed Svelte into an existing application - whether it’s PHP, React or anything else.
We’ve also seen a demo in which React was embedded into Svelte - proving that Svelte’s embedability goes both ways.
5: Vercel's vision for Svelte
Rich Harris, the creator of Svelte, has recently joined Vercel and this announcement has sent waves around the Internet.
Vercel is the company behind Next.js and the Vercel serverless platform - and their mission is to “empower developers to make the Web better”.
During the Summit, Guillermo Rauch, the CEO of Vercel, has shared his vision for the future of Web App development, which I would summarize as:
- Vercel is looking to achieve the ”fewest number of keystrokes from an idea to an app” and they see Svelte playing a key role in this
- Vercel is all about the edge, and they’re looking to put Svelte apps everywhere - closer to users!
Credit to Guillermo Rauch for realizing again what the future will look like and steering Vercel in the right direction. This decision is particularly impressive in the light of the fact that SvelteKit is a direct competitor to Vercel’s own Next.js.
Out of all of the companies that lead the new wave of innovation in Web Application development - among which I primarily count Vercel, Netlify and Cloudflare - Vercel seems to be particularly willing to lead the shaping of the developer tools that the entire community depends on in an open way.
4: Svelte's Gentle Learning Curve
A significant amount of anecdotal experience - including my own - backs the idea that it’s easier to learn Svelte than it is to learn React or Vue.
Svelte seems to offer a middle ground between using a full blown UI framework and using Vanilla JavaScript. This is because Svelte concepts build directly upon Web technologies and APIs available in every browser.
Because Svelte is a thin layer on top of the existing Web technologies, this makes it particularly suitable for teaching HTML, CSS and Javascript.
A repeating theme throughout Svelte Summit was the idea that development with Svelte is fun - because Svelte offers a great mix of:
- The power of a modern declarative UI framework with built-in support for animations, transitions and state management
- Unhindered access to the underlying technologies that make the Web the awesome platform that it is.
3: Svelte Kit
SvelteKit is Svelte’s own Post JAMstack, hybrid framework similar to Next.js.
I think the big reason why React is so popular is the amazing tooling ecosystem built around it which includes Next.js, Gatsby and Create-React-App.
Svelte is on track to have an amazing tooling ecosystem as well.
The most prominent tool in this ecosystem is SvelteKit - which is to Svelte what Next.js is to React.
SvelteKit is being prepared for 1.0.0 release and a month ago it was reported that it’s over 80% done.
Internally, SvelteKit is powered by Vite.js and builds on the experience of a previous framework for Svelte - called Sapper.
Now that Rich Harris is at Vercel, I wouldn’t be surprised if many great ideas from Next.js end up in SvelteKit and the other way around. I think this can only benefit both React and Svelte development tooling.
An innovation on part of the SvelteKit: it’s not only a toolkit for app development but it’s also intended for Svelte library development as well. This means that both can be developed side by side within a same project and then a developer has a choice of either:
- Deploying the app
- Publishing the library
2: Svelte's Ergonomics
The ergonomics of a development tool is the key determining factor in the developer experience and in this category - Svelte is objectively ahead of any other UI framework.
In the React world, the move from Class based components to functional components with hooks has been hailed as a major improvement to the ergonomics of writing a React application.
In the similar way, it is now argued that when moving from React with Hooks to Svelte, expect to see similar improvements to ergonomics.
Svelte has kept the declarative nature of its predecessors, but offers DX improvements in:
- Fewer lines of boilerplate code
- Better composability of the UI code with the other parts of the application
Having this in mind, the argument could be made that Svelte is the next generation framework after React and Vue - and that it has a very bright future indeed.
1: Svelte's Performance
Being a compiler opens Svelte to performance improvements that are simply out of reach to other JavaScript UI frameworks.
Svelte doesn’t send its own UI library JavaScript bundle when an end-user visits the page. What is sent over the wire is the exact amount of JavaScript required for the dynamic features of the app - and nothing more.
During Svelte Summit we have seen comparisons of the same app being built in Svelte, React and Vue, with the Svelte app outperforming the other two libraries across all metrics, including:
- Code Size
- Bundle Size
- First Contentful Paint
- Speed index
A major factor in Svelte’s performance in the browser is the fact that Svelte has done away with the notion of Virtual DOM - reducing its memory footprint relative to other frameworks.
The systematic approach of Svelte’s team towards achieving great performance outcomes across the board is also visible in the way they’ve approached NPM packaging and managing their dependencies.
In summary the approach of the entire Svelte project just shows a huge amount of mindfulness and care.