Svelte, React, HNG and Me
Comparing react and svelte, discussing the HNG internship and what my business in all this racket is.
Web development is at once a mature and developing field. Ever since the web was invented at CERN in 1989, it has grown in leaps and bounds to become the most familiar way we use the internet today. Frontend development in particular, has seen constant evolution, always with the aim of making the process of developing websites and web apps easier, as well as making these apps more performant.
I will be looking at two popular frontend technologies in this piece: Svelte and React. Currently, I am participating in the Frontend track of HNG 11, a bootcamp for aspiring developers and adjacent roles. In this track, we will be using Reactjs by Facebook as our frontend library, and I am excited to share my thoughts on these technologies and on the bootcamp.
React: What are we reacting to?
React, the frontend library named after a verb, is the most popular JavaScript library for building user interfaces on the web. And over the years, it has been extended by developer teams for use in building user interfaces for mobile devices (React Native) and for building entire fullstack applications (Remix, Nextjs). Like all mainstream frameworks, it is allows developers to create and reuse building blocks called components to build UIs. This sort of architecture simplifies the process of implementing complex UI designs and makes it easier to think about how user input and data are to be handled in a web app.
Since its birth, there has been two standout features of React. One has been its use of the Virtual DOM. This lightweight representation of the browser DOM relieves the developer of the need and the care required to monitor and update the browser DOM for each and every change in application state. Instead, the developer focuses on building out application logic, while React reconciles each change in state as recorded in the Virtual DOM, with the state rendered to the user by the browser DOM and updates it as appropriate. Any one less chance to introduce bugs into code is a plus to any developer.
The second well known characteristic of React is its HTML-like syntax called JSX. While nobody is sure what exactly JSX stands for (JavaScript Syntax Extension? JavaScript XML? JSX???), we do know it looks like HTML (and with three exceptions, if you know how to write html, then you know how to write JSX) and acts like JavaScript (JSX is complied to regular JavaScript functions under the hood). This introduced a new dimension to the idea of Separation of Concerns in development, as React doesn’t separate technologies--markup and logic dwell together in JavaScript classes or functions called components, but separates concerns — state, behaviour, however you define it.
Currently the most popular frontend tool on the planet, it has a vast ecosystem, strong community support and robust history of use in industry. It’s from Meta, the company formerly known as Facebook, after all.
Svelte: Sweet
Svelte. The first frontend framework with a really sweet name. Svelte. S-vel-t, S-vehl-t. It is pretty hard to stop vocalising while I write this, as the name just rolls off your tongue. Though anew entry to the world of fronted web development, it has already demonstrated its sweetness not only in word, but in deed. Currently, it is ranked the most loved web framework in the world (Not surprised, with such a sweet name, you are sure to svelte, eh melt, the hearts of devs round the world). Created by Rick Harris, it has taken a different approach to simplifying the work a developer needs to do to monitor and update the browser DOM by compiling HTML templates at build time into efficient imperative code that selectively updates the browser DOM directly, eliminating the need for runtime code entirely.
Svelte’s use is characterized by smaller app bundle sizes, straightforward syntax, comparatively lower occurrences of boiler plate code. And companies around the world know this and have started migrating some of their projects to this sweet framework
Comparisons: React vs Svelte
To compare React and Svelte, I will be using the following metrics: performance, tool type, learning curve, ecosystem and community, development experience, and file size.
Performance
Now, both tools are performant. So also are web apps built with them. And both are easier to use in building complex stuff than vanilla JavaScript. Still how they go about their business gives one a (slight? trivial?) performance advantage over the other. React uses a virtual DOM and a diffing algorithm to reconcile this DOM with the real DOM using the smallest number of operations at runtime. This is super efficient. Svelte takes a different approach, compiling code at build time, resulting in even faster apps. Svelte for the win here.
PS: React 19, the latest and greatest version of React is actually moving away from the Virtual DOM to use the new React Compiler for, wait for it, build time DOM update. Just like Svelte.
Tool type
While both are frontend tools, they aren’t exactly the same type of tool; React is a library, Svelte, a framework. And in dev jargon, these aren’t the same even though their functionality can overlap. A library is a collection of reusable code from which a developer may use parts as he pleases in his program. A framework on the other hand is a skeleton, an abstract design of an application which the developer fleshes out (i.e customises) for his particular use case. So a library gives you bits from which you can build your app, a framework gives you a barebones app which you put some skin. The key technical difference between the two is what is called inversion of control. The idea goes thus: “methods defined by the user to tailor the framework will often be called from within the framework itself, rather than from the user’s application code.” . It is the opposite for a library: the library’s methods are called by the user’s application code.
There’s no right or wrong to the question do I use a framework or a library? It is entirely up to you!
Learning curve
Both tools use JavaScript, the language of the web, in their development. React usually needs you to be familiar with JSX , but if you have ever developed for the web before, that is trivial. However compared with Svelte, React is usually said to be overcomplicated. Ask Brad Traversy of Traversy Media. Svelte works just as well, but is simpler and more straightforward. Considering the percentage of developers that love it, Svelte does give you a swell time (terrible rhyme, I know)
Ecosystem and community
This is one place React wins hands down. Kapoosh! No battle here. React boasts one of the largest web developer ecosystem and community, with multiple third party libraries, and frameworks built around the library. It is the must used frontend tool on the web and also has very strong support. Svelte is growing to be sure, but it has a long way to go if it is to catch up with React. Industry wise, you are better off perfecting your React knowledge.
Development experience
React, according to Brad Traversy anyways, is overly complicated. Take for instance State Management: You don’t mutate state in React. Rather you take one of the couple of roundabout ways to change state: Context API, useReducer hook, Redux and Redux Toolkit, Immer etc. Svelte has better and much more straightforward (and without bugs too) ways to manage state. It is just much easier to make a mistake in React given the degree of flexibility (or complexity if you ask Brad).
File size
Svelte’s output is a lightweight performant app. React’s output is a heavier performant app. If bundle size matters to you, you might as well belt out of the park with Svelte. (S-vehlt, *moans in Greek).
HNG Frontend Track and ReactJs
I personally have no problems with ReactJS, though I perfectly understand why a great number of developers prefer Svelte. I mean, I prefer its name too (S-velhet, Sss- ve-ehl-t, reaaaaaaact). However, I intend to be marketable, and as React is quite a good, and actually competitive option performance wise, I have no grudges with it.
HNG internship is designed to churn out competent, industry ready professionals. So going with React is the wise choice as it is incredibly performant, not so hard to learn, and more widely used than any other frontend tool — library or framework, in the developer marketplace. I have partaken in previous iterations of HNG, though for one reason or the other, I have been unable to be a finalist. I am excited to do this once again this year though, and I expect that I have an even better finishing than my prior participation. If I am a finalist, that would be great, but a stage 7+ finish will demonstrate to me that I have what it takes to put myself out there as a marketable software engineer.
Check out HNG if you are interested:
