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 .
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.
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.
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 :
Svelte Implementation :
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
// 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 .
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.
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.
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 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 :
<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() 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.
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 .
Top comments (5)
Please feel encouraged to make as many JJK references that will help. I’ve only started working with react Js. When I saw a post titling Toji Fushiguro, I almost lost it. This would be a great niche.
hehe , I knew someone would :) , Wanted to bring some light on Svelte , hope I did explain why its a cool tech and made you consider it as a viable option for future
just from the title its all cleared. I understand everything
ohh Thank you :) Hope I Could bring svelte into light more
Even though I didn't understand the characters mentioned, it was still a good read! Being firmly in the React and Next camp, I think it might be worthwhile to explore Svelte🙃