Yet another insight about the current state of web development

Adrian Wragg
Nov 22, 2022
developmentreactsveltevueweb

Web development is a rapidly growing field that requires fast adaptability if you are to keep up with all the current features and updates that are being published at almost light-speed. When evaluating the different options, there are three notoriously important approaches to consider: React, Vue and Svelte.

In this blog post I’ll try to the best of my ability to explain and compare what they are, how they work, and some broad use cases for each and one of them, so that you can decide which one suits your current project’s needs best!

Basic concepts

React

React or React.js is a UI building library developed by Facebook. It originally launched in 2013, and has since come a long way, gaining overwhelming popularity and it’s almost become the de-facto way to go in many commercial projects.

React is highly flexible and scalable, since it’s just a library and not a fully-fledged framework: for instance, it doesn’t include officially supported routing or state management tools. However, due to the sheer numbers of developers currently using React as their daily driver, there are many third-party solutions for such things, plus there also is Next.js, a framework based on React and maintained by Vercel, which includes all these goodies from the get-go.

Vue

Vue is a JS-based framework originally developed by Evan You, a developer that had worked previously for Google in AngularJS, although today it is maintained by a somewhat big community. The idea behind Vue can be summarized in Evan’s own words: “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight?“.

While Vue might not be as flexible as React, it offers all the good extras needed to go from zero to production: it has its own router and it’s currently using Pinia as its default state management library (although the team is still maintaining Vuex, no new features are planned to be added to it).

Vue’s syntax is way more structured than that of React, with its all-new composition API and the bleeding edge addition of the <script setup> syntactic sugar.

Svelte

Svelte is a bit of a special case. It’s neither a library for building UIs nor a framework; instead, Svelte is a JS transpiler that generates plain JS code from your Svelte code. It was created by Rich Harris, an editor for the NY Times, and although it’s currently maintained by a very limited community, it has gained a lot of popularity in recent years due to its simplicity and performance.

Being more similar to Vue regarding its syntax, Svelte offers a straight forwards way of writing code that is also as close as it can get to vanilla JS, without compromising feature-richness or usability.

How they work

There are, however, significant differences between the inner workings of these three options. Let’s explain a bit in order to get the bigger picture:

React implements something called a virtual DOM (VDOM), which is an internal/virtual representation of a UI that is rendered at any given time, and its kept in sync with the real DOM via something called reconciliation.
Any time there is a change in some of the data to be displayed, React compares how the VDOM has changed and then proceeds to apply only the necessary changes to the real DOM. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
Unfortunately, this also means that once you run the `build` command of your application, you’re not only shipping the code for you app, but also some overhead code that React needs in order to carry out those updates.

Vue works in a way that is similar to React; that is, Vue has its own implementation of the VDOM, with the major difference that Vue’s VDOM is Compiler-Informed: while React’s VDOM doesn’t make any assumptions about the incoming DOM tree, Vue’s VDOM management is somewhat optimized in compile-time, so that’s a bit of a plus for performance. Additionally, Vue has the concept of reactivity at its core, you can learn more about it here.

Finally, Svelte is again a bit different than the other two, as it bundles your app with Rollup and transpiles your code directly into vanilla JS, making this option, comparatively, the fastest at runtime. Isn’t that nice?

Syntax

Regarding the syntaxes of these three, Vue and Svelte structure their components’ syntax in a strikingly similar way since the latest addition of Vue’s composition API (even more with the aforementioned syntactical candy of Vue). React on the other hand, has its own very particular way of doing things:

React’s JSX

In JSX, there is a bit of a mixture of JS and HTML. This means that expressions such as:

are totally allowed, and even more so, encouraged at some points for reasons I will explain below.

In the same way, embedding JS expressions into your “HTML” (and yes, that is quoted due to it not really being HTML) is just as easy:

Now, this might be a bit confusing at best and outrageous at worst; that is, unless you consider the way React manages components: until React version 16, if a component had some internal state, you would have to extend React’s Component class in order to manage its state, among other things. However, from version 16 onwards, React’s documentation states that all components should now be functional components, since things such as state and side effects can now be used there with hooks.

What this translates to is that, because every component is effectively a function, the return statement of that function is the pseudo-HTML. Therefore, a component could look something like this:

Thus, storing HTML elements in constants or computed properties can actually come in handy!

Vue’s composition API

As shown above, Vue divides its components in three parts: the script, the template and the style.

With the new composition API, Vue’s components are now extremely easy to read and understand. Let’s see a fairly simple example:

The script tag includes the functional part of the component: constants, computed properties, props, lifehooks, you name it. On top of that, with the new setup syntactic sugar, it feels more natural to manage that logic since it’s as close to vanilla JS as it has ever been before!
The template tag would include your HTML with embedded JS expressions. That’s it, simple huh?
Finally, the style includes your styles.

With this clear separation of functionality, it might be easier for newcomers to start with Vue. That said, it’s worth noting that Vue has recently adapted something called template refs for managing reactive properties.

Svelte

Svelte’s syntax is, as I mentioned before, very similar to that of Vue’s:

The main difference here is that Svelte’s syntax is much, much closer to vanilla JS as, for example, it allows for the declaration of non-constant, reactive values with the reserved word let. It also packs a bit of other fun stuff, such as reactive statements, which double as Vue’s watchers and computed properties.

Honestly, writing code in Svelte is the freshest, most unexpected fun from these past years ?

Use cases

Now, about the use cases. It is entirely possible to create the same app with any of the three, but there are a few things to consider before diving in:

  • The community behind it. With the exaggerated number of developers and companies that currently use React, it is much more likely to quickly find a solution to any given problem you might be facing with a Google search than if you are using Vue and Svelte. Vue’s documentation is one of the best and more complete I have ever seen, but Stackoverflow usually comes more handy. As for Svelte, even though the docs are very informative, its community is quite limited.
  • Features already included. While there are fully equipped solutions for React (Next.js) and Svelte (SvelteKit) which include routing and state management (among other things), Vue is the most complete of the three, providing a feature-rich battery of tools to work with from the get-go.
  • Scalability. All options here are extremely scalable. Start small, grow as you need, or if you already have a vision in mind, you can choose to go with the frameworks built upon them: Next.js for React, Nuxt.js for Vue and SvelteKit for Svelte.

It’s entirely up to the chooser’s criteria which one to use, as neither option is very strongly opinionated.

Final thoughts

To conclude, it’s my personal opinion that development-wise it doesn’t really matter which option you decide to go with, as learning any of these three fantastic alternatives is fairly easy, and thus writing code is a relaxed experience that doesn’t require a lot of expertise to get started. In terms of actual efficiency however, I would recommend Vue if you’re planning a project that requires exponential scalability, and React if you’re comfortable with “add-stuff-as-you-go”.

Well, that was it. Thanks for reading and I hope I have shed some light for your decision making!