React is great, yeah, absolutely no lies. Released on May 29 2013 and maintained by Facebook (coughs - “Meta”), it has grown to be the the most used JavaScript framework - or library 🌚, Suppressing Angular and kicking jQuery in the nuts.
The standard way of building web apps has so far been defined by this superhuman framework and it’s been the most recommended framework for a long time, but what if it’s about to change?. React, for all its glory sadly is shit ( we all know it, yes. But we won’t admit it), it’s sadly gone down the over complexity road that so many of our beloved frameworks have and has been a messy mud fest.
In this article, we will look at some aspects of React’s web standards that are not so brilliant and why Svelte should set the latest standards for JavaScript frameworks and web development. Now you might not agree with me, but hopefully after this is over you’ll take a good look at yourself and say, “maybe this bloke might be right”.
State Management
State management is one of the useful aspects of most JavaScript frameworks, It is the management of input or data state across multiple data flows across an application.
React does have in-built state management capabilities, but you’d rather use Redux or some other state management tool because it’s not the best to work with.
Here is an example of state management in Redux:
// store.js
import { createStore } from 'redux';
const initialState = {
count: 0
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
const store = createStore(reducer);
export default store;
// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions'; // Create these actions
const Component = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(increment())}>+</button>
{count}
<button onClick={() => dispatch(decrement())}>-</button>
</div>
);
};
export default Component;
The equivalent of that in Svelte, using Svelte Store:
// store.js
import { writable } from 'svelte/store';
export const count = writable(0);
// component.svelte
<script>
import {count} from 'store.js'
const increment = () =>{
count.update((n) => n + 1);
const decrement = () =>{
count.update((n) => n - 1);
}
</script>
<button on:click={increment}>
+
</button>
{$count}
<button on:click={decrement}>
-
</button>
Component Boilerplate
React components can sometimes require a lot of boilerplate code, especially when dealing with state management, props, and lifecycle methods. Svelte's simplified syntax and reactive statements can significantly reduce the amount of boilerplate, making codebases cleaner and easier to maintain.
Now you might say React is a more matured framework and Svelte just took advantage of it’s shortcomings to create a more efficient system, but frameworks can always evolve, and React should also be expected to. In my opinion, code should be fluid and shouldn’t have so much boilerplate.
Performance Benefits
While React performs much of its work at runtime, Svelte's build process analyzes and optimizes your code, it generates efficient JavaScript that directly manipulates the DOM. This streamlined approach usually leads to faster load times and improved runtime performance.
Svelte avoids using the Virtual DOM, a core concept in React.
While the Virtual DOM minimizes direct DOM manipulation, it introduces a reconciliation process that can sometimes slow down updates. Svelte, however, compiles components into lean JavaScript code. As a result, Svelte updates and renders components more quickly, enhancing the overall responsiveness of your application.
Tooling Integration
Tooling integration plays a pivotal role in shaping the development experience of modern web frameworks. React, is known for its flexibility and extensive ecosystem, but it often needs a lot of configuration and setup to harness its full potential ( Do simple things most times).
Developers often navigate through a maze of build tools, transpilers, and linters, which can occasionally slow down project initiation and hinder rapid development.
In contrast, Svelte favours those seeking swifter project setup and streamlined development workflows. Svelte's shifts the burden of heavy tooling away from developers, thanks to its compile-time framework that generates optimized JavaScript code.
The absence of a virtual DOM in Svelte simplifies the tooling landscape, resulting in a lighter configuration process and reduced cognitive load. As a result, developers can swiftly dive into coding, unburdened by the tooling complexities that React may entail. This attractive balance between functionality and simplicity positions Svelte as an appealing alternative for projects where rapid iteration and minimal setup friction are important.
So yeah, those are my thoughts, if you haven’t used Svelte by the way, try it out at svelte.dev
Top comments (9)
Svelte is fine. React is fine. Vue is fine. Angular is... . We can continue this list with Astro, Mythril, Ember, SolidJS... . just to name the most popular "frameworks". We should also mention that this is only part of the show, there are good reasons why people need Tailwind or Bootstrap to get some usable boilerplate. And dont´s forget the backend side...
The problem is not, that our tools are not good enough. There are simply too many of them. All the interlectual property people spend seeps into this swamp of "good solutions". If you contribute to React, your effort is lost for all other tools.
There are good reasons, why 43,1% of the websites are powered by wordpress. Wordpress is a world of it´s own, it uses HTML and CSS only as a vehicle, it is not built on it. And it tries to deal with the whole cake, not just with a piece.
Yes, Svelte is nice and I also like the approach they took. But will it serve on the long run? I suppose, the web would need a bigger step forward, not just a new plaster on old wounds...
The web space is stuck in a loop, too many new tools are being released and it’s sort of a problem. But I think Vanilla JavaScript will just evolve to solve many of the problems some tools help us solve, just like they did to jQuery.
Part of the problem are the conceptual issues of the initial system of HTML, CSS and Javascript. As long as JS can access the DOM only via global ID´s, you will not be able to establish any reusable and more advanced concepts of interaction,
Libraries like VanJS or DML try to overcome this issues, both with a slightly different approach. But they share the concept to build the DOM completey from within Javascript, making HTML superfluous.
I hope, this concepts will gain more impact over the time.
Svelte is great, but they've learned from Reacts mistakes. They're standing on the shoulders of React, which is standing on the shoulders of Angular.js, which is standing on jQuery.
Yes, I think we’re seeing a pattern here.
VueJS learnt from React and Angular, Svelte also learnt a few from Vue’s mistake. It’s only a matter of time before some new framework learns from Svelte.
Nice article!
ReactJS for me was ok(ish), until hooks were released...
Svelte's is really great. It was totally inovative, much simpler, faster and smaller. What else to ask from a framework?
It's really hard to understand how React keeps leading... It's just because of it's huge community.
Now we've also SolidJS as a nice alternative, it's kind of a React V2.
Thanks!
I haven't tried SolidJS yet, but if it's as nice as you say without the complexity of React, then it's.. Solid.
Nice and Interesting, Well Written!
I've tried them all along the way and settle with Plain Vanilla JS because too much overhead using frameworks when only small amount of JS is needed.
I wrote a Dev article on 17 reasons why I prefer Plain JS over React
find it here at
dev.to/rickdelpo1/react-vs-plain-j...
Thanks a lot, I’m glad you found it helpful!