Svelte : Toji Fushiguro of Javascript Frameworks.
Tags: webdev, react, svelte, javascript
Published: 2023-12-22 18:52:56

# Some Context: 
Consider the world of Jujitsu Kaisen , where we have real sorcerers who fight using magic powers called cursed Energy ,highly skilled individuals can harness Cursed Energy for healing and other combative purposes.
Satoru Gojo is the most powerful Jujutsu Sorcerer, known for his exceptional combat skills, mentorship, and dedication to protecting humanity in Jujutsu Kaisen.

warning : This post does contain opionated takes and does not entirely represent overall concensus on either react or svelte.


# Introduction : 
**yes** , this is a real blog post , covering a real topic based on [svelte](https://https://svelte.dev) .
A while ago I was watching Jujitsu kaisen's second season , while studying about svelte, And I wondered to myself , if i had to explain the concept of svelte by associating it with a character from JJK , who would I choose?_( wierd , I know)_

--- 
well , let's compare modern frameworks like React(Next.js), Angular , Remix ,Vue. 
we know that React is by far the most popular and dominate almost every other framework , just like Gojo.

---
The framework in question must not only be distinct from all others, but also provide an alternative to something like React. Upon considering this, it became clear that Svelte is the only option that fits these criteria.
Whyy?? let's Dive into Why. 

# No virtual DOM. 
The Virtual DOM is a concept used in web development frameworks like React. 

It's a lightweight copy of the actual Document Object Model (DOM) and is stored in memory.
 When the state of a web application changes, a new virtual DOM is created and compared with the previous one to identify the differences. 

This process allows the framework to update only the necessary parts of the actual DOM, reducing unnecessary re-rendering and improving performance.
![virtual DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/234u84pol2a6tlncl87q.png)

 Almost all frameworks work on this concept , except svelte . Just like in the world of JJK , Toji is born with no Cursed energy , which powers almost all magic systems in the anime. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9isowmv2x4ddc1tpi7ym.png)


and just like Toji beating Gojo , Svelte outperforms almost all these frameworks every year in  Developer Interest . How? 

# Magic of Svelte {Compilers} :
Now lets begin comparing Basic Code in React and svelte. 

###Implementation of a simple counter in react and svelte: 

React Implementation :
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe9n7ioja2l92fq7l5ll.png)


Svelte Implementation : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16zl6rp5k179aj1zf2zy.png)

---

as you can see, If you  try to understand  Both react and svelte implementation , you have to deal with context of what is known as `useState()` .

 whereas in svelte we could just declare our state , look at just how different both of these implementations are 

```ts

// React
const [count , setCount] = useState<number>(0);

//svelte 
let count = 0; 

// 💡Simplicity at its best
```
This seems like a small deal but that's not the case , this design pattern of **Simplicity** over Specificity is the core philosophy of svelte .

 It `hides` the complex nature of interactivity , trusting itself over you to handle it , without using VDOM . 

This also makes it faster than VDOM , meaning _it overcame the limitations of interactivity without a virtual DOM ._

just like how Toji overcame his innate lack of Cursed Energy , instead using brute strength . 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj8bjm1li8c0bolzzzbp.png)

Do you want to know how svelte does this , the main magic that svelte has over React is that **it's a compiler**, yes , a compiler for javascript written in javascript. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojb2c6e1wguvu9bxv9q2.png)

The use of Svelte compiler is simply means we can choose any  type of language to abstract anything. 
It overrides the language , making JS do things it does not do on its own , overcoming the limitation of speed by VDOM system as well .








 
Now you see  why I chose Toji to personify Svelte , 
just like Toji , it uses misdirection , simple moves , does not use VDOM like every other framework. 

Planning things out before the developer gets the chance to write a single line of code . 

this is also seen in the size of JS bundler between React(Nextjs) and svelte.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af1w8962pex6ao32nw7k.png)

this paired with managable learning curve with architecture of SvelteKit (Fullstack Framework built on top of svelte) . 
mean we can Universally render pages on EDGE , meaning fast and smooth applications with top notch SEO and better DX, Overall makes the package just as viable as REACT does with Next.js and Remix.



# Disadvantages of svelte

### 1. Popularity 
although it is easy to jump ship on Side of Svelte , let us remember that there are still some disadvantages on using svelte right now . I could  say that 

>" If its a one on one comparison between React and Svelte without using libraries, Svelte would win easy."

But that's  not the case , Overwhelming Popularity of react and also many companies using it in production means that , there are much more mature implementation of react with many of its shortcomings being countered by the community , such a support is not yet seen by the Svelte community on par with react , but we will get there soon.

For e.g. [Million Js](https://million.dev) replaces the VDOM in react with a real DOM making react 70% faster .

### 2. Compiler Shenanigans : 
At some point you have to ask the question , how smart is the svelte compiler , since it's writing all the code , how smart is it really, are there limits to it ? Honestly , we don't  know unless we deep-dive into its architecture. I want to show you an example : 


```svelte 

<script>
let a = 10;
if (a>0){ 
//💀 Does Not work because Compiler only supports Top Level Let statement
    let b = True; 
}

</script>

{#if b}
<div>{a}</div>
{/if}
```
This is solvable with introduction of [$runes()](https://svelte.dev/blog/runes) but they have problems of their own , what about classes implementation , what do we know about the compiler . 

Just like TOJI , We don't fare well with things we haven't prepared for before in svelte , and the lack of examples do not help the situation.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56n53nby8tljvj8ye03g.png)



# Conclusion 
In conclusion It is highly likely that svelte could become a new paradigm shift against react , this entire 
I have been harsh on react .

 but to be honest , I still prefer NEXT on svelte , But I can't wait to witness a time when Svelte overcomes its limitations and become a new standard , for that It genuinely needs your support as well .

 This has been a Deep Dive into Svelte and all the thoughts in this blog post is essentially my opinion.

It was fun to Personify Svelte as Toji and I hope to do similar post on Nextjs as Gojo in the future . all in all , If you Support this , do checkout my other blogs .