Svelte: 10 Reasons that make it the best JavaScript Framework
Svelte is probably the best front end framework till date, given how little mess it leaves in the runtime and how little boilerplate it adds in author time.
It’s simple just like Handlebars (albeit without 2 curly braces), yet powerful. It takes Handlebars further, by facilitating updates of the DOM, event-handling, frontend-backend communication and much much more.
Frameworks are not tools for organizing your code, they are tools for organizing your mind. — Rich Harris
Reasons
Here’s a list of all the reason front end development should happen using Svelte.
1. Truly Reactive
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
It uses a labelled statement (aka Destiny Operator), to facilitate change detection. So:
- App doesn’t waste precious compute power going through code that doesn’t change.
- Battery friendly apps should avoid other frameworks altogether.
2. No Virtual DOM
Virtual DOM is slow, and even the react team knows that.
That’s why they have given us, Abstraction Leaks, to tell the dumb framework not to update somethings:
shouldComponentUpdateReact.pureComponentuseMemouseCallback
In Svelte however, change detection is much more precise as the compiler knows what to update when something changes, thanks to its advanced Reactive nature.
So no overhead like a Virtual DOM is even remotely necessary.
3. No Boilerplate
React apps are 40% larger compared to Svelte app, due to boilerplate code. If you have worked with React, you can relate.
I have to make changes to 6+ files to get something done, and that doesn’t say how many lines of code I have to repeat. (DRY Principle is thrown out the window.)
- Add a Actions Constant.
- Create Actions.
- Modify Redux.
- Create Saga.
- Update Target file to fire the action.
- Update Destination file to react to changing Redux state.
Svelte overcomes that by:
- Writing in vanilla HTML, CSS, & JS syntax.
- Not expecting us to learn something like JSX. No more muddying the HTML with JS.
- Inbuilt streamlined State manager.
4. No Runtime
Unlike React, Vue or Angular, that do the bulk of their work in the browser at runtime. Svelte is a compile time framework.
A framework should be thing, that runs in your build step.
It shifts that work into a compile step, taking our high level declarative components and turning them into efficient, imperative, low level code to manipulate the DOM directly.
All these results in a framework free vanilla js code at runtime.
The implications are:
- Faster initial load.
- Faster payload delivery due to small size.
- Unnecessary updates never happen. (Which you get to see when you put a breakpoint in a React app!)
- Less performance hits on run time as all optimizations gets performed in compile time.
- Unused CSS gets removed in the build step.
- It even points out missing attributes, that are necessary. (Like alt attribute in an image tag)
5. Component Scoped Styles
CSS is component scoped, which saves a lot of headache, Styling won’t leak outside a component or leak into one.
Unnecessary styles gets purged by the compiler, so no more forgetting to remove unused CSS.
It’s even easy to change style, classes programmatically without even using a CSS in JS library.
6. Server Side Rendering
AWS bills will be lower, as Svelte doesn’t need to create a component tree & then serialize it. It just outputs a string.
Sapper takes the component framework and makes it an Application framework and adds:
- Routing.
- Code splitting.
- Progressive Web App.
- Static Site Generation. (See Jamstack for more)
7. Transitions & Animations
Unlike other frameworks, where animations are an afterthought, and not really part of the library. Svelte believes it to be core of the user’s experience.
There’s libraries like GSAP, to achieve animations, but is it too much to ask for something built in with the framework that doesn’t add a lot of weight to the website.
Svelte compiler converts javascript based animation to optimized CSS animations. Which means:
- Animations will work in low powered devices.
- Animations will be GPU accelerated.
- Animations won’t block main thread.
- The build will work even with JavaScript disabled.
- Applications won’t drain as much battery, compared to a CPU based animation.
- Web Apps look pretty with micro interactions. See: Micro-Interactions: a Designer’s Superpower!
See: Demo Animation
8. Built in State Manager
Not all application state belongs inside your application component hierarchy. Sometimes, you’ll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
There are as many state manager, as there are frameworks. (Redux.js, Effector.js, …)
But the built in state manger is just sublime.
9. Small yet Fast
If the points mentioned above, doesn’t speak volumes about how revolutionary this Framework is, maybe a demonstration will.
- Smaller size means, less JS to parse for the Browser.
- It even beats Rust compiled down to wasm!
See: Visualization Demo — How Svelte beats react without gimmicks like Async or Debounce.
10. Uses Observables
It just works with RxJS out of the box. So:
- Folks using Angular can just jump right in and feel at home.
- Folks using Firebase, can use RxFire with Svelte.
- RxJS is a combination of the best ideas from
Observer Pattern,the Iterator Pattern, andFunctional Programming. - Concurrency becomes easy.
- Async error handling becomes possible.
Conclusion
Svelte is quite literally the Tesla of Front end frameworks!
However, you can take it to the next level with: Micro-Frontend
Let me know your thoughts down below.
If you liked this, you might also like:
