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

React is not fully reactive

— Dan Abramov (@dan_abramov)

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:

• shouldComponentUpdate
• React.pureComponent
• useMemo
• useCallback

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.)

1. Add a Actions Constant.
2. Create Actions.
3. Modify Redux.
4. Create Saga.
5. Update Target file to fire the action.
6. 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

Compilers are the new frameworks.https://t.co/BcAQeoIdcL

— Tom Dale (@tomdale)

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)

For fast and secure sites | Jamstack

What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it’s the best approach for building faster, more secure websites.

---

N.B. Sapper is about to be deprecated and replaced by Svelte Kit. See:

What’s the deal with SvelteKit?

We’re rethinking how to build Svelte apps. Here’s what you need to know

Rich Harris Thu Nov 05 2020

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:

Svelte tutorial

Animations / The animate directive

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.

Svelte tutorial

Stores / Writable stores

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.

See: - How Svelte beats react without gimmicks like Async or Debounce.

Benchmark Ranks 18 Front-End Frameworks Implementation of Medium.com Clone

The RealWorld-based benchmark comparing the implementation by 18 front-end frameworks of a non-trivial full-stack application code-named Conduit recently updated its results. Most (13 out of 18) frameworks obtain a top-tier LightHouse performance score. Svelte, Stencil, AppRun, Dojo, HyperApp and El…

InfoQBruno Couriol

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, and Functional Programming.
• Concurrency becomes easy.
• Async error handling becomes possible.

If Svelte and RxJS had a baby

Learn how to use RxJS with Svelte and why they are such beautiful couple

Ilia Mikhailov

Conclusion

Svelte is quite literally the Tesla of Front end frameworks!

However, you can take it to the next level with: Micro-Frontend

Micro-Frontend: The best Vaccine to React, Angular & Vue.js Pandemic

It’s high time we break the monolith architecture in the front-end, the way it’s broken in the back-end: stateless, componentized, tech-agnostic & separate!

Derpy CoderAbhijit Kar

Let me know your thoughts down below.