React or Svelte?

As front-end developers, we are tasked with creating the interface for users to interact with applications. Now, let’s dive deep into two technologies we use to achieve this.

Frameworks and Libraries

Frameworks provide a structured way to build and organize code by offering built-in tools and features to streamline development. Libraries, on the other hand, are collections of pre-written code that developers can use to perform common tasks.

React

React, a product of Facebook, is a JavaScript library for building UI components. It is component-based, so the UI is broken into reusable pieces. It uses JSX, a JavaScript syntax extension that allows you to write HTML-like code in JavaScript, making UI component creation easier.

Svelte

Svelte, also based on JavaScript, is a modern and somewhat new framework for building user interfaces. It uses a unified syntax where components are written in a single .svelte file, integrating HTML, CSS, and JavaScript seamlessly.

If you’ve been finding it hard to choose between the two, read on as I compare them to help you make your choice.

React vs. Svelte

Round 1: DOM Rendering

React uses a virtual DOM, a lightweight edition of the real DOM, which the React library keeps up-to-date and computes the changes once one has occurred. It then updates the real DOM by applying these computations. Svelte differs from React here because it updates the DOM directly, which brings reduced overhead and faster reactive updates compared to virtual DOM-based frameworks. It seems like Svelte beats React here!

Round 2: Ecosystem

React has a vast ecosystem consisting of tools like Redux for state management, React Router for routing, and a large number of third-party libraries, tutorials, and resources. Being a self-paced learner, I can attest to React’s large and active community being a huge advantage on my React learning journey so far. Svelte's ecosystem is smaller compared to React's, resulting in fewer third-party libraries and tools available, and the learning resources are not as extensive as those for React. I am convinced that Svelte does not match up to React here.

Round 3: Setup Time

React often requires additional setup of tools, such as Babel for JSX, amongst others, which can be complex for beginners. React applications also require a significant amount of boilerplate code (repeated code) used when managing state or setting up routing. Svelte prioritizes simplicity and usability, with a syntax that is easy to learn, and a built-in compiler that eliminates the need for additional tools. Svelte components encapsulate HTML, CSS, and JavaScript in a single file, promoting an organized code structure and reduced boilerplate associated with file organization. Svelte 1, React 0.

Round 4: State Management

For state management, React requires additional libraries like Redux to offer local component state and global state management. Svelte simplifies state management with reactive declarations and delivers optimized performance, but has a smaller ecosystem for complex state management scenarios compared to React. Here, no one wins. Your choice should depend on the project’s state management needs.

In the comparison above, I have listed the features of each technology under categories. For me, React was the perfect library when starting out in front-end development because it was popular and based on JavaScript, a programming language I was already skilled at. But after discovering the advantages Svelte offers, if I ever feel the need to steer off my React path to try something new, I think Svelte will be my first choice.

HNG Frontend Program

The HNG internship offers a platform for people from different tracks to learn, grow, network, and make their mark in the tech industry. During this internship with HNG, my priorities are to hone my skills in React and discover how I can use front-end development to further create solutions to common problems. I am excited to advance in my career as a frontend developer and completing this internship program will be a great start for me. To learn more about the internship program, visit https://hng.tech/internship or https://hng.tech/hire.

Thank you for reading!