Setting JavaScript framework standards ( what’s wrong with the React-set standard and why everyone should be like Svelte)

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