As a frontend developer, we've reached an era where new technologies are continuously emerging, and established ones are rapidly evolving. Each passing month brings a wave of innovation, and it’s easy to question whether you're a well-rounded frontend engineer or just someone proficient in a single framework. This attachment to one framework can feel like a first love, making the thought of switching technologies seem like a betrayal.

However, embracing new technologies can open up exciting possibilities. In this article, we'll explore some of the latest and most intriguing frontend technologies, specifically Svelte and Solid.js, and discuss why I still choose to use React for future projects.

What’s Svelte?

Svelte is a tool that transforms your easy-to-write components into super-efficient JavaScript that directly handles the DOM. Unlike classic frameworks like React or Vue, Svelte does its magic during the build step instead of in the browser. So, no virtual DOM and no frameworks running in the browser. This helps in building faster and lighter apps.

Now lets break it down into some main key features;

• No Virtual DOM: Unlike other frameworks that use a virtual DOM to manage changes, Svelte updates the actual DOM directly.
• Small Bundle Size: Because there’s no runtime, the final bundle size is significantly smaller.

<script>
  let number = 0;

  function increment() {
    number += 1;
  }
</script>

<style>
  button {
    padding: 10px;
    font-size: 16px;
  }
</style>

<div>
  <p>Number: {number}</p>
  <button on:click={increment}>Increment</button>
</div>

What is Solid.js?

Solid.js is all about high performance with super-detailed reactivity. It's inspired by React's JSX and gives developers a similar vibe, but with a unique reactivity model. Think of it as having a compile-time approach like Svelte but with a reactive system that's more like MobX or RxJS.

some key features to note;

• No Virtual DOM: Solid.js directly updates the DOM, it doesn't have use for virtual DOM.
• Fine-Grained Reactivity: Solid.js updates only the necessary parts of the DOM, that's why you get more efficiency
• JSX Syntax: Developers familiar with React will find it easy to pick up due to its similar JSX syntax.

import { createSignal } from "solid-js";

function CountNumbers() {
  const [numbers, setNumbers] = createSignal(0);

  return (
    <div>
      <p>Numbers: {numbers()}</p>
      <button onClick={() => setNumbers(numbers() + 1)}>Increment</button>
    </div>
  );
}

export default CountNumbers;

Svelte vs. Solid.js: Let's compare

Performance

Both Svelte and Solid.js are built for speed. Svelte compiles to direct DOM updates, making apps fast. Solid.js also skips the virtual DOM, using fine-grained reactivity to update only the necessary parts.

Developer Experience

Svelte gives developers the experience that feels like writing plain JavaScript, which is great for beginners.

Solid.js, on the other hand, might be easier for React developers to pick up because of its JSX syntax.

Ecosystem and Community

Svelte is gaining a lot of fans and has a growing community. SvelteKit is a standout framework, providing everything you need to build modern web apps with server-side rendering.

Solid.js is newer but growing fast. Its community is expanding, and Solid Start is shaping up to be its version of SvelteKit.

I'm still using react though

I love using React.js because it's been around for a while, its community is large in case you're having any trouble building any component, i'm pretty sure there is a solution out ther for you similar to your challenge, and tons of great tools. React’s component-based setup and all the libraries and tools out there make it perfect for building apps that are easy to scale and maintain.

*Want to Learn? *

I joined HNG internship to futher sharpen my skills in frontend development, learning all its cool features while working on real projects.

During the HNG Internship, you'll dive into projects using React.js, giving you hands-on experience and a chance to boost your skills. You'll get to work on cool projects, team up with a bunch of different developers, and pick up some top-notch tips for modern web development.

To learn more about the HNG Internship and explore its various opportunities, visit HNG Internship and HNG Hire.